首页 >> 大全

egret.Tween跳跃缓动效果实现

2023-12-23 大全 27 作者:考证青年

今日在工作中遇到一个需求:

要求目标组件能从一定高度落地并实现弹跳效果落地后目标组件变矮变胖弹起时目标组件变瘦变高 Tween使用

在实现此需求之前,先学习一下白鹭引擎的Tween。官方文档如是说:

_egrettween旋转_缓动函数制作粒子效果

class TweenTest extends egret.DisplayObjectContainer{public constructor(){super();this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);}private onAddToStage(event:egret.Event){var shp:egret.Shape = new egret.Shape();shp.graphics.beginFill( 0x00ff00 );shp.graphics.drawRect( 0, 0, 100, 100 );shp.graphics.endFill();shp.x = 50;this.addChild( shp );var tw = egret.Tween.get( shp );tw.to( {x:150}, 1000 );}
}

如代码所示,每一个缓动对象是用 Tween.get 来的获得的,该方法需要传入用于缓动的目标对象,即例中的 shp ,然后通过 to 方法来给出需要设置缓动的具体参数。to 的第一个参数用于设置缓动属性以及目标值:例中的属性为 x ,目标值为 150,即会将 shp 从当前 x 坐标位置缓动到 x 坐标为 150;to 的第二个参数为缓动长度,单位为毫秒,例中的缓动长度为 1000毫秒,即 1 秒 。

var tw = egret.Tween.get( shp, { loop:true} );      //循环

//在 Tween 执行过程中,也许我们逻辑需要实时做一些变化。
//跟踪这个过程同样可以通过在 Tween.get 的第二个参数中,加入变化事件处理函数的定义来实现。
var obj = { x:0 };var funcChange = function():void{console.log( this.x );
}egret.Tween.get( obj, { onChange:funcChange, onChangeObj:obj } ).to( {x:600}, 1000 , egret.Ease.backInOut );

缓动函数制作粒子效果_egrettween旋转_

对于缓动的控制,可以设定若干其他方法。主要有以下两个:

call 在某个缓动过程结束时,可以用 call 产生一个回调,直接将回调函数作为参数传给call就可以了。wait 用于多个缓动连续设定中设置中间的等待时间,也是以毫秒为单位。

####最终实现如下

如果想使用缓动动画,你需要使用 Tween 这个类。 Tween 中封装了最常用的缓动动画功能,包括动画时间设定,缓动动画控制, 缓动效果控制等等。

var tw = egret.Tween.get( shp );         //捕获shp,shp为目标组件
tw.to( {scaleX:0.8, scaleY:1.1, y:50}, 1 )      //y方向缓动至50,横向变大0.8倍,纵向变大1.1倍,只用一毫秒 .to( {scaleX:1.1, scaleY:0.8, y:0}, 400).to( {scaleX:0.8, scaleY:1.1, y:50}, 400).to( {scaleX:1, scaleY:1, y:0}, 400);                 

关于我们

最火推荐

小编推荐

联系我们


版权声明:本站内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 88@qq.com 举报,一经查实,本站将立刻删除。备案号:桂ICP备2021009421号
Powered By Z-BlogPHP.
复制成功
微信号:
我知道了