缓动动画·概述

from()与to()方法

缓动动画·示例

props 属性

Ease 缓动函数

backIn

backInOut

backOut

bounceIn

动画结束回调函数

缓动动画·概述

1、游戏开发中缓动动画比较常见，它是提升游戏 UI 体验的重要因素之一，例如对话框弹出、关闭，按钮的动效出现与消失，道具飞入背包等

2、可以直接使用 LayaAir引擎提供的 Tween 缓动类与 Ease 类来快捷实现。

3、Tween 缓动类用以实现目标对象属性的缓动，例如目标对象的 x 或 y 轴的缓动距离等目标值设置，以及缓动开始、停止、清理等设置

4、Ease 类定义了大量的缓动函数，以便实现 Tween 动画的具体缓动效果

5、LayaAir 引擎的 Tween 类与 Ease 类结合使用，能基本满足游戏开发的缓动效果需求

from()与to()方法

1、缓动类 Tween 提供了较多的方法，常用的是 from() 与 to() 方法，这两个方法的参数设置完全一样，但效果有所不同，from是从缓动目标点向初始位置产生运动（从缓动目标位置来），to 是从初始位置向缓动目标的位置产生运动（到缓动目标位置去）

/** 从props属性，缓动到当前状态——从缓动目标位置来
* @param   target 目标对象(即将更改属性值的对象)。
* @param   props 变化的属性列表，比如 {x:100,y:20,ease:Ease.backOut,complete:Handler.create(this,onComplete),update:new Handler(this,onComplete)}。
* @param   duration 花费的时间，单位毫秒，时间越长，缓动效果越慢
* @param   ease 缓动类型，默认为匀速运动。
* @param   complete 结束回调函数。
* @param   delay 延迟执行时间。
* @param   coverBefore 是否覆盖之前的缓动,default = false
* @param   autoRecover 是否自动回收，默认为true，缓动结束之后自动回收到对象池。
* @return   返回Tween对象。
*/
static from(target: any, props: any, duration: number, ease?: Function, complete?: Handler, delay?: number, coverBefore?: boolean, autoRecover?: boolean): Tween;

上面这是静态的 from 方法， Tween 还重载了一个非静态的 from 方法，非静态的 from 少了最后的 autoRecover 参数。

/** 从当前状态缓动到props属性——到缓动目标位置去
* @param target 目标对象(即将更改属性值的对象)。
* @param props 变化的属性列表，比如
* @param duration 花费的时间，单位毫秒，时间越长，缓动效果越慢
* @param ease 缓动类型，默认为匀速运动。
* @param complete 结束回调函数。
* @param delay 延迟执行时间。
* @param coverBefore 可选，是否覆盖之前的缓动,default = false
* @param autoRecover 可选，是否自动回收，默认为 true，缓动结束之后自动回收到对象池。
* @return 返回Tween对象。
*/
static to(target: any, props: any, duration: number, ease?: Function, complete?: Handler, delay?: number, coverBefore?: boolean, autoRecover?: boolean): Tween;

上面这是静态的 to方法， Tween 还重载了一个非静态的 to方法，非静态的 to 少了最后的 autoRecover 参数。

1、props 属性

props 是目标对象需要改变，从而产生缓动效果的属性。对象的公共属性都可以进行设置，比如最常用的x、y位置属性，及alpha透明属性，以及旋转、轴心、大小等其他属性

2、ease

ease 为缓动类型，它可以使用Ease类下定义的各种函数来改变动画的变化过程，LayaAir引擎提供了非常多的缓动方法供开发者们选择使用

3、complete

complete 为缓动完成后回调方法。比如按钮出现的缓动，在缓动过程中不能让用户点击，这时就可以用到缓动完成回调，在回调函数中再加入按钮监听。

缓动动画·示例

    //初始化舞台Laya.init(768,1024,Laya.WebGL);//背景颜色Laya.stage.bgColor = "#1b2436";createTween();//创建缓动文本function createTween(){//待显示的字符串，显示的时候其实是依次显示字符串中的每个字符var showString = "LayaBox中国";//offsetX：每一个字符文本显示的x位置，space：相邻字符显示的间距//即第一个字符串的x为100，第二个字符串x为 100+30，第三个x是 100+30+30，依此类推var offsetX = 100;var space = 40;//字符串中的每个字符文本对象var wordText;//遍历字符串，对每个字符创建 Text 对象进行缓动动画显示for(var i = 0,len = showString.length; i<len; i++){//从"LayaBox"字符串中逐个提出单个字符创建文本wordText = createWordText(showString.charAt(i));//设置显示的 Text 的 x 坐标wordText.x = offsetX + i * space;//文本的y坐标wordText.y = 30;//对象wordText属性y从缓动目标的100向初始的y属性30运动//每次执行缓动效果需要3000毫秒，缓类型采用elasticOut函数方式，延迟间隔 i*1000 毫秒执行//为了更好的看清动画效果与参数的关系，特意将时间设置大一些//from：用户看到的效果是 "字符串刚开始显示在 y为 30的位置，然后逐个往下掉到y=100位置，接着又返回到y=30的位置,动画结束"//to：用户看到的效果是 "字符串刚开始显示在 y为 30的位置，然后逐个往下掉到y=100位置,然后动画结束，不会再返回原位置"Laya.Tween.from(wordText,{y:100},3000,Laya.Ease.elasticInOut,null,i*1000);}}//创建单个字符文本，并加载到舞台function createWordText(char){var tx = new Laya.Text();tx.text = char;tx.color = "#ffffff";tx.font = "Impact";tx.fontSize = 50;Laya.stage.addChild(tx);return tx;}

将上面代码中的 from 改为 to 之后，效果如下:

props 属性

1、无论 Tween.from 还是 Tween.to，第二个参数 Props（属性）可以影响缓动效果的运动轨迹

2、props 是目标对象需要改变从而产生缓动效果的属性，对象的公共属性都可以进行设置，比如最常用的x、y位置属性，及alpha透明属性，以及旋转、轴心、大小等其他属性

3、继续延续之前的示例，将代码修改如下，同时设置多个属性，这些公共属性都可以从 Sprite 中看到。

//设置缓动对象从y=100位置向当前位置移动、水平倾斜角度为 20度、透明度为 0.5
//动画时间 3秒、缓动类型为 elasticInOut、运动结束不进行回调、延迟间隔时间为 i*100
Laya.Tween.from(wordText,{y:100,skewX:20,alpha:0.5},3000,Laya.Ease.elasticInOut,null,i*100);

Ease 缓动函数

1、Ease 类定义了大量的缓动函数，以便实现 Tween 动画的具体缓动效果，即 Tween 缓动动画的具体动画类型由 Ease 进行指定。

2、laya.utils.Ease API 官方地址：https://layaair.ldc.layabox.com/api/?category=Core&class=laya.utils.Ease

backIn

public static function backIn 开始时往后运动，然后反向朝目标移动。

    //初始化舞台Laya.init(768,1024,Laya.WebGL);//背景颜色Laya.stage.bgColor = "#1b2436";createTween();//创建缓动文本function createTween(){//待显示的字符串，显示的时候其实是依次显示字符串中的每个字符var showString = "LayaBox中国";//offsetX：每一个字符文本显示的x位置，space：相邻字符显示的间距//即第一个字符串的x为100，第二个字符串x为 100+40，第三个x是 100+40+40，依此类推var offsetX = 100;var space = 40;//字符串中的每个字符文本对象var wordText;//遍历字符串，对每个字符创建 Text 对象进行缓动动画显示for(var i = 0,len = showString.length; i<len; i++){//从"LayaBox"字符串中逐个提出单个字符创建文本wordText = createWordText(showString.charAt(i));//设置显示的 Text 的 x 坐标wordText.x = offsetX + i * space;//文本的y坐标wordText.y = 20;Laya.Tween.from(wordText,{y:60,skewX:20,alpha:0.5},3000,Laya.Ease.backIn,null,i*800);}}//创建单个字符文本，并加载到舞台function createWordText(char){var tx = new Laya.Text();tx.text = char;tx.color = "#ffffff";tx.font = "Impact";tx.fontSize = 40;Laya.stage.addChild(tx);return tx;}

backInOut

public static function backInOut ：开始运动时是向后跟踪，再倒转方向并朝目标移动，稍微过冲目标，然后再次倒转方向，回来朝目标移动。

//其余代码不变，修改如下
Laya.Tween.from(wordText,{y:60,skewX:20,alpha:0.5},3000,Laya.Ease.backInOut,null,i*800);

backOut

public static function backOut：开始运动时是朝目标移动，稍微过冲，再倒转方向回来朝着目标。

//其余代码不变，修改如下
Laya.Tween.from(wordText,{y:60,skewX:20,alpha:0.5},3000,Laya.Ease.backOut,null,i*800);

bounceIn

public static function bounceIn：方法以零速率开始运动，然后在执行时加快运动速度。它的运动是类似一个球落向地板又弹起后，几次逐渐减小的回弹运动。

更多 API 函数请参考官网：https://layaair.ldc.layabox.com/api/?category=Core&class=laya.utils.Ease

更多演示官网：https://layaair.ldc.layabox.com/demo2/?language=ch&category=2d&group=Tween&name=EaseFunctionsDemo

动画结束回调函数

第五个参数 complete 用于执行完缓动效果后的回调，使用 Laya.Handler.create 即可，下面以一个例子进行演示。

    //初始化舞台Laya.init(768,1024,Laya.WebGL);//背景颜色Laya.stage.bgColor = "#1b2436";createTween();//创建缓动文本function createTween(){//待显示的字符串，显示的时候其实是依次显示字符串中的每个字符var showString = "LayaBox中国";//offsetX：每一个字符文本显示的x位置，space：相邻字符显示的间距//即第一个字符串的x为100，第二个字符串x为 100+40，第三个x是 100+40+40，依此类推var offsetX = 100;var space = 40;//字符串中的每个字符文本对象var wordText;//遍历字符串，对每个字符创建 Text 对象进行缓动动画显示for(var i = 0,len = showString.length; i<len; i++){//从"LayaBox"字符串中逐个提出单个字符创建文本wordText = createWordText(showString.charAt(i));//设置显示的 Text 的 x 坐标wordText.x = offsetX + i * space;//文本的y坐标wordText.y = 20;//添加动画结束回调函数//create(caller: any, method: Function, args?: Array<any>, once?: boolean)//caller 执行域(this)、method 回调方法、args 携带的参数(回调函数传入的参数，必须是数组形式传入,按顺序对应着回调函数中的参数)Laya.Tween.from(wordText,{y:60,skewX:20,alpha:0.5},1000,Laya.Ease.strongOut,Laya.Handler.create(this,tweenOver,[wordText,i]),i*300);}}//创建单个字符文本，并加载到舞台function createWordText(char){var tx = new Laya.Text();tx.text = char;tx.color = "#ffffff";tx.font = "Impact";tx.fontSize = 40;Laya.stage.addChild(tx);return tx;}//缓动动画结束时回调函数，参数对应着 Laya.Handler.create 中第三个参数数组中的元素，特意传入 index 以作区别说明function tweenOver(txt,index){console.log("动画结束："+new Date(),index);txt.color = "#ff0";txt.fontSize = 50;}

LayaAir 缓动动画相关推荐

背水一战 Windows 10 (15) - 动画: 缓动动画
背水一战 Windows 10 (15) - 动画: 缓动动画原文:背水一战 Windows 10 (15) - 动画: 缓动动画 [源码下载] 背水一战 Windows 10 (15) - 动画: ...
js简单动画：匀速动画、缓动动画、多物体动画以及透明度动画
主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画效果实现: 1.匀速动画(以物体左右匀速运动为例) ...
缓动动画_核心动画概念：缓入缓出
缓动动画 With the arrival of CSS transitions, animation is now completely at home on web pages. In anima ...
用缓动动画实现鼠标跟随
鼠标跟随是为了更好的用户体验而存在,鼠标移动到某个元素的位置,一张代表鼠标的图也移到当前元素的位置,用户能更好的看到自己的鼠标位置,也能用这个做普通特效.当鼠标移动到某个位置,那张图也移动到某个位置, ...
JavaScript 音乐导航(缓动动画、会唱歌的导航)
效果展示鼠标在导航栏上移动,每一项发出一种音符(do re mi fa so la xi),同样键盘上的1-7数字也可以有同样的效果. 资源下载音乐导航(缓动动画.会唱歌的导航) 代码 index ...
11、《每周一点canvas动画》——缓动动画
本系列文章代码文件前面的章节我们介绍了许多基本的动画,在本节我们将使用这些基本的动画来创建一些高级动画.今天我们介绍的第一个高级动画叫做缓动动画(ease),也许在写css动画的时候已经接触过 ea ...
SVG—初识3之SVG动画（缓动动画、时间轴线、时间交错）
SVG-初识3 SVG动画使用GSAP制作动画缓动动画时间轴线时间交错 SVG动画 Transform(scale.rotate.translate .skew) 路径动画 (path) 描边 ...
canvas系列教程07 ——捕获、拖拽、抛掷、缓动动画、弹性动画
捕获物体多边形以及不规则图形的捕获非常复杂,采用的方法是分离轴定理(SAT)和最小平移向量(MTV).这里不展开介绍,有兴趣的小伙伴可以自行搜索了解一下.下面来介绍一下矩形和圆的捕获. 矩形的捕获 ...
Egret_Tween缓动动画
通常情况下,游戏中或多或少都会带有一些缓动动画.例如界面弹出,或者道具飞入飞出的特效等等.在制作这些缓动动画的时候我们仅仅希望简单的办法实现这种移动或者变形缩放的效果.Egret中的 Tween 缓 ...
【JavaScript】缓动动画、网页轮播图
缓动动画动画函数封装 1.1 动画实现原理缓动动画 1.1 缓动效果原理 1.2 动画函数多个目标值之间移动 1.3 动画函数添加回调函数 1.4 动画函数封装到单独JS文件里面案例:京东侧边栏 ...

LayaAir 缓动动画

缓动动画·概述

from()与to()方法

缓动动画·示例

props 属性

Ease 缓动函数

backIn

backInOut

backOut

bounceIn

动画结束回调函数

LayaAir 缓动动画相关推荐

最新文章

热门文章