这篇教程的目的主要是带领大家做UI交互的入门引导,让大家理解做交互动效的一些基本逻辑思维,利用原型交互动画做导航栏icon动画效果。
导航栏icon动效的详细教程:
即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具,支持 Sketch、Figma、XD 格式导入,海量优质设计资源即拿即用。支持创建交互原型、获取设计标注,为产设研团队提供一站式协同办公体验。https://js.design/f/UGlsPN?p=QCQXXqJX-0&y=hd&j=9&mode=design&source=csdn&plan=smt0621技巧要点
智能动画会自动帮你补全所有中间帧,我们只要做好一段动画的初如始结束态就可以。
智能动画的原理是从一个画板变化到另一个画板,一个为初始态,一个为结束态。
智能动画可以对形状的大小、颜色和位置进行智能过渡动画补充。
两个形状之间进行智能动画过渡,需要保证两个形状图层名字一致
定时事件一个画板只能链接到另一个画板,不能链接到多个个画板。
绘制背景
新建画板尺寸为:800PX^600PX,设置背景色#FFC300,并在画板中绘制背景四角所需要的元素装饰,让整个画面版式看起来更工整精美。
绘制导航栏背景
使用矩形工具在画板中心绘制一个尺寸为:600^140px的钜形,并填充颜色为白色#FFFFFFF,四边圆角分别设为20、20、40、40。并给此图层命名为:导航背景(命名是为了后面做动画时方便查找图层,不易混乱。)
绘制图标
在导航栏背景上绘制我们需要的动画图标,并分好组各自命好名字。(命名是为了后面做动画时方便查找图层,不易混乱。)这里我附上图标文件,大家可以直接下载复用,你也可以绘制自己喜欢的图标来做动画。
绘制圆形背景
大家看动画预览,背景会有一个从黄色变成蓝色的动画。所以我们需要在画板中心绘制一个60px^60px的圆形,
颜色填充#2E54FF。放在图层的最底下,来做后面动画的准备。
调整初始画板参数
智能动画的原理是从一个画板变化到另一个画板,一个为初始态,一个为结束态。复制画板1做结束态(后面需要用到)。调整初始态画板1的元素参数。
我们想让主页icon进行从小到大的变化,所以要将主页图标的初始态缩小。使用等比缩放,缩小至30px。
调整导航背景的大小,使用等比缩放将导航背景形状缩小至570^133 px
复制画板调整参数
智能动画的原理是从一个画板变化到另一个画板,一个为初始态,一个为结束态。
所以现在需要调整结束态画板2的参数。将图标颜色调成蓝色色#2E54FF文字颜色调成蓝色#2E54FF
将之前绘制的背景蓝形状放大到1040^1040px。注意移动到图层最底下,不然会遮住文字。
添加交互动画
切换到「原型」面板,添加交互。事件类型为:定时,时长:!50,行为:跳转到画板2,过渡动画:智能动画
线性回弹,时长:500
直接Ctrl/Command+P「预览」,就能看到刚刚做的智能动画效果了。
复制画板调整参数
复制画板2复制出一份新的画板3。将画板3的主页icon颜色调整为为#BFCCDE,文字颜色调整为#BFCCDE
绘制一个圆形图层,尺寸60^60px命名为背景绿,填充颜色为#00BAAD,移动至图层背景蓝上方。
将我的icon等比缩小至30^30px。并调整导航背景的大小,使用等比缩放将导航背景形状缩小至570^133px
添加交互动画
选中画板2切换到「原型」面板,添加交互,事件:定时,时长:400,行为:跳转到画板3,过渡动画:智能
动画,线性回弹500
复制画板调整参数添加动画
继续复制画板,并调整参数,添加交互动画,设置动画参数,这里继续重复之前上面的操作。
设为循环播放
将最后一个画板与第一个画板设置交互连接,预览就可以实现循环播放动画了。大家在做的注意开始状态与结束状态的效果。然后连接交互线,设置智能动画就可以了。最后直接Ctrl/Command+P「预览」,就能看到刚刚做的智能动画效果了。
本临摹教程供给大家一个思路,大家还可以通过智能动画举一反三做一些自己喜欢的效果。