javascript - 如何使用 html5 为字 rune 本设置动画

Question

如何在 HTML5 中为页面上的单个文本字符设置动画。就像 flash 中的这个例子。 http://www.greensock.com/splittextfield/

Answer 1

您必须将每个字符包装在 <span> 中然后使用 CSS position 移动该跨度/top/left .

您无法完全重现 Flash 示例所做的事情，因为该示例使用了模糊效果。 CSS 不能那样做； SVG可以，而IE的不规范filter可以，但这意味着总的代码分支。

您可以通过设置 font-size 来更改每个字母的大小, 但为了实现这种剪切/旋转效果，您必须使用 CSS transform 示例.这尚未标准化，并且浏览器支持存在漏洞。

这是我主要为 Firefox 破解的概念验证(抱歉代码长度):

<p id="effect">I've got a lovely bunch of coconuts.</p>
<button id="animate">Animate</button>


// Add ECMA262-5 method binding if not supported natively
//
if (!('bind' in Function.prototype)) {
    Function.prototype.bind= function(owner) {
        var that= this;
        if (arguments.length<=1) {
            return function() {
                return that.apply(owner, arguments);
            };
        } else {
            var args= Array.prototype.slice.call(arguments, 1);
            return function() {
                return that.apply(owner, arguments.length===0? args : args.concat(Array.prototype.slice.call(arguments)));
            };
        }
    };
}

// Lightweight class/instance system
//
Function.prototype.makeSubclass= function() {
    function Class() {
        if (!(this instanceof Class))
            throw 'Constructor function requires new operator';
        if ('_init' in this)
            this._init.apply(this, arguments);
    }
    if (this!==Object) {
        Function.prototype.makeSubclass.nonconstructor.prototype= this.prototype;
        Class.prototype= new Function.prototype.makeSubclass.nonconstructor();
    }
    return Class;
};
Function.prototype.makeSubclass.nonconstructor= function() {};

// Abstract base for animated linear sliding switch between 0 and 1
//
var Animation= Object.makeSubclass();
Animation.prototype._init= function(period, initial) {
    this.period= period;
    this.interval= null;
    this.aim= initial || 0;
    this.t= 0;
};
Animation.prototype.set= function(aim) {
    if (aim===this.aim)
        return;
    this.aim= aim;
    var now= new Date().getTime();
    if (this.interval===null) {
        this.t= now;
        this.interval= window.setInterval(this.update.bind(this), 32);
    } else {
        this.t= now-this.t-this.period+now
        this.update();
    }
};
Animation.prototype.toggle= function() {
    this.set(this.aim===0? 1 : 0);
};
Animation.prototype.update= function() {
    var now= new Date().getTime();
    var x= Math.min((now-this.t)/this.period, 1);
    this.show(this.aim===0? 1-x : x);
    if (x===1) {
        window.clearInterval(this.interval);
        this.interval= null;
    }
};
Animation.prototype.show= function(d) {};

// Animation that spins each character in a text node apart
//
var ExplodeAnimation= Animation.makeSubclass();
ExplodeAnimation.prototype._init= function(node, period) {
    Animation.prototype._init.call(this, period, 0);
    this.spans= [];

    // Wrap each character in a <span>
    //
    for (var i= 0; i<node.data.length; i++) {
        var span= document.createElement('span');
        span.style.position= 'relative';
        span.appendChild(document.createTextNode(node.data.charAt(i)));
        node.parentNode.insertBefore(span, node);
        this.spans.push(span);
    }

    // Make up random positions and speeds for each character.
    // Possibly this should be re-randomised on each toggle?
    //
    this.randomness= [];
    for (var i= this.spans.length; i-->0;)
        this.randomness.push({
            dx: Math.random()*200-100, dy: Math.random()*200-150,
            sx: Math.random()*1.5, sy: Math.random()*1.5,
            dr: Math.random()*240-120, og: Math.random()+0.5
        });

    node.parentNode.removeChild(node);
};
ExplodeAnimation.prototype.show= function(d) {
    for (var i= this.spans.length; i-->0;) {
        var style= this.spans[i].style;
        var r= this.randomness[i];

        style.left= d*r.dx+'px';
        style.top= d*r.dy+'px';
        var transform= 'rotate('+Math.floor(d*r.dr)+'deg) scale('+(d*r.sx+1-d)+', '+(d*r.sy+1-d)+')';
        if ('transform' in style)
            style.transform= transform;
        else if ('MozTransform' in style)
            style.MozTransform= transform;

        var o= 1-Math.pow(d, r.og);
        if ('opacity' in style)
            style.opacity= o+'';
        else if ('filter' in style)
            style.filter= 'opacity(alpha='+Math.ceil(o*100)+')';
    }
};


var animation= new ExplodeAnimation(document.getElementById('effect').firstChild, 1000);
document.getElementById('animate').onclick= animation.toggle.bind(animation);

这可以通过添加引力和更好的当前完全随机变换的 3D 空间建模，以及在 Firefox 以外的浏览器中更好地支持缩放/旋转来改进。

(IE 有自己的非标准 CSS transform filters 可能会支持；Webkit 和 Opera 有 webkitTransform 和 oTransform 样式，但它们拒绝转换相对定位的内联跨度，所以你有对每个字符进行绝对定位，这意味着读取它们的所有正常位置以用作基线。我在这一点上感到无聊。)