Animation patches in Origami are designed to be fluid and reversible: they take any changing number and tween it to be smooth.
动画在 Origami 中被设计为流畅转换并且可逆:使用两个数值作为开始和结束,自动添加补间动画。
Animation patches 动画模块
- **[Pop Animation]
A
**Natural bouncy animations commonly found in Facebook apps, and easily pass values to your developers with the the Pop framework for iOS, Rebound for Android, and Rebound JS for the web. -
[Classic Animation]
C
Traditional easing curves, like linear, ease-in, and ease-out. - [Repeating Motion] Repeating, back-and-forth animations with easing curves.
- **[Pop Animation 弹性动画]
A
** 在Facebook APP 中的弹性动画由这个模块实现。并且可以输出参数给开发人员,可应用在用iOS的 Pop 框架,Android的 Rebound , 和web的 Rebound JS。 -
[Classic Animation 曲线动画]
C
传统的曲线动画,如缓入、缓出、线性动画等。 - [Repeating Motion 重复运动] 缓动曲线重复的动画。(板栗:又不咋理解)
Animating values 动画值
In combination with an [Interaction] or a [Switch] patch, which output 0 or 1, an Animation patch can tween that value so it smoothly animates from 0 to 1, and vice versa. Origami refers to this 0 to 1 value generally as progress.
结合 [Interaction 交互] 或 [Switch 开关] Patch一起用,输出0或1,动画类模块自动在两个值之间添加补间值,所以是平滑过渡。
This example below will scale a Layer from 0 to 1 (or 0% to 100%) when you touch down, with a reversible and bouncy animation:
下面这个案例表示当你按下 (Touch Down) 时,以一个弹性动画将图层 (Layer) 从0到1 (等于0%➞100%) 缩放,并且动画可逆:
Transitions 过渡
Animating from 0 to 1 is simple, but what about animating between other values?
一个0/1的动画太踏马简单了,那别的值之间的动画呢?
[Transition] T
patches let you transform that 0/1 into any start/end value:
[Transition 过渡]模块可以通过输入开始值/结束值创建0/1之外的其他动画:
For example, if you want to animate a Layer's width from 100px to 200px. You would specify a Start Value of 100, and an End Value of 200. In combination with the animated 0 to 1 value from above, you can easily animate a Layer's width.
例如,一个把图层的宽从100px变为200px的动画。在[Transition 过渡] 模块的开始值输入100,结束值输入200,动画就做好了。Progress 值就会在0和1之间切换。
With a Progress of 0:
Progress 值为 0 时,动画为初始值 (板栗:如果没有触发交互,检查器看到的就是这个值,宽度100px,触发交互后也是从这个值开始):
With a Progress of .5:
自动添加的补间值 0.5:
With a Progress of 1:
Progress 值为 1时动画结束:
In combination with an animation patch, you can now animate between any two values easily:
在这个动画模块的组合中可以很容易就创建在两个值之间转换的动画:
(板栗:上面的例子的完整连接,通过Interaction 交互 模块监控到 Down 按下这个动作,然后激活 Pop Animation 弹性动画,通过Transition 过渡定义 Layer 图层弹成什么样,例子中是将宽度从100转换为200)
为了效果更好值做了一些调整:
Pop Animation :想弹得更明显调高了 Bounciness 值,速度加点调高了 Speed 的值。
Transition:是想等比缩放所以连接图层的 Size,所以有W、H两个值,Patches 模块 中讲过这个知识点。如果不想计算图层的具体尺寸值,可以连接 Scale 按比例缩放。
缩放卡顿是因为,这个动作叫按下 (Down),想示范一下是按下的时候就出发了动画。
Summary 总结
- Pop Animation and Pop Animation automatically tween any number.
- Interaction, Switch, Animation, Transition (ISAT) are your bread and butter for animating layers.
- Sync multiple animations together by using one animation patch connected to multiple Transitions, which map progress of 0-1 to any start/end values.
- Pop Animation 和 Pop Animation 自动添加动画补间。
- 在做动画的时候,Interaction 交互、Switch 开关、Animation 动画、Transition 过渡 缺一不可。
- 将多个 Transition 过渡连接到同一个动画模块 ,给以给图层输出同步的但不同属性变化的动画。