這些用來設(shè)置特定動畫和交互，將其應(yīng)用到圖層。動畫的范圍和交互與動畫的關(guān)系用來作為判斷條件。

http://wiki.jikexueyuan.com/project/pixate-guide/images/interaction-animation1.png" alt="" />

依據(jù)

第一個菜單項將動畫設(shè)置給該圖層。圖層必須要有一個交互動作，才能在菜單中顯示。建議使用簡單的圖層名稱，易于使用。

每個交互動作都有不同的事件，第二個菜單項設(shè)置交互的事件到動畫上。取決于事件，其他動畫屬性和選項可用或者被隱藏。

一層有多個交互，應(yīng)用于它將顯示所有可用選項。

這是交互事件的一個圖表：

請注意，屏幕有一個選項，加載，當(dāng)屏幕加載時，動畫根據(jù)該選項加載。

拖拽，旋轉(zhuǎn)，捏拉和滾動中多個事件互動被認(rèn)為是恒定的，因為用戶可以連續(xù)進行這種互動。

動畫

有三種類型的動畫模式，用以改變動畫運行的過程。

CONTINUOUSLY TO FINAL VALUE

像拖動和滾動這種持續(xù)的互動，會限制互動和動畫范圍的。

CONTINUOUSLY WITH RATE

像拖動和滾動持續(xù)的互動，圖層以規(guī)定的速度平移（即視差運動）。

WITH DURATION TO FINAL VALUE

條件滿足，圖層就會連續(xù)移動。

某些交互事件只允許特定的動畫類型，如下圖所示的圖表：

錨點（縮放和旋轉(zhuǎn)）

縮放和選擇以九宮格的中心為原點。選中九宮格中的一個格子，就可以將其設(shè)置為動畫執(zhí)行的原點。

http://wiki.jikexueyuan.com/project/pixate-guide/images/interaction-animation2.png" alt="" />

縮放動畫將從選定的點上下縮放。

http://wiki.jikexueyuan.com/project/pixate-guide/images/interaction-animation3.gif" alt="" />

旋轉(zhuǎn)動畫將繞著選定點旋轉(zhuǎn)。

http://wiki.jikexueyuan.com/project/pixate-guide/images/interaction-animation4.gif" alt="" />

旋轉(zhuǎn)的變換樣式

這變化軸可用于切換動畫。在默認(rèn)情況下只顯示 Z 軸領(lǐng)域。點擊三維旋轉(zhuǎn)顯示 X 和 Y 軸。這允許card-flip類型的動畫。

http://wiki.jikexueyuan.com/project/pixate-guide/images/interaction-animation5.png" alt="" />

X 軸旋轉(zhuǎn)

繞 X 軸旋轉(zhuǎn)圖層，若設(shè)置為正數(shù)，則底部向頂部翻轉(zhuǎn)。

http://wiki.jikexueyuan.com/project/pixate-guide/images/interaction-animation6.gif" alt="" />

Y 軸旋轉(zhuǎn)

繞 Y 軸旋轉(zhuǎn)圖層，若設(shè)置為正數(shù)，則左邊向右邊翻轉(zhuǎn)。

http://wiki.jikexueyuan.com/project/pixate-guide/images/interaction-animation7.gif" alt="" />

Z 軸旋轉(zhuǎn)

繞Z軸旋轉(zhuǎn)圖層，若設(shè)置為正數(shù)，順時針旋轉(zhuǎn)。

http://wiki.jikexueyuan.com/project/pixate-guide/images/interaction-animation8.gif" alt="" />

旋轉(zhuǎn)到背面

這個屬性指定使用哪個層作為旋轉(zhuǎn)層的背面。

http://wiki.jikexueyuan.com/project/pixate-guide/images/interaction-animation9.png" alt="" />

一般，如果沒有選定圖層，就會將當(dāng)前圖層旋轉(zhuǎn)后作為背面圖層。為這個屬性選擇圖層，就可以為此圖層設(shè)置背面。背面圖層可以有任意尺寸，應(yīng)定位到屏幕，要旋轉(zhuǎn)圖層的下方。

http://wiki.jikexueyuan.com/project/pixate-guide/images/interaction-animation10.gif" alt="" />