egret.Tween跳跃缓动效果实现

今日在工作中遇到一个需求:
1. 要求目标组件能从一定高度落地并实现弹跳效果
2. 落地后目标组件变矮变胖
3. 弹起时目标组件变瘦变高

Tween使用

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

这里写图片描述

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 );

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

  1. call 在某个缓动过程结束时,可以用 call 产生一个回调,直接将回调函数作为参数传给call就可以了。
  2. 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);                 
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/centor/article/details/79980432
个人分类: egret
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭