Egret - 使用Tween动画实现二次贝塞尔运动/抛物线运动

原创 2017年07月27日 09:35:21


//需求为实现对象沿line3轨迹运动
private addLine() {
	//为方便调试,先把三条线画出来
	let line1 = new egret.Shape()
	line1.graphics.lineStyle(5,0x87CEFA);
	line1.graphics.moveTo(this.objectPoint.x, this.objectPoint.y - this.objectWH);	//起点
	line1.graphics.lineTo(this.highX, this.highY);
	line1.graphics.lineTo(this.highX*2 - this.objectPoint.x, this.stageH- this.objectWH);
	line1.graphics.endFill();
	this.addChild(line1);

	let line2 = new egret.Shape()
	line2.graphics.lineStyle(1,0x00868B);
	line2.graphics.moveTo(this.objectPoint.x, this.objectPoint.y - this.objectWH);	//起点
	line2.graphics.curveTo(this.highX, this.highY, this.highX*2 - this.objectPoint.x, this.stageH- this.objectWH);	//控制点,终点
	line2.graphics.endFill();
	this.addChild(line2);

	//line2为真实贝塞尔曲线轨迹,但是因为最高点过低而导致运动效果不太好,所以我们修改控制点的Y值,来打到较好的效果
	let line3 = new egret.Shape()
	line3.graphics.lineStyle(1,0x4B0082);
	line3.graphics.moveTo(this.objectPoint.x, this.objectPoint.y - this.objectWH);	//起点
	line3.graphics.curveTo(this.highX, this.highY-300, this.highX*2 - this.objectPoint.x, this.stageH- this.objectWH);	//控制点,终点
	line3.graphics.endFill();
	this.addChild(line3);

	//利用egret的缓动动画Tween来实现动画
	//二次方贝塞尔公式
	//起点P0  控制点P1  终点P2
	//(1 - t)^2 P0 + 2 t (1 - t) P1 + t^2 P2
	//在1秒内,this的factor属性将会缓慢趋近1这个值,这里的factor就是曲线中的t属性,它是从0到1的闭区间。
	egret.Tween.get(this).to({factor: 1}, 1000);
}




//添加factor的set,get方法,注意用public
public get factor():number {
    return 0;
}
 //计算方法参考 二次贝塞尔公式
public set factor(value:number) {
	this.mainObject.x = (1 - value) * (1 - value) * this.objectPoint.x + 2 * value * (1 - value) * this.highX + value * value * (this.highX*2 - this.objectPoint.x);
	this.mainObject.y = (1 - value) * (1 - value) * (this.objectPoint.y - this.objectWH) + 2 * value * (1 - value) * (this.highY-300) + value * value * (this.stageH- this.objectWH);
}






版权声明:本文为博主原创文章,未经博主允许不得转载。

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

转自  http://www.h5ga.com/h5intro/20141124_5.html 这篇文章使用了一个 javascript 的小技巧,结合 egret.Tween ,实现了 贝塞尔...
  • korekara88730
  • korekara88730
  • 2015年05月15日 13:06
  • 4835

iTween大解构(一)之抛物线移动

Unity3d之所以流行,是因为其便利性,其便利性又来源于各种开发者所开发共享的插件,这次我所讲的便是iTween这款插件。(美国人很喜欢i啊,貌似i打头的东西都很牛x)实际上据我了解国内比较流行的插...
  • MoonAgent
  • MoonAgent
  • 2013年08月16日 15:54
  • 23391

Unity3D (塔防游戏)射击 之 抛物线运动(模拟炮弹)

相信很多人都玩过愤怒的小鸟,也玩过王国保卫战,皇家守卫军,等等一系列优秀的TD,而里面的箭塔的射击 都是使用了 抛物线 的运动 先上代码,然后看下解释 using UnityEngine; using...
  • pengdongwei
  • pengdongwei
  • 2015年12月21日 16:57
  • 3962

C 实现通用Tween缓动动画(2)Tween数据结构

首先,tween动画需要能够完成以下几个功能。 设定时间,目标值,插值公式,完成动画运动动画完成后调用回调函数可以在同一动画过程中,进行多个数值的同时插值计算动画可以进入队列顺序执行,也可以并发执...
  • tom_221x
  • tom_221x
  • 2016年07月05日 20:53
  • 481

【egret】Tween类

egret.Tween.get() ,激活一个对象,对其添加 Tween 动画egret.Tween.get(this)to() ,将指定对象的属性修改为指定值egret.Tween.get(this...
  • Elk_1024
  • Elk_1024
  • 2016年09月09日 20:03
  • 1259

【Cocos2d-x】使用贝塞尔曲线(Bezier)实现精灵抛物线运动

【Cocos2d-x】使用贝塞尔曲线(Bezier)实现精灵抛物线运动
  • linchaolong
  • linchaolong
  • 2014年12月20日 09:14
  • 12151

Html5系列(二十三) canvas高级贝塞尔曲线运动动画

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1...
  • dhdhxgx
  • dhdhxgx
  • 2015年04月16日 23:05
  • 5063

匀速贝塞尔曲线运动的实现(转)

转:http://www.thecodeway.com/blog/?p=293 二次贝塞尔曲线通常以如下方式构建,给定二维平面上的固定点P0,P1,P2,用B(t)表示该条曲线 用一个动画来演示,可...
  • kongbu0622
  • kongbu0622
  • 2013年08月20日 21:01
  • 8897

使用Unity画一条平滑曲线(贝塞尔曲线)并使小球沿曲线运动

关于贝塞尔曲线知识(请具体阅读)转载自:http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html这里直接讲解在U3D中的实现方式 ...
  • xiexian1204
  • xiexian1204
  • 2015年11月02日 21:58
  • 11040

使用Unity画一条平滑曲线(贝塞尔曲线)并使小球沿曲线运动

关于贝塞尔曲线知识(请具体阅读)转载自:http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html 这里直接讲解在U3D中的实现方...
  • nynkl
  • nynkl
  • 2017年08月03日 16:27
  • 259
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Egret - 使用Tween动画实现二次贝塞尔运动/抛物线运动
举报原因:
原因补充:

(最多只允许输入30个字)