聊一聊CSS動畫

時間 2019-11-06

標籤 css 動畫欄目 CSS 简体版

原文原文鏈接

何爲動畫

咱們眼前所看到圖像正在以每秒60次的頻率刷新，因爲刷新頻率很高，所以你感受不到它在刷新。而動畫本質就是要讓人眼看到圖像被刷新而引發變化的視覺效果，這個變化要以連貫的、平滑的方式進行過渡。javascript

CSS Transitions

transition: property duration timing-function delaycss

Transitions 屬性

transition-property：規定設置過渡效果的 CSS 屬性的名稱
transition-duration：規定完成過渡效果須要多少秒或毫秒
transition-delay：定義過渡效果什麼時候開始
transition-timing-function：規定速度效果的速度曲線，有如下參數：
- ease:ease函數等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0).
- linear:linear 函數等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0).
- ease-in:ease-in 函數等同於貝塞爾曲線(0.42, 0, 1.0, 1.0).
- ease-out:ease-out 函數等同於貝塞爾曲線(0, 0, 0.58, 1.0).
- ease-in-out:ease-in-out 函數等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)
- cubic-bezier:特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於曲線上點P1和點P2。全部值需在[0, 1]區域內，不然無效。能夠在該網頁中設置參數，造成過渡曲線。

演示

div{
  height: 200px;
  width: 200px;
  background: green;
  transition: background 2s ease,transform 2s ease-in 1s;
}
div:hover{
  transform:rotate(180deg) scale(.5);background:red
}
複製代碼

請看demojava

不足

transition的優勢在於簡單易用，可是它有幾個很大的侷限。css3

（1）transition須要事件觸發，因此無法在網頁加載時自動發生。web

（2）transition是一次性的，不能重複發生，除非一再觸發。數組

（3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。瀏覽器

（4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。函數

CSS ANIMATIONS

animation: name duration timing-function delay iteration-count direction;佈局

ANIMATIONS屬性

animation-name：規定須要綁定到選擇器的 keyframe 名稱
animation-duration：規定完成動畫所花費的時間，以秒或毫秒計
animation-timing-function：規定動畫的速度曲線
animation-delay：規定在動畫開始以前的延遲
animation-iteration-count：規定動畫應該播放的次數(infinite：循環播放)
animation-direction：規定是否應該輪流反向播放動畫(normal,alternate：反向)
animation-play-state：屬性規定動畫正在運行仍是暫停。
- paused：規定動畫已暫停。
- running：規定動畫正在播放。
animation-fill-mode：指定動畫執行先後如何爲目標元素應用樣式
- none：不改變默認行爲
- forwards：當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）
- backwards：在 animation-delay 所指定的一段時間內，在動畫顯示以前，應用開始屬性值（在第一個關鍵幀中定義）
- both：向前和向後填充模式都被應用

演示

在網頁加載時自動發生

#myDiv {
  width:200px;
  height:200px;
  background:green
}
.play {
   animation: fancy 2s ease infinite alternate;
/* animation: fancy 2s ease alternate forwards; */
 }
@keyframes fancy {
  0%   { transform: none; background:green;}
  40%  { transform: scale(0.75) rotate(90deg); }
  100% { transform: scale(0.5) rotate(180deg);background:red }
}
複製代碼

增長restart按鈕

@keyframes fancy1 {
  0%   { transform: none;background:green }
  40%  { transform: scale(0.75) rotate(90deg); }
/* 45% {background:blue} */
  100% { transform: scale(0.5) rotate(180deg);background:red }
}
.restart {
   animation: fancy1 2s ease infinite alternate;
 }
複製代碼

function restart(){
  if (myDiv.classList.contains('play')) {
     myDiv.className = 'restart';
  }else {
    myDiv.className = 'play';
  }
}
複製代碼

增長中止按鈕

.pause {
   animation-play-state: paused;
 }
複製代碼

function pause(){
  if (myDiv.classList.contains('play')) {
     myDiv.className = 'pause play';;
  }else {
    myDiv.className = 'pause restart';
  }
}
複製代碼

*2倍速

.faster{
  animation: fancy 1s ease infinite alternate;
}
複製代碼

function faster(){
  if (myDiv.classList.contains('play')) {
     myDiv.className = 'faster';
  }else {
    myDiv.className = 'faster restart';
  }
}
複製代碼

請看demo

兼容性

-moz- /* 火狐等使用Mozilla瀏覽器引擎的瀏覽器 */
-webkit- /* Safari, 谷歌瀏覽器等使用Webkit引擎的瀏覽器 */
-o- /* Opera瀏覽器(早期) */
-ms- /* Internet Explorer (不必定) */

不足

若是須要多個動畫須要隨時的暫停，播放，反向播放，動態改變播放速率，監聽到動畫的完成和取消，須要用js來爲css animation增長不一樣的樣式從而改變更畫，會讓css文件和js文件太過於「笨重」性能

Web ANIMATIONS

介紹

Web Animations API爲開發者打開瀏覽器的動畫引擎，讓開發者能夠經過JavaScript進行操做。該API旨在成爲CSS動畫和CSS過渡的實現的基礎，併爲將來的動畫效果留下了空間。它是支持Web的動畫最高效的方法之一，讓瀏覽器能夠本身進行內部優化而不須要hacks，強制或Window.requestAnimationFrame（）。

經過Web Animations API，咱們能夠將交互式動畫從樣式表移動到JavaScript，將表現與行爲分開。咱們再也不須要依賴DOM-heavy的技術，例如編寫CSS屬性和將類做用於元素以控制播放方向。與純粹的聲明性CSS不一樣，JavaScript還容許咱們動態地將值從屬性設置爲持續時間。

核心

其核心在於提供了:Element.animate(frames, timing);

兩個參數

關鍵幀對象數組frames[]，對應CSS3中的@keyframes，每一幀的描述與css3極其相似,但它不須要明確告知動畫中每一個鍵出現的百分比。它會根據您給出的鍵數自動將動畫分紅相等的部分。也能夠直接在對象中指定偏移量，CSS中的百分比偏移更改成offset從0到1的十進制值

時間控制timing，包括有duration持續時間、iterations執行次數、direction動畫方向、easing緩動函數等屬性

var options = {
    iterations: Infinity, // 動畫的重複次數，默認是 1
    iterationStart: 0, // 用於指定動畫開始的節點，默認是 0
    delay: 0, // 動畫延遲開始的毫秒數，默認 0
    endDelay: 0, // 動畫結束後延遲的毫秒數，默認 0
    direction: 'alternate', // 動畫的方向 默認是按照一個方向的動畫，alternate 則表示交替
    duration: 700, // 動畫持續時間，默認 0
    fill: 'forwards', // 是否在動畫結束時回到元素開始動畫前的狀態
    easing: 'ease-out', // 緩動方式，默認 "linear"
};
複製代碼

方法和屬性

pause() – 暫停動畫
play() – 播放動畫
reverse() – 反向播放
finish() – 當即結束動畫
cancel() – 取消動畫並回到初始狀態
playbackRate – 播放速度（負數的話將致使動畫反向運行）

var myDiv = document.getElementById('myDiv');
var keyframes=[
   {transform: 'translateX(0)' },
   {transform: 'translateX(500px)'}
]
var timing={
  duration: 2000,
  // iterations: Infinity,
  direction: 'alternate'
}

let myAnimation=myDiv.animate(keyframes,timing);
// 播放動畫
function play(){
  myAnimation.play();
}
// 暫停動畫
function pause(){
  myAnimation.pause();
}
// 反向播放
function reverse(){
  myAnimation.reverse();
}
// 當即結束動畫
function finish(){
  myAnimation.finish();
}
// 取消動畫並回到初始狀態
function cancel(){
  myAnimation.cancel();
}
// 2倍速
function faster(){
  myAnimation.playbackRate = 2;
}
// 反向運行動畫
function back(){
  myAnimation.playbackRate = -1;
}
// 設置當前動畫播放的毫秒數
function currentTime(){
  //currentTime返回動畫當前所在的毫秒數,讀/寫
  myAnimation.currentTime=0;
}
複製代碼

請看demo

WEB ANIMATION API 事件監聽

onfinish:用於註冊完成事件，當調用finish()方法是也能夠觸發。
oncancel:用於註冊取消事件，當調用cancel()方法是也能夠觸發。

spinnerAnimation.addEventListener('finish', function() {
    // Animation has completed or .finish() has been called.
    doSomething();
});

spinnerAnimation.addEventListener('cancel', function() {
    // Animation has been canceled. 
    doSomething();
});
複製代碼