Flash交互设计-09-AS3.0动画编程

第9章AS3.0动画编程•动画是Flash创作的基础，从最初的帧补间动画到现在的动画编程，Flash动画制作走出了一条非常圆满的道路。ActionScript3.0的动画编程主要关注两方面的情形：一是通过改变显示对象的属性创建动画效果；二是利用Shape类的绘制类进行代码绘制，渲染效果。•ActionScript3.0动画编程要涉及数学、物理学等方面的内容非常的多，也比较复杂。在本章先介绍两种基本的动画实现原理并创建简单的动画效果。对于数学和物理学的基础知识，则留到后面的章节具体详细的讲述。9.1可视化动画编程简介•动画是指控制显示对象随着时间不断的发生变化，这些变化可能是位置的变动，速度的变化，外观形状的改变，颜色透明度的改变等等。总而言之，动画可以实现的形式是纷繁多样的。借用一句口语“只有想不到，没有做不到”，只要能够想到的效果，在Flash中都能够实现。•最早版本的Flash中，使用逐帧动画和补间动画来实现动画效果，一个显示对象放于一个关键帧上，然后插入另一个关键帧，改变第二个关键帧中显示对象的显示属性，然后两帧之间通过差值计算形成完整的事件轴动画。•可视化的动画编程，伴随ActionScript脚本语言的出现开始逐渐的兴起。从早期ActionScript中的“三帧法”动画编程，逐步发展到onClipEvent(enterframe)、onEnterFrame循环事件，ActionScript动画编程中帧循环起着至关重要的作用。9.2动画编程原理•和所有的动画显示一样，Flash的动画原理也是通过不断的刷新屏幕，利用每次屏幕上显示对象位置的不同、大小色彩的变化等产生动画效果。动画编程的关键是一定要有变化，而且该变化需要在一定时间内来完成。Flash中使用帧频来控制每秒钟刷新屏幕的次数，通过使用的帧频的范围在12～60帧每秒，推荐使用的是24帧每秒这样的一个速度。•ActionScript3.0的动画编程也是同样的原理，通过不断的刷新屏幕来实现动画效果。•ActionScript3.0的动画编程按照实现的方式可以分为两种：•对显示对象的显示属性进行控制，调整每次刷新屏幕时显示对象的显示属性实现动画效果，这种称为显示属性动画。•利用绘制API在每帧中使用代码绘制不同的形状，从而产生的动画效果，这种称为代码绘制动画。•通过编程实现刷新屏幕，ActionScript3.0中提供了两种方式可供选择：•帧循环更新：利用Flash本身的帧频速度，在每次刷新屏幕时改变显示对象。此方法需要使用事件侦听器侦听显示对象的Event.ENTER_FRAME事件。•定时器更新：利用Timer类的定时更新功能，每隔一定的事件使显示对象改变一次。此方法需要使用事件侦听器侦听显示对象的TimerEvent.TIMER事件。9.3代码绘制动画效果•代码绘制动画效果，就是每帧绘制的图形有所变化，这样播放起来就形成了动画。绘制代码主要使用Graphics类的绘制API来进行绘制。•下面创建一个非常流行的电流动画效果。其实现原理为：首先在水平方向每隔3个像素进行绘制，而竖直方向的绘制点可以在一个位置附近随机变化，这样形成一条随机弯曲的线条；然后使用帧循环事件，每帧重新绘制一次，实现线条的随机变化，进而实现最终的电流效果。9.4改变对象属性•本节将通过改变舞台的显示属性来实现一系列的动画效果。这些效果大体分为两部分：一部分是与运动相关的动画，主要是通过修改显示对象的坐标来实现。此部分将会介绍一些物理运动学的基础知识。另一部分通过改变显示对象的缩放属性、旋转属性和透明度属性，实现显示和形状动画Ч9.4.1移动物体•要实现移动舞台的效果，只需改变坐标属性即可。修改横坐标可以实现水平运动的效果，修改纵坐标可以实现竖直运动的效果。•在物理学中，物体运动的快慢是用速度来描述的。速度反映了物体在单位时间内发生的位移的大小。对于匀速运动的物体，位移的大小等于速度乘以时间。•在Flash中，实现物体的运动，运算的原理是：确定速度大小，帧循环刷新时原来的位置坐标加上速度的值。•原理主要公式如下：•var_vx:Number=水平速度值•var_vy:Number=竖直速度值•显示对象.x+=vx•显示对象.y+=vy9.4.2加速运动的物体•在物理学中，物体运动的快慢是用速度来描述的，而速度变化的快慢是用加速度来描述的。加速度反映了物体在单位时间内速度变化的快慢。•加速度和速度关系的公式为：•v=v+a•vx+=ax•vy+=ay9.4.3减速运动的物体•物理学中，简单的减速运动和加速运动一样，利用加速度的值来改变速度的值，进而实现物体的位置变化。但加速运动加速度为正值，减速运动的加速度为负值。当然，也可以通过速度减去一个正的加速度实现减速运动的效果。•减速运动中加速度（此处按照加速度为正值）和速度关系的公式为：•v=v-a•vx-=ax•vy-=ay9.4.4鼠标跟随缓动效果•在Flash中最常见的缓动效果，就是一个显示对象先快后慢，逐渐的移动到目的地。这也是一个减速运动的过程，不过运动过程中的加速度会发生改变。•二次缓动是最常用的，通过每次前进当前位置和目标位置之间距离的二分之一，如此重复的操作，知道最后无限的接近目标点。但是这样永远无法实现达到目标点，所以一般控制当前位置和目标位置之间的距离小于1象素时，可以近似认为已经达到了目标点。•二次缓动的计算公式为：•dx=目标位置.x-当前位置.x•dy=目标位置.y-当前位置.y•vx=(dx)/2•vy=(dy)/29.4.5利用三角函数实现运动效果•数学中三角函数的正弦和余弦函数是对物体的运动非常有用的函数。这两个函数都具有周期性，其值范围为-1~1，而且由于周期性，其值能够在-1~1之间循环变化。利用这些特点，可以实现显示对象周期性的往复运动效果。关于三角函数的知识请参见《数学和数字》一章的内容。•下面的示例利用正弦三角函数实现小球在平衡位置附近的往复运动。其实现流程为：创建一个小球→加入场景→创建帧循环事件处理函数→利用帧循环事件，实现小球的运动。使用文档类：MoveSin，9.4.6缩放动画效果•要实现缩放效果，只需实现不断修改显示对象的缩放属性scaleX和scaleY即可。•下面的示例通过修改矩形的scaleY属性，实现矩形缩放效果。其实现流程为：创建一个小球→加入场景→创建帧循环事件处理函数，实现缩放操作→利用帧循环事件，实现小球的缩放。使用文档类：Scale，9.4.7旋转动画效果•要实现旋转一个显示对象的动画效果，只需要修改rotation属性即可。•下面的示例用一个箭头来实现鼠标跟随效果，跟随鼠标的箭头的指向会随着鼠标位置的变化而发生旋转。其实现流程为：创建一个小球→加入场景→创建帧循环事件处理函数，实现旋转效果→利用帧循环事件，实现小球的旋转。使用文档类：Rotation，9.4.8淡入淡出动画效果•淡入淡出效果也是Flash动画制作中最常用的一种技术，此技术的实现是通过改变显示对象的透明度alpha属性实现的。•下面的示例实现小球的淡入淡出效果。创建一个小球→加入场景→创建帧循环事件处理函数，实现显示对象透明度先逐渐增加，当透明度为1时逐渐减少，减少到1时再逐渐增加，通过循环实现淡入淡出效果→利用帧循环事件，实现小球的淡入淡出。使用文档类：Alpha，9.5借助Timer类实现动画效果•使用Timer类产生的动画效果和使用帧循环ENTER_FRAME事件产生动画的原理一样，都是通过间隔一定的时间进行一次刷屏来实现动画效果。上一节中使用帧循环事件创建的一切动画，都可以是Timer类的事件来实现。•要注意Timer类的TimerEvent.TIMER事件，可能与Flash的刷屏不同步，会产生延迟现象。所以在使用的时候，需要使用updateAfterEvent()方法强制更新屏幕。•使用Timer类实现动画还有几个好处：•可以利用Timer.stop()方法控制动画的播放与停止；•可以在构建Timer对象时控制动画的刷新次数，实现预期动画效果；•可以利用TimerEvent.TIMER_COMPLETE事件，在停止播放时侦听，从事开始新的动作。9.6Tween类创建动画效果•在ActionScript2.0中内建的Tween类都被转移到了ActionScript3.0的fl.transitions包中，用于实现运动、变形等动画效果。本节主要介绍常用的运动、变形Tween类。9.6.1Tween类应用基础•在ActionScript3.0中，使用Tween类，可以通过指定操作目标的影片剪辑属性在一定的帧数或者时间内创建动画效果，进而实现影片剪辑的运动动画，缩放动画，淡入淡出动画等显示效果。•在Tween类中还可以指定缓动方法，从而实现非线形变化效果。“缓动”是指动画在运行期间的速度非线形变化，使动画显得更加的形象逼真。Tween类中的缓动方法位于fl.transitions.easing包中，该包提供了多种缓动方法供用户使用。•要利用Tween类创建动画效果，需要先创建一个Tween对象，使用该对象来指定要控制的显示对象的属性要发生什么样的变化。创建Tween类对象的方法如下所示。•Tween(目标对象,目标对象的属性,缓动方式,初始值,结束值,动画持续时间,记时方式);9.6.2运动折返效果•返回类实现的动画是在动画执行的开始端、结束端或者两端兼有回返动作，用以模拟溢出动画效果。执行动画的方法取决于三个缓动函数：•easeIn：在动画开始时往后运动，然后反向朝目标移动。•easeOut：在动画结束时稍微冲过结束点，然后倒转方向回来朝着目标。•easeInOut：在动画开始时先向后运动，再倒转方向并朝目标移动，结束时冲过目标，然后再倒转方向，朝目标移动。9.6.3运动回弹效果•回弹类实现的动画是在动画的起始端，结束端或者两端兼有执行回弹动画效果。具体在何端回弹同样取决于三个缓动函数。回弹的次数取决于动画持续的时间，持续的时间越长，回弹的次数越多。此效果可以实现舞台中小球跳动的动画效果。•Bounce类的三个回弹函数效果：•easeIn：在动画开始时以较慢速度开始回弹运动，然后再执行时加快运动速度。•easeOut：在动画结束时以较快速度开始回弹运动，然后再执行时减慢运动速度。•easeInOut：在动画开始时缓慢地开始跳动，进行加速运动，最后进行减速。9.6.4正弦弹性效果•Elastic类实现的动画是在动画的起始端，结束端或者两端兼有执行弹性动画效果，运动方式按照正弦波逐渐衰减进行。具体在何端回弹同样取决于三个缓动函数。回弹的次数不受动画持续的时间影响。此效果也可以实现舞台中小球跳动的动画效果。•Elastic类的三个回弹函数效果，此类和Bounce基本类似，区别在与弹性采用正弦方式：•easeIn：在动画开始时以较慢速度开始回弹运动，然后再执行时加快运动速度。•easeOut：在动画结束时以较快速度开始回弹运动，然后再执行时减慢运动速度。•easeInOut：在动画开始时缓慢地开始跳动，进行加速运动，最后进行减速。9.6.5Regular和Strong运动效果•Regular类实现的动画是加速运动、减速运动和先加速后减速的动画效果。具体在方式同样取决于三个缓动函数。•Regular类的三个回弹函数效果：•easeIn：在动画开始时做初速度为零的加速运动。•easeOut：动画执行匀减速运动，末速度为零。•easeInOut：在动画开始时做初速度为零的加速运动，然后做减速运动，直到速度为零。9.6.6．线性运动效果•None类实现的是一种线形运动的效果，显示对象一直做运动运动。其方法函数有四种easeIn()、easeOut()、easeInOut()和easeNone()，这四种方法实现的是相同的效果，在执行时都是匀速直线运动。使用时可以任意选择。9.7TransitionManger创建动画效果•在ActionScript2.0中内建的TransitionManger类也被转移到了Act