> 文章列表 > 五天Principle从入门到精通03-动画的基本逻辑

五天Principle从入门到精通03-动画的基本逻辑

小编:五天Principle从入门到精通,一起来学习吧~

《五天Principle从入门到精通01-简单的Toast动画制作》

《五天Principle从入门到精通02-Sketch的导入》

本次的课程理论知识比较多,可能会略显枯燥,但是做什么都要是要有坚实的理论基础的,这样才能最大化的发挥软件性能,做出更加酷炫的动画,下面我们开始今天的课程。

1. Principle中对象的四个交互属性

物件的交互属性,包括4个状态,横轴纵轴都可以调节。如图:

五天Principle从入门到精通03-动画的基本逻辑

Static(静止的,静态的):这个是所有物件的默认状态,这个物件是不能被移动的。

Drag(拖动):例如做悬浮窗

Scroll(滚动):我们看到的大部分页面都是Scroll组件,例如瀑布流的页面,有了scroll才有了我们“刷”手机的的动作。

Page(翻页):这个概念不是很好理解,暂且理解成翻页吧,有了这个交互的概念,我们可以容易的做到下面的效果:

五天Principle从入门到精通03-动画的基本逻辑

2. Principle动画触发条件

讲在前面,点击事件的逻辑分析,我们在PC上使用鼠标时,鼠标的一个点击会被分解成多个动作,

①鼠标按下

②鼠标抬起,

这样完成了一次鼠标点击的动作,除此之外还有

③鼠标移动,

④在3Dtouch中还有用力按压,增加了压力感应;

鼠标悬浮在某物体上方,(移动端不存在)

鼠标移出某物体上方,(移动端不存在)

以上,多个动作的组合就形成了多种交互方式,也就是我们要学习的动画触发条件。

Principle将所有的动画触发条件都集合到了⚡️闪电按钮中:

五天Principle从入门到精通03-动画的基本逻辑

Principle的强大也表现在这里,这样的设计可以让系统做到:用户在同一个控件上执行不同的操作后,出现不同的动画效果或跳转到不同的页面。

下面我们来讲解一下每个按钮的意思,字面可以理解的我就不解释了。

1. Tap(点击):①鼠标按下;②鼠标抬起;

2. Long Press(长按):交互代码:① ① ②