Unity 简单动画(帧动画,Animation,Tween)

3D序列帧动画

我们创建一个3DSprite,然后在该物体上加载一个 UISprite Animation

Unity 简单动画(帧动画,Animation,Tween)_第1张图片

在UISprite 选的Atalas图集里的所有sprite都会进行播放,这样就做到了我们的序列帧动画

2D序列帧动画

首先我们先创建一个2Dsprite,因为2D序列帧是要和2DSprite对应的

Unity 简单动画(帧动画,Animation,Tween)_第2张图片

然后我们在该物体上加一个UI2D Sprite Animation组件

Unity 简单动画(帧动画,Animation,Tween)_第3张图片
Paste_Image.png

这个表示该序列帧有多少张sprite,有的时候我们不知道那我们就可以直接把自己准备好的Sprite放到上边

若水GIF截图_2016年12月14日22点20分4秒.gif

这里注意我们拖上去的图片必须是Sprite类型


Unity 简单动画(帧动画,Animation,Tween)_第4张图片
若水GIF截图_2016年12月14日22点24分21秒.gif

这个就是我们做出来的效果

Animation

Animation虽然已经不怎么常用,但是我们所掌握一项技能也是可以的,首先我们把一个Sprite拖到场景中(图片类型必须是Sprite类型,Texture是拖不进去的),选中我们的Sprite,然后选择Window下拉框中的Animation

Unity 简单动画(帧动画,Animation,Tween)_第5张图片

弹出这个框以后我们点击Creat

Unity 简单动画(帧动画,Animation,Tween)_第6张图片
Paste_Image.png

然后提示我们保存,我们就保存到某个你想要的文件夹下边就好,接下来大家根据图片一步一步操作

Unity 简单动画(帧动画,Animation,Tween)_第7张图片
Paste_Image.png
Unity 简单动画(帧动画,Animation,Tween)_第8张图片
Paste_Image.png

在这里边我们可以通过位移,旋转,改变颜色等等,都可以,下边我就以透明度这个来跟大家做个演示

Unity 简单动画(帧动画,Animation,Tween)_第9张图片
Paste_Image.png

大家可以看到有一条红线,而此时的color中a的属性是1

Unity 简单动画(帧动画,Animation,Tween)_第10张图片
Paste_Image.png

而此时红线在1秒,color中a的属性为0.我们把红线移到后边那个点的时候,我们单击那个点就好,那个我们看看效果


Unity 简单动画(帧动画,Animation,Tween)_第11张图片
若水GIF截图_2016年12月14日23点21分36秒.gif

我们也可以在开始和结束中间加入我们想要的变化,比如我们把这个动画做成a值0-1-0,就是透明-不透明-透明,那我们只需要把上图中开始和最后的a值都改为0,然后把红线移到中间(用鼠标点击时间条),

Unity 简单动画(帧动画,Animation,Tween)_第12张图片
Paste_Image.png

设置完以后我们在看该图片的动画效果

若水GIF截图_2016年12月14日23点46分9秒.gif

大家可以自己设置自己看看效果

Tween动画

利用这个我们也可以制作一个简单的动画效果,可以通过位移,旋转,透明度等等好多。下边一张图就是tween的所有内容

Unity 简单动画(帧动画,Animation,Tween)_第13张图片
Paste_Image.png
Unity 简单动画(帧动画,Animation,Tween)_第14张图片
Paste_Image.png

上图是一个图像放大缩小的Tween动画

  • From To很简单就是从From值变为To值
  • Play Style有三个选项 pingpong就是来回往复播放From→To→From,还有一个是Loop是循环播放From→To,From→To,他与PingPong是不一样的。还有一个就是Once,只播放一次。
  • Animation Curve 播放曲线,这个是可以调节在播放中的速度快慢的,也可以理解为从From到To的一个变化曲线。
  • Duration 动画播放一次需要的时间
  • Start Delay 延迟多少秒播放
  • OnFinished 是个回调函数,当这个动画结束后需要执行的函数
Unity 简单动画(帧动画,Animation,Tween)_第15张图片
Paste_Image.png

这张图大家可以看到我在该UI身上加了两个动画,一个是缩放,一个是旋转,大家看一下效果图


Unity 简单动画(帧动画,Animation,Tween)_第16张图片

在用Tween的时候我们要注意,有的动画是要求我们点击一次,他就播放一次,但是我们播放第一次还行,但是播放第二次的时候动画就不播放了。这时候我们就需要加两个行代码去控制

Unity 简单动画(帧动画,Animation,Tween)_第17张图片
Paste_Image.png

当我们动画播放结束时,我们就用ResetToBeginning,而准备再次播放动画的时候就用PlayForward(正向播放)手动让他播放,这两个缺一不可。
当一个物体上有多个Tween动画时,而且需要不同触发事件去触发,比如鼠标停留在上边时有一个Tween,点击时又一个Tween,拖动时又一个Tween,这时我们就需要一个UIPlayTween组件去管理,大家可以去搜一下,这里就不多说了。

你可能感兴趣的:(Unity 简单动画(帧动画,Animation,Tween))