04-Framer基礎(chǔ)-States狀態(tài)

Dosen原創(chuàng)

開(kāi)始學(xué)習(xí)Framerjs,邊學(xué)邊翻譯,也加了一些我學(xué)習(xí)過(guò)程中的理解。寫(xiě)下來(lái)留作以后查閱,看官如果發(fā)現(xiàn)有地方寫(xiě)的不對(duì)請(qǐng)指出。轉(zhuǎn)載請(qǐng)聯(lián)系作者。


Animation????? 動(dòng)畫(huà)


Properties of a layer can be animated, including x, y, width, height, scale, opacity, rotation and more. Multiple properties can be animated at once.

層的屬性可以被動(dòng)畫(huà),包括x,y,寬,高,縮放,透明度,旋轉(zhuǎn),等。多種屬性的動(dòng)畫(huà)可以一起執(zhí)行。

這段代碼給layerA創(chuàng)建了一個(gè)透明度變?yōu)?.5的動(dòng)畫(huà)。




Timing????? 時(shí)間

You can define the duration of an animation, except when using spring curves. Animations can also be delayed and repeated. All durations in Framer are defined in seconds.

你可以定義一個(gè)動(dòng)畫(huà)的持續(xù)時(shí)間,除了當(dāng)使用彈性曲線時(shí)。動(dòng)畫(huà)可以添加延遲和重復(fù)。在Framer中所有持續(xù)都用秒為單位。

這段代碼給layerA創(chuàng)建了一個(gè)透明度變?yōu)?.5的動(dòng)畫(huà)。并且使用ease這個(gè)預(yù)置的動(dòng)畫(huà)曲線,動(dòng)畫(huà)重復(fù)1次,延遲2秒,持續(xù)1秒。



Curves????? 曲線

Animations optionally take a curve that describe the type of animation. You can use pre-defined curves like 'linear' or 'ease-in', custom bezier curves and spring animations. Below is an overview of different curves.

動(dòng)畫(huà)的類型用曲線來(lái)描述。你可以使用預(yù)定義曲線,比如“l(fā)inear”,“ease-in”,自定義貝塞爾曲線和彈性動(dòng)畫(huà)。下面是不同曲線的預(yù)覽。



Summary????? 概要


Multiple properties can be animated at once

多種屬性動(dòng)畫(huà)可以一起執(zhí)行。

Animations can be timed, delayed and repeated

動(dòng)畫(huà)可以被定義時(shí)間,延遲,重復(fù)次數(shù)。

Framer contains various animation curves, including spring curves

Framer包含多種動(dòng)畫(huà)曲線,包含彈性曲線。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容