美文网首页NGUI 简单实现
Unity 简单动画(帧动画,Animation,Tween)

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

作者: LeoYangXD | 来源:发表于2016-12-14 23:50 被阅读12447次

    3D序列帧动画

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


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

    2D序列帧动画

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


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

    Paste_Image.png

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

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

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


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

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

    Animation

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


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

    Paste_Image.png

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

    Paste_Image.png Paste_Image.png

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

    Paste_Image.png

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

    Paste_Image.png

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


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

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

    Paste_Image.png

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

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

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

    Tween动画

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

    Paste_Image.png 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 是个回调函数,当这个动画结束后需要执行的函数
    Paste_Image.png

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



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

    Paste_Image.png

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

    相关文章

      网友评论

        本文标题:Unity 简单动画(帧动画,Animation,Tween)

        本文链接:https://www.haomeiwen.com/subject/clkwmttx.html