CSS3 animation逐幀動畫

admin發表於2018-11-22
CSSS3動畫

關於animation屬性的基本用法可以參閱CSS3 animation一章節。

使用animation實現逐幀動畫:

熟悉了animation的屬性之後，得找個簡單的小專案實現下。

思路很簡單，就是給元素一個雪碧圖的背景，然後新增的幀動畫更改background-position。

關鍵程式碼如下：

[CSS] 純文字檢視 複製程式碼
@keyframes run{
  from{
    background-position: 0 0;
  }
  to{
    background-position: -1540px 0 ;
  }
}
div{
  width:140px;
  height:140px;
  background: url(run.png) ;
  animation-name：run;
  animation-duration:1s;
  animation-iteration-count:infinite;
}

a:3:{s:3:\"pic\";s:43:\"portal/201811/22/145435gd6kj6l8ce8ccb4n.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

但是跑起來後我們發現，每幀動畫之間幀動畫都是滑動，並不是我們要的效果,為什麼呢？

原來animation預設以ease方式過渡，它會在每個關鍵幀之間插入補間動畫，所以動畫效果是連貫性的

知道原因就好辦了，解決思路就是：

[CSS] 純文字檢視 複製程式碼
@keyframes run{
  0%, 8%{  /*動作一*/  }
  9.2%, 17.2%{  /*動作二*/  }
    ...
}

step1：動作之間停留8幀，0%設定動作一，動作一結束在8%

step2：動作之間過渡1.2幀，9.2%設定動作二，動作二結束在17.2%

完整程式碼：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
@keyframes run{
  0%, 8%{  background-position: 0 0;  }
  9.2%, 17.2%{  background-position: -140px 0;  }
  18.4%, 26.4%{  background-position: -280px 0 ;  }
  27.6%, 35.6%{  background-position: -420px 0 ;  }
  36.8%, 44.8%{  background-position: -560px 0 ;  }
  46%, 54%{  background-position: -700px 0 ;  }
  55.2%, 63.2%{  background-position: -840px 0 ;  }
  64.4%, 72.4%{  background-position: -980px 0 ;  }
  73.6%, 81.6%{  background-position: -1120px 0 ;  }
  82.8%, 90.8%{  background-position: -1400px 0 ;  }
  92%, 100%{  background-position: -1540px 0 ;  }
}
@-webkit-keyframes run{
  0%, 8%{  background-position: 0 0;  }
  9.2%, 17.2%{  background-position: -140px 0;  }
  18.4%, 26.4%{  background-position: -280px 0 ;  }
  27.6%, 35.6%{  background-position: -420px 0 ;  }
  36.8%, 44.8%{  background-position: -560px 0 ;  }
  46%, 54%{  background-position: -700px 0 ;  }
  55.2%, 63.2%{  background-position: -840px 0 ;  }
  64.4%, 72.4%{  background-position: -980px 0 ;  }
  73.6%, 81.6%{  background-position: -1120px 0 ;  }
  82.8%, 90.8%{  background-position: -1400px 0 ;  }
  92%, 100%{  background-position: -1540px 0 ;  }
}
div{
  width:140px;
  height:140px;
  background: url(demo/CSS/img/run.png) ;
  animation:run 1s infinite;
  -webkit-animation:run 1s infinite;
  animation-fill-mode : backwards;
  -webkit-animation-fill-mode : backwards;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

還有另外一個實現方法，就是利用steps(),就是幀之間的階躍動畫，這個在w3c裡面沒有寫，先貼個圖:

a:3:{s:3:\"pic\";s:43:\"portal/201811/22/145448elzil8945htu7xh7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

由上圖可知:

steps(1,start):動畫一開始就跳到 100% 直到這一幀（不是整個週期）結束。

steps(1,end):保持 0% 的樣式直到這一幀（不是整個週期）結束。

另外也可以直接設定 animation-timing-function:step-start/step-end。

step-start效果等同於steps(1,start)，step-end效果等同於steps(1,end)。

最終效果，因為錄製的問題可能有點卡頓，有興趣的同學可以直接複製程式碼去跑下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/22/145442m4ozsjiiq5tqgc15.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

完整程式碼:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
@keyframes run{
  0%{
    background-position: 0 0;
  }
  8.333%{
    background-position: -140px 0;
  }
  16.666%{
    background-position: -280px 0 ;
  }
  25.0%{
    background-position: -420px 0 ;
  }
  33.333%{
    background-position: -560px 0 ;
  }
  41.666%{
    background-position: -700px 0 ;
  }
  50.0%{
    background-position: -840px 0 ;
  }
  58.333%{
    background-position: -980px 0 ;
  }
  66.666%{
    background-position: -1120px 0 ;
  }
  75.0%{
    background-position: -1260px 0 ;
  }
  83.333%{
    background-position: -1400px 0 ;
  }
  91.666%{
    background-position: -1540px 0 ;
  }
  100%{
    background-position: 0 0 ;
  }
}
@-webkit-keyframes run{
  0%{
    background-position: 0 0;
  }
  8.333%{
    background-position: -140px 0;
  }
  16.666%{
    background-position: -280px 0 ;
  }
  25.0%{
    background-position: -420px 0 ;
  }
  33.333%{
    background-position: -560px 0 ;
  }
  41.666%{
    background-position: -700px 0 ;
  }
  50.0%{
    background-position: -840px 0 ;
  }
  58.333%{
    background-position: -980px 0 ;
  }
  66.666%{
    background-position: -1120px 0 ;
  }
  75.0%{
    background-position: -1260px 0 ;
  }
  83.333%{
    background-position: -1400px 0 ;
  }
  91.666%{
    background-position: -1540px 0 ;
  }
  100%{
    background-position: 0 0 ;
  }
}
div{
  width:140px;
  height:140px;
  background: url(demo/CSS/img/run.png) ;
  animation:run 1s steps(1, start) infinite;
  -webkit-animation:run 1s steps(1, start) infinite;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

相關文章