Principle教程(四):动效视图的运用(附源文件)

深圳/产品设计师/8年前/7642浏览
Principle教程(四):动效视图的运用(附源文件)
学习之前建议大家观察观察源文件里两个Artboard内的元素命名和增加的一个新蒙板元素,领悟一下相同的命名之间和增加的蒙板的作用。源文件内的图形形状都是在Principle里,通过创建形状工具(快捷键R)创建,然后通过改变检查器里的各种参数来得到想要的形状,很简单。
上篇教程说过,联动视图是调节当前选中画板内元素之间的联动关系,它可以用来创建复杂的、持续联动的交互。而这里的动效视图通常用来调节画板
之间的动画切换时间和动画曲线,用来自定义画板之间的动画效果。
附上两个源文件,一个是带参数的,一个是不带。带参数的可以看看里面是怎么设置的,没带参数的,可以在这个上面练习。
最终效果
最终效果
Collect
功能翻译
功能翻译
Collect
制作动画的转场效果。选择Artboard 1,点击事件触发器(闪电图标)选择Auto,拖到Artboard 2上。
制作动画的转场效果。选择Artboard 1,点击事件触发器(闪电图标)选择Auto,拖到Artboard 2上。
Collect
激活动效视图。打开工具栏的Animate,下方出现动效视图窗口,此时的窗口是空的,这时点击两个画板上方的箭头图标,激活视图。
激活动效视图。打开工具栏的Animate,下方出现动效视图窗口,此时的窗口是空的,这时点击两个画板上方的箭头图标,激活视图。
Collect
调整Artboard 2里命名为icon的图标组,调整为想要的最后样子。在Artboard 2里,首先选择icon组里的Layer 2,把透明度调整为0,然后选择Layer 1,把角度调整为45度,再选择Layer 3,角度调整为135度。最后调整下Layer 1和Layer 3的位置。
调整Artboard 2里命名为icon的图标组,调整为想要的最后样子。在Artboard 2里,首先选择icon组里的Layer 2,把透明度调整为0,然后选择Layer 1,把角度调整为45度,再选择Layer 3,角度调整为135度。最后调整下Layer 1和Layer 3的位置。
Collect
在动效视图里调整icon组内元素的过渡时间曲线和曲线模式,让icon组的形状在两个画板之间过渡快一些。
在动效视图里调整icon组内元素的过渡时间曲线和曲线模式,让icon组的形状在两个画板之间过渡快一些。
Collect
制作Group组的下滑跳动效果。在动效视图里选择Group组,然后点击蓝色条内的Default,出现选项,选择Spring模式。这个时候大家可以通过预览窗口看看大致的效果。
制作Group组的下滑跳动效果。在动效视图里选择Group组,然后点击蓝色条内的Default,出现选项,选择Spring模式。这个时候大家可以通过预览窗口看看大致的效果。
Collect
制作文字的依次出现效果。依次选择和调整动效视图里的Text4、3、2、Text,把整个蓝色条拖动到上图中对应的时间点上。这个时候已经完成整个效果的制作,可以通过游览窗口查看整个动画。
制作文字的依次出现效果。依次选择和调整动效视图里的Text4、3、2、Text,把整个蓝色条拖动到上图中对应的时间点上。这个时候已经完成整个效果的制作,可以通过游览窗口查看整个动画。
Collect
75
Report
|
71
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
Log in