canvas教程

Unity进阶技巧(3)

字号+ 作者:H5之家 来源:H5之家 2017-02-21 17:03 我要评论( )

为了实现MyText出现后放大的效果,我们添加Scale属性的变化,由于我们的UI其实是一个平面,对其大小能够产生视觉变化的只有X和Y轴的变化,然后我们在本例中,希望放大效果一共播放0.5秒,其中在0.25秒是MyText放大

为了实现MyText出现后放大的效果,我们添加Scale属性的变化,由于我们的UI其实是一个平面,对其大小能够产生视觉变化的只有X和Y轴的变化,然后我们在本例中,希望放大效果一共播放0.5秒,其中在0.25秒是MyText放大到1.5倍,所以我们在0.25秒的时候添加一个关键帧,然后将结束的关键帧拖拽至0.5秒处,如下图:


添加关键帧

接着我们选中0.25秒的关键帧,将该帧的Scale.x和Scale.y都设置为1.5


设置缩放变化

接着我们就可以点击Animation编辑器里面的播放按钮,来测试一下动画效果了


动画效果

放大的动画就做好了,接下里我们继续制作上升的动画效果

3、为Text添加上升动画

首先我们点击Appear按钮,然后选择Create New Clip...,为MyText添加一个新的动画文件:


新建一个动画文件

同样的在弹出的新建对话框中,我们将动画文件的名字命名为UpRight,存放在_Animator文件夹下面:


新建对话框

接着我们在UpRight动画中添加Anchored Position变化:


添加Anchored Position变化

上升动画在本例中,我们希望他能持续1秒,并且上升100个像素,所以我们选中结束的关键帧,在将其Position.y的值设置为100:


Paste_Image.png

然后我们就可以测试一下动画效果是否如我们所预期的:


测试动画效果

好啦,到这一步,我们已经为MyText添加了两个动画,分别是放大效果和上升效果,接下来我们就需要将两个动画衔接起来

4、编排两个动画播放顺序

要编排动画,就需要用到Animator Controller文件,我们双击打开MyText,会自动打开Animator编辑器:


打开MyText文件


Animator编辑器

我们可以通过编辑器内容看到,现在的动画编排状态是MyText一开始就会进入Appear动作,所以要达到我们的预期效果,我们就只需要再添加一条衔接线,让MyText播完Appear后就进入UpRight状态,我们鼠标右键点击Appear状态,然后选择Make Transition,然后连接UpRight状态


链接UpRight状态

接下里我们就可以运行游戏看看动画效果的衔接是否正确了:


测试衔接效果

通过测试我们可以看到,现在MyText出现后会播放放大效果,然后再播放上升效果,但是有一个问题,他会一直循环播放上升效果,所以我们需要将动画的循环播放给关掉

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Omnigraffle技巧整理(翻译和收录)

    Omnigraffle技巧整理(翻译和收录)

    2017-02-21 17:00

  • 移动手机站的前端页面SEO优化技巧

    移动手机站的前端页面SEO优化技巧

    2017-02-21 14:00

  • Android 虚化的高级技巧

    Android 虚化的高级技巧

    2017-02-21 13:00

  • WPF技巧5元素的加载与卸载LoadedandUnloaded

    WPF技巧5元素的加载与卸载LoadedandUnloaded

    2017-02-18 17:00

网友点评
)