UI设计中,数字滚动动效如何制作?设计教程来啦~#设计

发布时间:2024-03-13 13:25:33 浏览量:242次

数字滚动动画教程。

像是这种或者这种的数字动画效果可以很好地解决静态展示用户无法理解功能点的问题。本期就教大家如何制作这种数字动画效果。

·针对时间模块加入微动画可以使用户很清晰的感觉到时光流逝。数字模组也是同理,首次进入可以增加滚动动画让用户感觉到数值的增长或者减少。

·这种动画制作起来原理很简单,其实就是把需要滚动的数字竖向排列开,然后通过蒙版进行裁切,在另一个画板中进行变化。

·两个画板的内容都做好以后就可以通过原型工具进行连接了。原型工具部分可以选择点击或者Hover作为触发指令,然后跳转到画板2加入智能动画。如果是时间以秒为单位则可以修改时长为1秒。如果是数字模组的滚动不修改时间也可以,然后预览就可以实现数字跳动的效果。

·除了数字滚动的动画,其实掌握动画的制作思路以后还可以通过即时Design去完成多种花样的交互动画,比如这种仪表台的指针动画。

→首先绘制好素材,这里需要注意的是指针后面需要添加一层透明的正圆形或者正方形,这样做的目的是为了旋转的时候以中心点旋转。

→然后同样是在两个画板中做好动画前后的界面,再通过原型工具进行连接添加智能动画。

这样仪表台的动画也制作完成。怎么样是不是十分简单?快去试试看吧!Hyuk Design.

热门课程推荐

热门资讯

请绑定手机号

x

同学您好!

您已成功报名0元试学活动,老师会在第一时间与您取得联系,请保持电话畅通!
确定