Dosen原創
這是我學習quartz composer,Origami,看官方文檔翻譯下來的,每天一篇,有不準確的地方希望能指出,一起交流進步。轉載請與我聯系,擅自轉載視作侵權。
Animations ? ? ?動畫
Animating in Origami is simple. Just connect an Animation patch to any value you want to animate. There are two main options to choose from:
在Origami中動畫是簡單的,只要給一個數值,將一個動畫模塊與你想要動畫的連接在一起。有兩個主要的選擇項可以挑選:
1. Animation patches ? ? ?動畫模塊
Pop Animation →?“?A ” ? ? Pop動畫模塊
Pop Animation is the preferred way to animate in Origami. It gives you an easy to use spring animation that you can customize to be bouncy, fast, slow, or not bouncy at all. These animations are interruptible, reversible, and retain velocity for fluid interactions.
Pop Animation是在Origami中實現動畫的最好方法,它提供給你一個容易使用的彈性動畫,并且你可以自定義反彈,快,慢,或者不要反彈。這些動畫是可以中斷的,可以反轉的,還有速率用于流體交互。
Classic Animation →? ? ? 經典動畫模塊
Classic Animation allows you to specify a duration and provides more traditional curves like linear, ease-in, and ease-out.
Classic Animation允許你指定一個持續時間,并且提供很多傳統曲線,例如線性,淡入,淡出。
2. Animating values ? ? ?動畫值
When connected to an Interaction or a Switch patch, which output 0 or 1, an Animation patch will output an animation over time between 0 and 1, rather than flip between them immediately.
當連接一個Interaction或者Switch模塊輸出0或1,一個動畫模塊會輸出一個時間在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:
下面這個例子,當你按下,縮放一個層從0%到100%,并有一個可反轉的彈性動畫。
3. Specifying 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. The animated 0 to 1 (or Progress) value from the animation patch will get converted to go from 100 to 200.
例如:如果你想讓動畫把一個層的寬度從100px變為200px,你需要指定一個開始值為100,結束值為200,Animation模塊的動畫(或者說進度)會從0到1變為從100到200。
With a Progress of 0:
當進度為0時:
With a Progress of .5:
當進度是0.5時:
With a Progress of 1:
當進度是1時:
In combination with an animation patch, you can now animate between any two values easily:
當組合中有一個動畫模塊,你現在可以在兩個值中很容易的做動畫。
You can even connect the same Progress value from your animation patch to several Transition patches to animate a whole bunch of different properties (like scale, opacity, position) on the same animation timing.
你甚至可以連接相同的進度值,從你的Animation模塊到幾個Transition模塊,在同一時間來使一整串不同的屬性做動畫(比如縮放,透明度,位置)。