卡片的非对称曲线运动-潍坊达内负责整理
同样的情况还适用于,元素在界面中消失后用户还能随时显示,抽屉导航就是这样的例子。
抽屉导航的收起过程就是应用到了标准曲线
从很多例子中可以看出许多初学者都忽略了一个基本的规则--开始动画不等同于结束动画,应该分别去设置,比如在抽屉导航动效中--打开是一个减速动画但关闭时却是一个标准曲线动画。另外,根据谷歌设计规范,物体出现的动画持续时间应该略长,以吸引用户更多的注意力。
侧边栏的动画是配合减速曲线和标准曲线一起来实现的
有一个立方贝塞尔函数常用来描述这种速度曲线。之所以叫立方是因为它是基于2个点来的。第一个点在坐标轴中是(0,0)(左下),最后一个点是(1,1)(右上)。
基于此,我们只需要描述图上的两个点,这是由贝塞尔函数的四个参数给出的:前两个是第一个点的坐标x和y,后两个是第二个点的坐标x和y.
为了便于实际工作,我建议使用2个工具网站来操作
第一个包含一些最常使用的曲线列表,可以直接将其复制到原型工具中去。第二个是可以给你自己自定义动画的曲线,并能实时查看效果。
不同类型的动画曲线以及他们不同的参数
动画在界面中的编排
就像芭蕾舞编排一样,主要思想是从一个状态到另一个状态的过渡引导用户注意力方向。
一般会有2种编排形式--同级动画和从属动画。
同级动画
同级动画意味着所有对象的外观都服从一个特定的规则。
以上就是潍坊达内给大家做的内容详解,更多关于UI的学习,请继续关注潍坊达内