css3 實現逐幀動畫

龍恩0707發表於2016-05-29
CSSS3動畫

css3 實現逐幀動畫

實現逐幀動畫需要使用到的是Animation動畫，該CSS3的Animation有八個屬性；分別是如下：
1: animation-name
2: animation-duration
3: animation-delay
4: animation-iteration-count
5: animation-direction
6: animation-play-state
7: animation-fill-mode
8: animation-timing-function

含義分別如下：
animation-name 規定需要繫結到選擇器的 keyframe 名稱
animation-duration 規定完成動畫所花費的時間，以秒或毫秒計。
animation-delay 規定在動畫開始之前的延遲。
animation-iteration-count 規定動畫應該播放的次數。如果設定 infinite 是動畫迴圈播放。
animation-direction 規定是否應該輪流反向播放動畫。
animation-play-state 屬性規定動畫正在執行還是暫停。屬性值有2個；paused(規定動畫已暫停。) running(規定動畫正在播放。)
animation-fill-mode 規定動畫在播放之前或之後，其動畫效果是否可見。 有如下四個值：
1: none（不改變預設行為）;
2: forwards (當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。)
3. backwards 在animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。
4. both 向前和向後填充模式都被應用。

其中forwards屬性值經常會被使用到；

animation-timing-function 規定動畫的速度曲線。
至於動畫基本的東西這邊不講解，有空大家可以看看如下這篇文章；http://www.cnblogs.com/tugenhua0707/p/5385261.html

我們先來理解如何做css3的逐幀動畫，該動畫的過程類似於gif動畫；

那麼需要先理解使用動畫函式的屬性 steps；
該屬性值如下使用：
animation: redBag-heart1 5s steps(1, end) infinite;
-webkit-animation: redBag-heart1 5s steps(1, end) infinite;

該屬性值有2個引數：
第一個引數指定了時間函式中的間隔數量（必須是正整數）。
第二個引數可選，接受 start 和 end 兩個值，指定在每個間隔的起點或是終點發生階躍變化，預設為 end。

step-start 等同於steps(1,start)，動畫分成1步，start 第一幀是第一步動畫結束
step-end 等同於steps(1,end)：動畫分成一步，第一幀是第一步動畫開始，預設值為end。

第一個引數是動畫分成幾步完成，它是指兩個關鍵幀之間的動畫，比如如下程式碼：

@keyframes redBag-heart1 {
      0% {
        transform: scale(0.08, 0.08);
      }
      25% {
        transform: scale(0.2, 0.2);
      }
      40% {
        transform: scale(0.4, 0.4);
      }
      60% {
        transform: scale(0.6, 0.6);
      }
      75% {
        transform: scale(0.8, 0.8);
      }
      90% {
        transform: scale(1, 1);
      }
      100% {
        transform: scale(3, 3);
      }
}

它是指如上的 0% 到 25% 兩個關鍵幀分成幾步完成，而不是整個keyframes；因此如果我們設定 steps(1,start)的話，說明是兩個間隔分成1步完成；

基本的知識點就是如上；現在我們可以來做一個css3的逐幀動畫，無非也就是說0% 它是一個什麼樣子的，20%的時候又是一張背景圖，40%又是一張背景圖，這樣的組成起來的；所以我們平時看到的很多動畫，看起來很複雜，其實都是由很多簡單的動作組成起來的；

程式碼如下：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="@my_programmer">
<title>webkitAnimationEnd</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<script src="./js/zepto.js"></script>
<style type="text/css">
    body,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,select,textarea,button,th,td,blockquote,address,pre{margin:0;padding:0;}
    h1,h2,h3,h4,h5,h6,input,textarea,select,button,label{font-size:100%;vertical-align:middle;}
    ul,dl,ol{list-style:none;}
    img,fieldset{border:none;}
    img{display:inline-block;overflow:hidden;vertical-align:top;}
    em,address{font-style:normal;}
    sup,sub{vertical-align:baseline;}
    table{border-collapse:collapse;border-spacing:0;}
    q:before{content:"";}
    q:after{content:"";}
    button{cursor:pointer;}
    textarea{word-wrap:break-word;resize:none;}

    .hidden {display:none;}
    /* 撩紅包css3動畫 */
    .animate-container {
      width: 150px;
      height: 168px;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
    }
    .redBag-animate {
      width: 150px;
      height: 168px;
      background: url("http://images2015.cnblogs.com/blog/561794/201605/561794-20160529001846147-294383374.png") no-repeat center center;
      animation: redBag-animate1 5s steps(1, end) 1;
      -webkit-animation: redBag-animate1 5s steps(1, end) 1;
      animation-fill-mode: forwards;
      -webkit-animation-fill-mode: forwards;
    }
    .redBag-heart {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
    }
    .redBag-heart img {
      animation: redBag-heart1 5s steps(1, end) infinite;
      -webkit-animation: redBag-heart1 5s steps(1, end) infinite;
      margin-top: 31px;
    }
    @keyframes redBag-heart1 {
      0% {
        transform: scale(0.08, 0.08);
      }
      25% {
        transform: scale(0.2, 0.2);
      }
      40% {
        transform: scale(0.4, 0.4);
      }
      60% {
        transform: scale(0.6, 0.6);
      }
      75% {
        transform: scale(0.8, 0.8);
      }
      90% {
        transform: scale(1, 1);
      }
      100% {
        transform: scale(3, 3);
      }
    }
    @-webkit-keyframes redBag-heart1 {
      0% {
        transform: scale(0.08, 0.08);
      }
      25% {
        transform: scale(0.2, 0.2);
      }
      40% {
        transform: scale(0.4, 0.4);
      }
      60% {
        transform: scale(0.6, 0.6);
      }
      75% {
        transform: scale(0.8, 0.8);
      }
      90% {
        transform: scale(1, 1);
      }
      100% {
        transform: scale(3, 3);
      }
    }
    @-webkit-keyframes redBag-animate1 {
      0% {
        background-position: 0 0;
      }
      14.3% {
        background-position: 0 -168px;
      }
      28.6% {
        background-position: 0 -336px;
      }
      42.9% {
        background-position: 0 -504px;
      }
      57.2% {
        background-position: 0 -672px;
      }
      71.5% {
        background-position: 0 -840px;
      }
      100% {
        background-position: 0 -1008px;
      }
    }
    @keyframes redBag-animate1 {
      0% {
        background-position: 0 0;
      }
      14.3% {
        background-position: 0 -168px;
      }
      28.6% {
        background-position: 0 -336px;
      }
      42.9% {
        background-position: 0 -504px;
      }
      57.2% {
        background-position: 0 -672px;
      }
      71.5% {
        background-position: 0 -840px;
      }
      100% {
        background-position: 0 -1008px;
      }
    }
</style>
</head>
<body>
<!-- <div class="btn" id="btn">點選動畫</div> -->
<div class="animate-container">
    <div class="redBag-animate"></div>
    <div class="redBag-heart hidden">
        <img src="http://images2015.cnblogs.com/blog/561794/201605/561794-20160529001921991-1838406901.png" width="100%" class="heart-img"/>
    </div>
</div>

<script type="text/javascript">
    var animateContainer = document.querySelector(".redBag-animate");
    animateContainer.addEventListener("webkitAnimationEnd", function(e) {
         $(".redBag-heart").removeClass("hidden");
    });

    var animateHeart = document.querySelector(".heart-img");
    animateHeart.addEventListener("webkitAnimationEnd", function(e) {
         $(".redBag-animate").addClass("hidden");
    });
</script>
</body>
</html>

用於檢測css動畫是否完成的 -- JS程式碼如下：

var animateContainer = document.querySelector(".redBag-animate");
animateContainer.addEventListener("webkitAnimationEnd", function(e) {
     $(".redBag-heart").removeClass("hidden");
});

var animateHeart = document.querySelector(".heart-img");
animateHeart.addEventListener("webkitAnimationEnd", function(e) {
     $(".redBag-animate").addClass("hidden");
});

原始碼下載

相關文章