Flash补间引擎应用：图片特效（1）

    

  adobe自带的补间类能够产生很多不错的缓冲应用效果，不过由于自带的类存在一些缺陷，因此应用起来不尽人意。通过借助一些开源的补间引擎能够产生很多不错的效果。其中TweenLite 补间引擎是应该比较广泛一个引擎，当然还有其他如GTween等。有兴趣的话可以下载该引擎进行使用，你一定会喜欢上。好，借用这个补间引擎， 马上了解一下这些应用。下面制作一个简单的例子。

 

下载地址：在这里

 

 

  制作设计思路：使用数组保存路径的位置，然后用补间引擎，将每一张图片移动到指定的位置当中。动画过程中需要让图片产生一定时间错位感。这样看起来就更加好。

 

通过借用下面这个函数，我们的图片就能产生位置移动了。

TweenLite.to(目标对象MC,1,{x:目标X点 y:目标y点, ease:Cubic.easeInOut});

这张图片有8个点，分布是从黑色中心开始移动到指定的红色点位置，顺序是从1--8 这样序列进行。

 

 

静态复制小球的启示：

  我们知道通过复制小球然后，可以让每一个小球的坐标都以圆的轨迹进行分布是一件很容易的事情，只要知道了公式就能写出来。我们这次的目的不是要小球，而是要他的分布的坐标。为什么？请想一下。

 

   for(var i:int=0;i<10;i++) { var ball:Ball=new Ball();//库连接 addChild(ball); list.push(ball); ball.x=startX+Math.cos(angle*i)*R;//R 为班级 ，angle 为角度 =2*Math.PI/10=36度 ball.y=startY+Math.sin(angle*i)*R; }

通过这个方式来对小球坐标分布能够产生一个圆的效果。

有了这个思路之后，我们现在做的事情就是对分布的坐标存储起来。然后使用补间引擎让每一个小球移动到指定的目标当中。这种效果就基本完成了。

 

 看看这张图片，我们将复制心形全部初始化一个位置，这样看起来复制出来的心形重叠在一起了。

 

 

通过移动位置，产生一系列的补间动画效果。最终效果就是设计为下面这样。

 

 

 代码清单：

 package { import flash.display.MovieClip; import flash.events.*; import gs.TweenLite; import gs.easing.*; public class Main extends MovieClip { private var posX:Array=new Array();//记录横坐标 private var posY:Array=new Array();//记录纵坐标 private var list:Array=new Array();//对象列表 private var angle:Number=2*Math.PI/50; private var startPosX:Number=250; private var startPosY:Number=200; private var R:int=190; private var count:int=0; private var num:int=0; public function Main() { init(); } //复制一系列的小球 public function init():void { for (var i:int=0; i<53; i++) { var ball:Ball=new Ball();//库连接 addChild(ball); list.push(ball); posX[i]=startPosX+Math.cos(angle*i)*R;//使用数组来记录的X坐标 posY[i]=startPosY+Math.sin(angle*i)*R;//使用数组来记录的Y坐标 ball.x=ball.y=250; if (i>49) { if (i==50) { posX[i]=startPosX-100; posY[i]=startPosY; } else if (i==51) { posX[i]=startPosX+100; posY[i]=startPosY; } else { posX[i]=startPosX; posY[i]=startPosY+50; } } } stage.addEventListener(Event.ENTER_FRAME,Run); } private function Run(event:Event):void { ShowEffect(list); } //通过缓冲的应用，产生时间差 private function ShowEffect(array:Array):void { count++; if (count>2) { TweenLite.to(array[num],1,{x:posX[num],y:posY[num], ease:Cubic.easeInOut}); num++; count=0; if (num>array.length) { stage.removeEventListener(Event.ENTER_FRAME,Run); count=0; num=0; } } } } }