海贼旗在呼唤着我

Principle 使用问题 #产品

2017.06.15

很早就知道 principle,却一直很难尝试,网上的资料就找到一篇中文的说明文档。工作中对动画的需求很少。之前一直把 protopie 当做做动画的首选。无论是软件的理解和使用上 protopie 对我更加容易点。无奈正式版上线后需要付费使用,而工作中做动画的情况非常之少,所以一直没有购买。今天抽了半点时间去学习 principle,使用中发现两个难点无法理解,在多次尝试之后终于解决了。principle 做动效的思路的确非常好,但是对大型项目的完整交互估计支持很有限。面板无法移动,多了之后无法想想怎么管理~~

事件

事件是触发动画的关键点,用于不同画布间的转场。做动效和交互的常用配置,非常好理解。principle 提供了常用的事件:点击、长按、拖拽、滚动、自动跳转等,不解释了。

动画

选择一个图层后拖拽相应的事件到目标位置就会生成一个动画,拖动到原画板会复制一个。改变相同名称的图层属性会自动生成动画,选择对应元素的曲线可以设置动画效果。

联动

这个很难理解,特别是开始的时候不知道如何设置两个元素之间的联动。具体操作如下:

  1. 选择事件图层,把图层属性从静态(static)改成drag、scroll、page 中的任意一个。drivers 中会出现此图层的属性,时间轴的单位不是时间,而是属性的值(第一次使用很容易别迷惑)。

drag:拖拽,对应方向可以拖动图层

scroll:滚动,对应方向可以滚动图层,滚动区域可以手动调整

page:页面切换,对应方向可以翻页,可用于 banner 的切换

  1. 选择需要产生联动的图层,driver 中会出现此图层,选择一个联动的属性,添加一个关键帧。
  2. 移动时间轴到其他值,改变联动目标的对应属性,自动创建关键帧。
  3. 设置前后参数即可。

组件

组件用于页面中小元素的动画效果,生成组件后可以多画板公用。选择要制作的元素生成组件,双击进入详情设置,操作和页面上一致。
注意:组件做好之后最好改变一下大小,设置成出发图层的大小即可,否则使用时会影响其他图层的效果。

Comments
Write a Comment