在 egret 中 利用 tween 实现 二次贝塞尔运动

转自  http://www.h5ga.com/h5intro/20141124_5.html

这篇文章使用了一个 javascript 的小技巧，结合 egret.Tween ,实现了 贝塞尔曲线。

记录如下.

在制作游戏的过程中，经常有些需求要求我们实现一个二次贝塞尔曲线的运动，比如子弹的飞行轨迹之类的

那么如何使用egret来实现这类需求呢？其实非常简单，首先我们来看一下二次贝塞尔曲线的示意图：

 

• 由P0至P1的连续点Q0，描述一条线性贝塞尔曲线。
• 由P1至P2的连续点Q1，描述一条线性贝塞尔曲线。
• 由Q0至Q1的连续点B（t），描述一条二次贝塞尔曲线。
  
  之后我们来看一下二次贝赛尔曲线的公式：
  
   
  
  好了，有了公式那么实现起来就容易多了，我们通过使用egret.Tween来实现：
  
  

  1	egret.Tween.get(this).to({factor: 1}, 2000);

  
  
  
  这表示，在2000毫秒内，this的factor属性将会缓慢趋近1这个值，这里的factor就是曲线中的t属性，它是从0到1的闭区间。
  
  之后我们在this中加入一组getter和setter：
  

  1 2 3 4 5 6 7 8

  public get factor():number {         return 0;     }       public set factor(value:number) {         this.ball.x = (1 - value) * (1 - value) * 100 + 2 * value * (1 - value) * 300 + value * value * 100;         this.ball.y = (1 - value) * (1 - value) * 100 + 2 * value * (1 - value) * 300 + value * value * 500;     }

  
  
  
  这里的getter使factor属性从0开始，结合刚才tween中传入的1，使其符合公式中的t的取值区间。
  而重点是这里的setter，里面的ball对象是我们要应用二次贝塞尔曲线的显示对象，而在setter中给ball对象的xy属性赋值的公式正是之前列出的二次贝塞尔曲线公式。这里的P0点是(100,100)，P1点是(300,300)，P2点是(100,500)。
  
  到这里我们的二次贝塞尔曲线运动就完成了，核心思路就是基于egret.Tween和二次贝塞尔曲线公式。