Animation全接触（1）：Animation模型初步

Animation是AjaxControlToolkit中提供的经典模型之一，这个模型下的各种组件经过组合可以出现非常丰富的动画效果。Animation模型也是Microsoft AJAX Library客户端Component模型的经典案例，掌握了Animation几乎也相当于掌握了Component模型——甚至包括了Component模型的派生：Behavior模型和Control模型。在我看来，除了在“概念”上的区别之外，从技术角度分析它们几乎都是同样的东西。

另外，Animation源代码中的注释甚至超过了代码本身的数量，因此它也是非常优秀的学习资料。

Animation模型的基础是客户端AjaxControlToolkit.Animation.Animation类。为了编程方便，AjaxControlToolkit为AjaxControlToolkit.Animation命名空间取了一个别名“$AA”，因此我们在使用Animation类时可以通过“$AA.Animation”来访问它。

下图为Animation的UML表示：

Animation类继承了Sys.Component类，因此它也含有Sys.Component的所有成员和特性，例如raisePropertyChanged方法和propertyChanged事件。它的主要成员如下：

构造函数：

• Animation(target, duration, fps)：用于构造一个Animation对象，初始化一些值，不多说了。

属性：

• target：RW属性，DOM元素类型。表示Animation作用的DOM元素，例如ColorAnimation中改变颜色的那个对象。
• duration：RW属性，Number类型，默认值为1。表示这个Animation从头至尾“播放”一遍所需的时间，单位为“秒”。
• fps：RW属性，Number类型，必须是整数，默认值为25。fps即为frame per second，每秒多少帧。表示一秒钟的动画需要使用多少次变化进行。
• animationTarget：只写属性（Bad Practice），String类型。通过ID查找target。
• isActive：只读属性，Boolean类型。查看Animation是否处于活动状态（Play或Pause状态）。
• isPlaying：只读属性，Boolean类型。查看Animation是否处于播放状态。
• percentComplete：只读属性，Number类型。查看Animation已经播放的百分比。

方法：

• dispose：销毁Animation对象，不多说了。
• getAnimationValue：抽象方法。传入percentage作为参数，返回任意对象表示当前Animation状态。
• setValue：抽象方法。传入一个表示Animation状态的对象用于更新Animation效果。
• interpolate：传入start，end和percentage，返回start和end之间处于percentage位置的那个值。
• onEnd：Animation终止时会调用的方法。
• onStart：Animation启动时会调用的方法。
• onStep：Animation运行时每一步会调用得方法，接受当前percentage作为参数。
• pause：暂停Animation。
• play：开始Animation。
• stop：停止Animation。当finish参数为true，或者没有提供finish参数时，Animation将会停留在最终状态。
• raiseEnded：触发ended事件。
• raiseStarted：触发started事件。
• setOwner：设置Animation的Owner

事件：

• ended：Animation结束时触发的事件。
• started：Animation开始时触发的事件。

域变量（是这样翻译吗？）：

• DynamicProperties：Object类型。其实是一个字典，存放了Animation在开始前需要进行的操作。

 

上面的成员描述简单到了似乎没有多大价值的地步，因此我会再针对一些成员进行解释。不过一些涉及到高级话题（比如Animation的父子关系，从XML中解析Animation等等）的成员，暂时就不在这片文章中进行讲解了。另外，这片文章也会跳过简单成员的一些涉及到高级话题的细节。

当我们调用Animaion对象的play方法时，它会初始化一个Timer对象，并调用onStart方法。在每次Timer的tick事件触发时，Animation则会得到当前的percentage，作为参数执行onStep方法。当我们当调用pause方法时，它只是简单地停止Timer对象。而我们当我们调用stop方法时，则Timer对象会被销毁，并调用onEnd方法。onStart、onStep和onEnd的方法的原始实现都非常简单，例如onStart和onEnd分别调用了raiseStarted和raiseEnded方法，用于触发started事件和ended事件。

Timer的interval又是如何决定的呢？Animation在播放时，通过Fps就可以确定Animation中相邻两个step的间隔长度，这就是Timer的interval。从理论上讲，fps × step = 1000（毫秒），但是事实上，受到window.setInterval方法的限制，fps越高则误差越大。显然，Fps配合duration就能够算出每个step过后的percentage。

onStep的默认实现会自动将当前的percentage作为参数传入getAnimationValue方法，用于获得一个表示Animation状态的对象，然后再立即传入setValue方法用于更新Animation的样式。这个状态对象可以是一个简单的数字，也可以是一个表示许多信息的复杂对象。

因此，如果实现的是一个简单的Animation时，一般只需要正确实现getAnimationValue和setValue两个抽象方法即可。在开发高级的Animiation时，可能我们也会覆盖onStart，onStep和onEnd方法。至于其他的方法，我们一般都直接使用Animation类中定义的实现，仅仅会在非常特殊的情况下才进行覆盖。

在这里我准备了一个简单的CounterAnimtion类，用于在target元素中显示数字，以下则是它的实现：

Type.registerNamespace("Jeffz");

Jeffz.CounterAnimation = function(target, duration, fps)
{
    Jeffz.CounterAnimation.initializeBase(this, arguments);
    
    this._startValue = 0;
    this._endValue = 100;
}
Jeffz.CounterAnimation.prototype = 
{
    get_startValue : function()
    {
        return this._startValue;
    },
    set_startValue : function(value)
    {
        if (this._startValue !== value)
        {
            this._startValue = value;
            this.raisePropertyChanged("startValue");
        }
    },
    
    get_endValue : function()
    {
        return this._endValue;
    },
    set_endValue : function(value)
    {
        if (this._endValue !== value)
        {
            this._endValue = value;
            this.raisePropertyChanged("endValue");
        }
    },
    
    getAnimatedValue : function(percentage)
    {
        return this.interpolate(this._startValue, this._endValue, percentage);
    },
    
    setValue : function(value)
    {
        this.get_target().innerHTML = Math.round(value);
    }
}
Jeffz.CounterAnimation.registerClass("Jeffz.CounterAnimation", $AA.Animation);

 

CounterAnimation定义了两个额外的属性，startValue和endValue，表示初始值和末尾值。然后我们又实现了getAnimationValue和setValue方法。所有的实现都非常简单。在这里，我们用到了定义在Animation类中的一个辅助方法interpolate。这个方法接受start，end和percentage三个参数，返回start，end两个值之间处于percentage位置处的值。例如：interpolate(100, 300, 50)则返回200。

这个Animation的使用效果如下：

Duration:
Fps:
Start Value:
End Value:

 

需要注意的是，这里用的Timer并不是MicrosoftAjaxTimer.js中的Sys._Timer类，而是重新定义的Sys.Timer类。Sys._Timer类是为UpdatePanel服务的，它依赖于PageRequestManager等对象。Sys.Timer是AjaxControlToolkit中定义的组件，封装了window.setInterval方法，是个非常通用的Timer组件。如果需要的话，您也可以单独将它取出并使用。