BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

在Flash Pro的舞台上直接配置运动对象的属性以及加减速运动算法的研究

| 作者 James Li 关注 0 他的粉丝 发布于 2011年8月6日. 估计阅读时间: 6 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

有一段时间没有写技术文章了,今天我要介绍两个技巧。一个是如何利用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){
	/*运动停止*/
}

源文件下载

actress.zip (600kb)

查看原文:在Flash Pro的舞台上直接配置运动对象的属性以及加减速运动算法的研究

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT