Tweens

Tweens(补间动画)

补间动画有很多种:

这里以Tween Height为例:

项目层次:

btn为一个按钮,group为一组图片精灵,预览图如下:

第一步:先为每个item附加一个Tween Height脚本,设置如下:

form表示起始的高度,to表示最终高度,play style表示播放类型:once只播放一次,loop循环播放,ping pong也是循环播放,不过两个肯定是有区别的,区别就在于:

假如对象的Tween Height脚本的from到to设置的值为(20~60),那么loop循环播放就是当对象的高度从20变到60,这个过程是缓慢变化的,而当进入第二次循环的时候,对象会立马变为20的高度,而看不到60变为20的过程,而ping pong则能看到,效果图,分别如下:

    

Animation Curve 动画曲线:用来与微调这两个值的变化过程,后面会举例说下他的作用

Duration:播放动画的时间

Start Delay:延迟时间

tween group:可以控制在同一个对象上的多个tween触发。播放时指定group ID,,后面也会举例说下他的作用

ingnore timescale:忽略timescale

On finished:播放完成后执行哪些事件

这里的三个item的finished的Notify分别设置成下一个的item即可,

当然每个item的Tween Height是不需要勾选的,是通过On Finished来触发下一个item的,而第一个则是通过btn的onclick函数来调用的!

ResetToBeginning:表示手动复位Tweener至开始状态,如果补间动画是forward的,这意味着补间动画的开始,如果补间动画正在reverse,这意味着补间动画的结束。PlayForward:表示播放补间动画(Play已被playforward取代,看UITweener这个补间动画的父类就知道了,但playforward内部还是通过play来实现的)

还有其他方法,您可以查看UITweener类来了解一下

ResetToBeginning和PlayForward的方法是根据Notify对象附加的脚本来查找的,是此脚本中的方法或者是继承的,并且是公共的!

第二步:设置btn的onclick如下(但是先必须绑定第一个执行的方法是ResetToBeginning,不然无法实现还原状态):

最终效果:

Animation Curve 动画曲线

可以看出动画曲线默认的x与y轴方向是从0.0到1.0的,这个固定点位置分别是0.0和1.0,不可以再增加固定点,但是可以增加key,双击动画曲线或者在动画曲线上右击可以增加key,key的作用就是设置这一秒对象的高度和变化效果,也可以设置此key左边和右边曲线的状态,下面展示通过增加key改变曲线来达到不同的效果

左边是增加key来改变曲线的状态,右边是默认曲线的状态

  

与上面的曲线图对应的效果图:

看下图,可以看出可以设置此时key的效果,有free smooth(自由光滑),flat(水平的),broken(断续的),同时也可以设置左边,右边或者两边的切线效果,有free(自由),linner(线性的),constant(恒定的)

可以直接用tween的Begin()函数来创建tween:

TweenPosition.Begin(tweenGameObject, duration, targetPosition);

如果你想使用高度补间动画,那你就要用TweenHeight.Begin (UIWidget widget, float duration, int height)

tween group 补间动画组别设置

假如现在给item1和item2的Tween Height的Tween Group设置为1,而item3还是默认为0

并且所有item的OnFinished不附加任何对象,为None

为btn附加UIPlay Tween脚本

此时Tween Group设置为2,其他的选项没什么好说的,直接看效果图,可以看出只有item1和item2动了,而item3没,达到了我们想要的效果

时间: 2024-11-03 20:45:52

Tweens的相关文章

JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图

页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语法:<marquee>...</marquee>: 说明:在标记之间添加要进行滚动的内容. 重要属性: 1.滚动方向direction(包括4个值:up. down. left和 right) 语法:<marquee direct

一个类似于jq的小型库

本人写了一个类似于jq的小型库,不过只是写了部分方法而已.并没有jq那么全面,下面就介绍下有哪些方法可以使用 第一个是选择器, 选择器比较简单 只支持ID选择器 $(‘#id_name’) Class选择器$(‘.class_name’) 标签选择器$(‘tag _name’) 并没有像jq那样拥有高级的选择器. 方法有 Js延迟加载 Ready     $(document).ready(function(){ // 在这里写你的代码... }); $(functoin(){ }) 事件有 C

jQuery——实现弹窗

window.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

ajax——用ajax写登陆页面

ajax.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

jQuery源码

/*! * jQuery JavaScript Library v1.8.3 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlejs.com/ * * Copyright 2012 jQuery Foundation and other contributors * Released under the MIT license * http://jquery.org/license * * Date: Tue Nov 13 20

深入学习Phaser补间动画

Tweens是什么? Tweens通常被称为补间动画.补间动画是指在确定好两个关键帧之后,由计算机自动生成这两帧之间插补帧,从而实现动画的过程.例如,物体从当前位置在两秒内向右移动200个像素,只要设置好目标位置(当前位置的右边200像素)和时长(两秒),则计算机会自动生成补间动画,在两秒内使物体从当前位置移到目标位置. 创建一个Tween 补间的目标对象 最常见的创建一个补间动画的语句如下所示: var tween =this.game.add.tween(this.sprite).to({ 

jquery 2.1.0 源码

/*! * jQuery JavaScript Library v2.1.0 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlejs.com/ * * Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors * Released under the MIT license * http://jquery.org/license * * Date: 2

starling 笔记

starling 笔记 : 基于Stage3Dg开发出来的一个可以使用GPU加速2D应用程序的框架.是一个渲染框架! 特色:直观,轻量,免费. Starling与Sparrow框架很相近. 驱动关系:GPU-->OpenGL/ES2-DirectX-->stage3D-->starling 传统使用的Stage使用cup渲染,Starling使用GPU,减少CUP操作可以提升性能和体验. flash 显示层次结构 :stage video-->stage3D-->Displa

使用r.js来打包模块化的javascript文件

前面的话 r.js(下载)是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器的文件请求.本文将详细介绍r.js 简单打包 [项目结构] 以一个简单的例子来说明r.js的使用.该项目名称为'demo',在js目录下包含s1.js和s2.js两个文件,使用requirejs进行模块化,内容如下 //s1.js define(function (){ return 1; }) /