animation - 动画控件

这是一个动画基类,动画过程的逻辑需要从这个基类继承过去重写__doAnimationFrame的方法,这在个方法可以自己定义每一帧动罗的位置逻辑,库里定义了贝塞尔曲线, 弹跳,减速,easein,easeinout,easeout,linear这些动画方式

Allocate

动画基类控件所在脚本 {lib}util/animation/animation.js 从animation继承生成一个类,如果我们要生成一个线中心点运动的动画,我们可以做如下:

var f = function() {
        var _  = NEJ.P,
            _tu = _('t.u'),
            _e = _('nej.e'),
            _p = _('nej.ut'),
            _proAnimCircle,
            _supAnimCircle;
    //参数的选择详见animation.js
    _p._$$AnimCircle = NEJ.C();
      _proAnimCircle = _p._$$AnimCircle._$extend(_p._$$Animation);
      _supAnimCircle = _p._$$AnimCircle._$supro;
   /**
     * 控件重置
     * @param  {Object} _options 可选配置参数
     * @return {Void}
     */
    _proAnimCircle.__reset = function(_options){
        this.__supReset(_options);
        this.__radius = _options.radius||50;
        this.__round = _options.round||10;
    };
    /**
     * 动画帧回调
     * @param  {Number} _time 时间值
     * @return {Void}
     */
    _proAnimCircle.__doAnimationFrame = function(_time){
        var _elapse = (_time-this.__begin.time)/1000,
            _delta  = 2*Math.PI*_elapse,
            _offset = {x:this.__radius*Math.cos(_delta),y:this.__radius*Math.sin(_delta)},
            _stop = !1;
        if (_delta>this.__round*2*Math.PI){
            _stop = !0;
        }
        this._$dispatchEvent('onupdate',_offset);
        return _stop;
    };
    var ac = _p._$$AnimCircle._$allocate({round:10,radius:100,onstop:onStop,onupdate:onUpdate})
    ac._$play();
    var _ball = _e._$get('ball');
    function onStop(_offset){

    }

    function onUpdate(_offset){
        if(!!_offset){
              _ball.style.top = 150+_offset.y +'px';
              _ball.style.left = 150+_offset.x +'px';
        }
    }
    _tu._$processCode();    
    }

    define(['{lib}util/animation/animation.js', '{pro}js/extend.js'], f);

以上是一个圆点围线一个中心点旋转,输入围绕的圈数,围绕的半径,停止时的回调,和每一帖的回调函数, 这里要做的是把输入的参数圈数和半径做一下记录处理,当满足stop条件时停止动画,从_$$Animation基类继承下来,可以方便的进行动画逻辑处理

Explain

参数

to [Object] - 动画结束信息

from [Object] - 动画初始信息

onstop [Function] - 动画结束回调事件

onupdate [Function] - 动画更新回调事件

更多的参数信息请参照animation.js api说明

_$$AnimEaseIn

在画动库里还提供了贝塞尔曲线, 弹跳,减速,easein,easeinout,easeout,linear这些动画方式的类 easein,easeinout,easeout,linear这几个类都是从bezier类继承,配置了下参数,所在挑一个说明一下怎么用这几个类 假如我们要用easein在一个动画——可以做如下 添加依赖 {lib}util/animation/easein.js

var f = function() {
        var _  = NEJ.P,
            _tu = _('t.u'),
            _e = _('nej.e'),
            _p = _('nej.ut');

    var ac = _p._$$AnimEaseIn._$allocate({from:{offset:50},to:{offset:500},onstop:onEaseinStop,onupdate:onEaseinUpdate})
    ac._$play();
    function onEaseinStop(_offset){

    }
    function onEaseinUpdate(_offset){
        _block.style.width = _offset.offset +'px';
    }
}
define(['{lib}util/animation/easein.js', '{pro}js/extend.js'], f);

上面的代码需要有_block这个节点,_block节点的宽度动画的改变, onupdate输入的_offset是from和to的offset的一个Easein函数变化的一个结果值,只要把update的offset应用到节点就可以实现动画。

_$$AnimBounce

添加弹跳脚本依赖 {lib}util/animation/bounce.js

var f = function() {
        var _  = NEJ.P,
            _tu = _('t.u'),
            _e = _('nej.e'),
            _p = _('nej.ut');

    var ac = _p._$$AnimBounce._$allocate({from:{offset:20,velocity:500},acceleration:500,springtension:0.7,onstop:onBounceStop,onupdate:onBounceUpdate})
    ac._$play();
    function onBounceStop(_offset){

    }
    function onBounceUpdate(_offset){
        _ball.style.left = _offset.offset +'px';
    }
}
define(['{lib}util/animation/bounce.js', '{pro}js/extend.js'], f);

上面的代码需要有_ball这个节点,_ball节点为绝对定位,使left改变能应用到节点上, 这一类的动画是以一个初速度出去velocity,如果要使运动的距离变远,acceleration的值就要越大,整个动画在一秒之内完远,张紧度是越小运动的距离越远,可以调整acceleration的值和springtension的值, 使动画的距离更加合适

_$$AnimDecelerate

减速运动动画,由三个参数决定动画的形态,velocity初速度,friction阻尼系数,friction越小地面越光滑,越接近于无阻力运动,acceleration加速度,这个速度越大,完成减速的动画时间越短 添加弹跳脚本依赖 {lib}util/animation/decelerate.js

var f = function() {
        var _  = NEJ.P,
            _tu = _('t.u'),
            _e = _('nej.e'),
            _p = _('nej.ut');

    var ac = _p._$$AnimDecelerate._$allocate({from:{offset:20,velocity:5},acceleration:20,friction:0.2,onstop:onDecelerateStop,onupdate:onDecelerateUpdate})
    ac._$play();
    function onBounceStop(_offset){

    }
    function onupdate:onDecelerateUpdate(_offset){
        _ball.style.left = _offset.offset +'px';
    }
}
define(['{lib}util/animation/decelerate.js', '{pro}js/extend.js'], f);

上面的代码需要有_ball这个节点,_ball节点为绝对定位,使left改变能应用到节点上

Recycle

ac._$recycle();

Known Issues

Demo

动画基类demo

© 1997-2013 Netease. All Rights Reserved.
comments powered by Disqus