五天Principle从入门到精通03-动画的基本逻辑
小编:五天Principle从入门到精通,一起来学习吧~
《五天Principle从入门到精通01-简单的Toast动画制作》
《五天Principle从入门到精通02-Sketch的导入》
本次的课程理论知识比较多,可能会略显枯燥,但是做什么都要是要有坚实的理论基础的,这样才能最大化的发挥软件性能,做出更加酷炫的动画,下面我们开始今天的课程。
1. Principle中对象的四个交互属性
物件的交互属性,包括4个状态,横轴纵轴都可以调节。如图:
Static(静止的,静态的):这个是所有物件的默认状态,这个物件是不能被移动的。
Drag(拖动):例如做悬浮窗
Scroll(滚动):我们看到的大部分页面都是Scroll组件,例如瀑布流的页面,有了scroll才有了我们“刷”手机的的动作。
Page(翻页):这个概念不是很好理解,暂且理解成翻页吧,有了这个交互的概念,我们可以容易的做到下面的效果:
2. Principle动画触发条件
讲在前面,点击事件的逻辑分析,我们在PC上使用鼠标时,鼠标的一个点击会被分解成多个动作,
①鼠标按下
②鼠标抬起,
这样完成了一次鼠标点击的动作,除此之外还有
③鼠标移动,
④在3Dtouch中还有用力按压,增加了压力感应;
鼠标悬浮在某物体上方,(移动端不存在)
鼠标移出某物体上方,(移动端不存在)
以上,多个动作的组合就形成了多种交互方式,也就是我们要学习的动画触发条件。
Principle将所有的动画触发条件都集合到了⚡️闪电按钮中:
Principle的强大也表现在这里,这样的设计可以让系统做到:用户在同一个控件上执行不同的操作后,出现不同的动画效果或跳转到不同的页面。
下面我们来讲解一下每个按钮的意思,字面可以理解的我就不解释了。
1. Tap(点击):①鼠标按下;②鼠标抬起;
2. Long Press(长按):交互代码:① ① ②