iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 10
1

菜菜菜的前端學習日誌 - Day10

animation 動畫

animation 就是動畫,其實它跟transition有一點像。
但又有不一樣,那又有哪裡不一樣呢?就讓我們來看看吧

animation 屬性

animation 有下列的屬性:

  1. animation-name:動畫的名稱,跟 transition 不一樣的是 transition 是設定要有轉場效果的元素名稱,而 animation-name 要搭配一組對應的@keyframes,寫法如下:
div{
    animation-name: andy;
}
@keyframes andy{
    0%{ width: 100px;}
    100%{ width: 200px;}
}

動畫的名稱是 andy ,這個動畫執行時會先從0%開時執行然後會在100%結束,就會產生動畫的效果(先講解 animation-name 才這樣寫,實際上要加上執行時間才會執行動畫唷)。

可能會有人說:奇怪這樣跟 transition 效果不是一樣嗎?

以上面那段來說是一樣沒錯,但是 animation 能夠設置多個節點且能設定多組屬性,也就是說 animation能夠變大又變色又移動...等多重效果。

  1. animation-duration:動畫的執行時間,必須要加上這個屬性動畫才會執行的,就跟 transition 是一樣的。
  2. animation-timing-function:跟 transition一樣的,是設定動畫的加速度效果,如果不清楚的可以跳回去看一下唷
    Transition轉場效果
  3. animation-delay:跟 transition 一樣能夠設定動畫的延遲時間,另外提一點,延遲時間不只能夠設定正數,也能夠設定負數的喲,
  4. animation-iteration-count:動畫的播放次數,而能夠設定的參數如下:
參數名稱 參數效果
number 可輸入動畫想要播放的次數,輸入1就會播放1次,輸入5次就會播放5次
infinite 設定此參數就會無限的播放
  1. animation-direction:播放的方向,總共有4種參數如下:
參數名稱 參數效果
normal 就是以@keyframes設定的效果執行,無需特別設定
reverse 會以動畫效果的相反順序播放
alternate 設定此參數能夠讓動畫來回播放,此參數執行一次會先以正向播放一次再反向播放一次,因為此特性所以animation-iteration-count最少需設定為2
alternate-reverse 也是讓動畫能夠來回播放,不同的是它會先以反向的播放一次在正向的播放一次,同樣animation-iteration-count最少需設定為2
  1. animation-play-state:播放的狀態,預設為 running(正在跑?!) ,顧名思義就是就是播放拉~
    另外一個參數是paused,就是讓暫停動畫,下面再來討論何時能夠使用它
  2. animation-fill-mode:填充模式,可設定動畫為播放的樣式,參數有forwardsbackwardsboth,這比較難用文字去描述,下面用一些例子這比較難用文字去描述,下面用實作來解說:

實作

首先來實做一個正常沒有加上animation-delayanimation-fill-mode的動畫

設定它的動畫名稱為andy、執行時間為2s、等速,初始顏色為紅色,動畫開始時會從綠色變成藍色

動畫效果會如下

因為沒有延遲時間所以會直接播放動畫綠色變成藍色,動畫播放完畢後再回到原始狀態的紅色

而如果再加上延遲時間2s

效果會是這樣

它會先維持在原本的紅色2秒,然後開始播放動畫從綠色變藍色,動畫播放完畢後回到紅色

接下來我們加上animation-fill-mode的參數forwards

我們來看看結果會是這樣

它會先維持在原本的紅色2秒,然後開始播放動畫從綠色變藍色,但是動畫播放完後不會回到紅色,會停在動畫結束的藍色

再來把animation-fill-mode的參數換成backwards

看一下會有什麼不一樣呢

它一開始就會從動畫開始的綠色位置等待延遲的2s後變成藍色,動畫結束後就會回到初始的紅色

最後是將animation-fill-mode的參數換成both

結果就會是下面這樣

一樣直接從動畫開始的綠色等待延遲2s,動畫開始播放變成藍色,結束後就停在動畫的結束效果,不會回到初始設定的紅色

接下來我們來看一下animation-play-state效果是怎樣呢

我們先設置一個藍色的圓球,然後設定它的動畫效果2s並且無線播放,然後動畫內容設定讓他變形從0度到360度。

我們設定了transform-origin: 200px他就會在右方的200px為基準點,所以效果看起來就會是在那邊繞圈圈呢

因為程式碼中我們加上了hover時會讓他的animation-play-state變成 paused,就讓我們看一下效果會是如何呢

它就會在我們碰到它的時候暫停了呢~

創意

製作動畫需要的3個重要屬性都學會了,就能運用各位的創意來做出很棒的動畫了呢。
如果已經會javascript了就可以搭配不同的事件觸發及判斷式來製作很炫的動畫了!!!


上一篇
Transform變形
下一篇
javascript之Hello World
系列文
菜菜菜的前端學習日誌30

尚未有邦友留言

立即登入留言