有一段时间没有写技术文章了，今天我要介绍两个技巧。一个是如何利用 Flash Pro 的舞台直接配置运动对象的属性，这个技巧在我多年的工作中经常用到，可以非常的方便直观地定义元件在舞台上的运动效果；另一个是如何用三角函数来自定义一个先加速后减速的运动轨迹算法。
有关 Flash 舞台
Flash 里的舞台是一个平面直角坐标系，每一个显示对象（如 MovieClip）内部都有一个舞台，容纳着这个对象的所有子显示对象。子对象在舞台上的位置、缩放、旋转度等属性可以直接用鼠标拖拽定义，其定义的结果会给显示对象的类属性赋值（如 x,y,scaleX, scaleY, rotation）。但是，我们在做开发的时候往往不会将需要控制的对象直接放在舞台上，取而代之的是根据应用程序的需要，在适当的时机使用构造函数创建一个对象，再通过代码来初始化这个对象的属性并把它加载到舞台上。这样创建的对象，它的一切行为都要通过代码来实现，其属性和运动数据也都要从配置文件中来解析获得。我今天介绍的就是如何通过 Flash 舞台来代替配置文件，为动态创建的显示对象提供显示属性的方法。
Reference 对象
如上图的三个小人，"影子"、"参照物"、"傀儡"...... 用很多词可以形容这样一个对象，它被直接放在舞台上，但是最终不会被显示出来，它的使命就是给最终需要显示的对象提供位置、缩放和旋转度等属性数据。嗯，我更多的时候叫它 Mapping 或者 Reference 对象。总之，我们可以直接通过鼠标来拖拽修改它的属性，然后在代码中把它们的位置、缩放和旋转度动态解析出来，赋给一个会在舞台上呈现的显示对象。既直观又方便。
上面的这个小人，她在三点间来回做先加后减的变速运动，下面来介绍一下相关的算法原理。
三角函数加速减速运动算法
写过运动轨迹的朋友都知道，缓动运动中最简单的是减速运动，可以用下面的代码来实现：
x += (targetX - x)/5; y += (targetY - y)/5;
在每一帧中调用一遍上面的代码，可以让 x 和 y 的值无限接近于 targetX 和 targetY，而且接近的速度越来越慢。这种算法比较适合周期比较短的切换效果。
对于更流畅的运动，比如先加速后减速运动，也可以通过设定瞬时速度和加速度的方式来实现，但是这样做的一个弊端是很难精准的控制运动物体的运动轨迹，无法实现在希望的时间内让物体从点 A 运动到点 B。很多朋友用过 Tweener，TweenLite 或者 TweenMax，这类运动渲染器可以创建一个非常精准的变速运动效果，可以对运动轨迹更好的控制。但是，对于移动开发来说，使用 Tweener 就意味着增加了一条渲染线程，不利于我们对 Timer 和 EnterFrame 的集中渲染。今天我要介绍一个自定义的先加速后直线减速运动算法，并且实现对运动时间和轨迹的精准控制。
在下面这个直角坐标系里，横轴表示时间，纵轴表示位移改变量，曲线上任意点的斜率与速度成正比。在定义域为 0 到 90 的范围内，曲线方程为 f(x) = (1-cos(x))/2，速率方程也就是导数方程是 f'(x) = sin(x)/2，这是一个增函数，说明运动物体在做加速运动；在定义域为 90 到 180 的范围内，曲线方程为 f(x) = (1+ sin(x+90))/2，速率方程也就是导数方程是 f'(x) = -sin(x)/2，这是一个减函数，说明运动物体在做减速运动。从两个部分的导数方程可以看出速率的曲线符合三角函数曲线特征，而且在加速和减速阶段的增量相互对称。
图 2.先加速后减速运动的位移增量曲线方程（自变量为时间）
这样，一个变速运动的方程就可以分解为两个部分，用 ActionScript 代码实现就是这样的：
// 改变时间增量
moveProgress += 2;
var pos:Number;
if(moveProgress<90){
// 定义常量 CONVERT 为 Math.PI/180，减小计算量
pos = (1 - Math.cos(moveProgress * CONVERT))/2;
}else{
pos = (1 + Math.sin((moveProgress-90) * CONVERT))/2;
}
//orx 为运动起点的 x 值，dx 为运动终点的 x 值与起点 x 值的差。pos 为单位时间内的运动增量
act.x = orx + dx * pos;
act.y = ory + dy * pos;
act.scaleX = orsx + dsx * pos;
act.scaleY = orsy + dsy * pos;
if(moveProgress >=180){
/* 运动停止 */
}
注册/登录 InfoQ 发表评论