青瓷引擎的Tween是什么功能 青瓷引擎Tween动画使用教程
作者：hzc 来源：绿软联盟 发布时间：2016-3-8 16:23:34
文章正文
青瓷引擎的Tween是什么功能？下文「青瓷引擎Tween动画使用教程」绿盟小编为您整理送上。Tween组件提供了在一定时间周期内，以一定方式改变游戏对象属性值的功能，通过可视化的编辑曲线，可实现各种属性变化的动画效果。例如将游戏对象从A位置移动到B位置，可线性匀速的移动，可先加速后减少，甚至可实现超越终点B位置再反弹的效果。
内置Tween组件：
- qc.TweenPosition - 游戏对象的position值从from移动到to
- qc.TweenRotation - 游戏对象的rotation值从from旋转到to
- qc.TweenAlpha - 游戏对象的alpha值从from变化到to
- qc.TweenColor - 游戏对象的colorTint值从from变化到to
- qc.TweenScale - 游戏对象的scaleX和scaleY值从from变化到to
- qc.TweenProperty - 指定游戏对象属性值从from移动到to
Tween插件：
- qc.TweenFunction - 指定延时或间隔调用指定的function
TweenScale范例：
利用TweenScale组件实现一个图片基于中心点自动进行反复缩放的动画效果。
- 创建一个UIImage对象，将其Pivot设置为(0.5, 0.5)
- 点击Add Component按钮添加Tween/TweenScale组件
- 设置From为(0.5, 0.5)，设置To为(2, 2)
- 设置Play Style为PingPong的来回反复模式
- 设置Duration为1秒
- 点击Play/Stop按钮查看运行效果
以上操作可通过如下代码实现：
// 将图片pivot移到中心
image.pivotX = 0.5;
image.pivotY = 0.5;
// 添加TweenScale脚本
var tweenScale = image.addScript('qc.TweenScale');
// 设置起始值
tweenScale.from.x = 0.5;
tweenScale.from.y = 0.5;
// 设置结束值
tweenScale.to.y = 2;
tweenScale.to.x = 2;
// 设置持续时间
tweenScale.duration = 1;
// 设置为反复来回播放模式
tweenScale.style = qc.Tween.STYLE_PINGPONG;
// 设置游戏对象缩放属性为起始值
tweenScale.resetToBeginning();
// 正向播放Tween动画
tweenScale.playForward();
TweenProperty范例：
TweenProperty可用于改变number类型属性，属性名可自定义，此例中我们用TweenProperty来改变Dom类型对象的透明度。
- 创建qc.Dom对象，设置innerHTMl内容
- 点击Add Component按钮添加Tween/TweenProperty组件
- 设置TweenProperty组件property属性为div.style.opacity
- 设置from值为1，to值为0，style为PingPong来回循环方式
- 点击Play/Stop按钮进行动画播放，查看Dom节点组件逐渐变透明和逐渐清晰的反复过程
Tween组范例：
可将多个Tween组合一起播放达到混合动画效果，这里我们演示组合TweenPosition和TweenColor的动画效果。
- 创建一个UIImage对象
- 点击Add Component按钮添加Tween/TweenColor组件
- 设置TweenColor面板的From为黄色，To为红色，Duration为1秒
- 点击Add Component按钮添加Tween/TweenPosition组件
- 设置TweenPosition面板的From为(100, 100)，To为(200, 200)，Duration为1秒
- 点击TweenPosition的Curve曲线弹出曲线编辑器，通过双击曲线或右键菜单增加两个拐点
- 将TweenColor和TweenPosition的Tween Group属性设置为非0的数值，这里我们设置为1
- 点击TweenColor或TweenPosition面板的Play/Stop Group按钮将会同时驱动颜色和位置的动画效果
以上操作可通过如下代码实现：
// 初始化TweenColor
tweenColor = image.addScript('qc.TweenColor')
tweenColor.duration = 1;
tweenColor.tweenGroup = 1;
tweenColor.from = qc.Color.yellow;
tweenColor.to = qc.Color.red;
// 初始化TweenPosition
tweenPosition = image.addScript('qc.TweenPosition')
tweenPosition.duration = 1;
tweenPosition.tweenGroup = 1;
tweenPosition.from.set(100, 100);
tweenPosition.to.set(200, 200);
// 重置同组的所有TWeen到起始属性值
tweenColor.resetGroupToBeginning(); // or tweenPosition.resetGroupToBeginning();
// 正向播放同组的所有Tween
tweenColor.playGroupForward(); // or tweenPosition.playGroupForward();
Tween组播放并不仅对同一游戏对象上tweenGroup相同的Tween，所有子孙游戏对象，具有相同tweenGroup的Tween都会被一起播放。
Tween曲线编辑：
- 上例中我们对TweenPosition组件自定义了动画曲线，使得节点从from(100, 100)到to(200, 200)的位置并非线性均匀移动，而是先以较慢速度后侧，然后加速前进，超出终点位置后再减速反弹最终达到目标位置。
- 曲线编辑的结果可通过通过Save as New Curve的右键菜单选项进行保存，保存结果在工程的ProjectSetting/editor.setting的json配置文件的curveTemplate属性中。
- 在关键帧点的右键菜单上可进行，删除关键帧的操作，也可切换关键帧点为Auto、Free Smooth，Flat和Broken等模式。
- 编辑的曲线效果可通过如下代码实现：
tweenPosition.curve.keys = [new qc.Keyframe(0, 0, 1, 1),
new qc.Keyframe(0.2, -0.18, -0.3, -0.3),
new qc.Keyframe(0.78, 1.2, 0.78, 0.78),
new qc.Keyframe(1, 1, 1, 1)];
Tween常用接口：
- duration - 动画周期秒数
- delay - 动画启动延迟秒数
- style - 播放方式
qc.Tween.STYLE_ONCE - 单次执行
qc.Tween.STYLE_LOOP - 循环执行
qc.Tween.STYLE_PINGPONG - 往返执行 - resetToBeginning(reverse) - 重置属性值，reverse为true设置为结束值，否则设置为起始值
- resetGroupToBeginning(reverse) - 重置组属性值，reverse为true设置为结束值，否则设置为起始值
- playForward() - 正向播放Tween
- playReverse() - 反向播放Tween
- playGroupForward() - 正向播放组Tween
- playGroupReverse() - 反向播放组Tween
- stop() - 停止播放
- stopGroup() - 停止播放组
- onStart - 开始事件派发器
- onFinished - 结束事件派发器
- onLoopFinished - 循环事件派发器
文章来自绿盟(xDowns.com)转载请注明来路。
上一篇文章：青瓷引擎如何利用预制资源改进为场景加载界面？ []