CSS3動畫之利用requestAnimationFrame觸發(fā)重新播放功能

發(fā)布時(shí)間：2019-09-11 14:39:33 作者：佚名

這篇文章主要介紹了利用requestAnimationFrame重新播放(觸發(fā))CSS3動畫,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

css動畫

css3中引入了animation模塊,自此css動畫進(jìn)入了我們的視野。css動畫名符其實(shí),會寫css樣式就可以創(chuàng)作動畫，對一些不怎么會JS的設(shè)計(jì)師也是比較包容的。但也正因?yàn)槿绱?，?dāng)你需要重新播放或者說手動觸發(fā)動畫時(shí)，css的局限性就突顯出來了，畢竟它不是一門編程語言。像這種在頁面中創(chuàng)建一個(gè)按鈕，點(diǎn)擊按鈕時(shí)開始播放一段動畫這種活交給JS才是最合適的。

原理和思路

重新播放css動畫,我們只需要將CSS動畫效果刪除，然后再重新加上 css動畫效果即可。那么如何讓瀏覽器理解我們的意圖呢,今天的主角 requestAnimationFrame ,這個(gè)任務(wù)就交給它來完成。 requestAnimationFrame 會告訴瀏覽器--你需要執(zhí)行一個(gè)動畫，并要求在下一次重繪前調(diào)用指定的回調(diào)函數(shù)更新動畫。也就是 requestAnimationFrame 需要傳入一個(gè)回調(diào)函數(shù)作為參數(shù)，這個(gè)函數(shù)會在瀏覽器下一次重繪之前執(zhí)行。這個(gè)機(jī)制可以用花費(fèi)最短的時(shí)間讓瀏覽器理解我們需要重新播放動畫的意圖。

當(dāng)然 requestAnimationFrame 只是其中的一步，我們還需要再加上個(gè)小技巧-- 分離動畫樣式 .

關(guān)鍵代碼

<template>
    <div class="page-animate">
        <button @click="handleAnimate">開始動畫</button>
        <div class="rabbit-box">
            <div class="rabbit" ref="rabbit"></div>
        </div>
    </div>
</template>

<script>
  export default {
    name: "animate",
    methods: {
      handleAnimate() {
        let $rabbit = this.$refs.rabbit;
        $rabbit.classList.remove('animated');
        window.requestAnimationFrame(()=> {
          window.requestAnimationFrame(()=>{
            $rabbit.classList.add('animated');
          })
        })
      }
    }
  }
</script>

<style lang="less">
.page-animate {
    .rabbit-box {
        margin-top: 10px;
        width: 100px;
        height: 100px;
        background:#e2b29f;
        font-size:120%;
        padding: 100px;
        border-radius: 50%;
    }

    .rabbit {
        width:5em;
        height:3em;
        background:#ffffff;
        border-radius:70% 90% 60% 50%;
        position:relative;
        box-shadow: -0.2em 1em 0 -0.75em #b78e81;
        transform:rotate(0deg) translate(-2em,0);
        z-index:1;
        .no-flexbox & {margin:10em auto 0;}
        //tail, eye, feet
        &:before {
            content:"";
            position:absolute;
            width:1em;
            height:1em;
            background:white; // tail
            border-radius:100%;
            top:0.5em;
            left:-0.3em;
            box-shadow:
                    4em 0.4em 0 -0.35em #3f3334, // eye
                    0.5em 1em 0 white, // back foot
                    4em 1em 0 -0.3em white, // front foot
                    4em 1em 0 -0.3em white,
                    4em 1em 0 -0.4em white;;
        }
        // ears
        &:after {
            content:"";
            position:absolute;
            width:.75em;
            height:2em;
            background:white;
            border-radius:50% 100% 0 0;
            transform:rotate(-30deg);
            right:1em;
            top:-1em;
            border-top:1px solid #f7f5f4;
            border-left: 1px solid #f7f5f4;
            box-shadow:-0.5em 0em 0 -0.1em white;
        }
        &.animated {
            animation: hop 1s linear;
            &:before {
                animation: kick 1s linear;
            }
        }
    }

    @keyframes hop {
        20% {
        transform:rotate(-10deg) translate(1em,-2em);
            box-shadow: -0.2em 3em 0 -1em #b78e81;
        }
        40% {
        transform:rotate(10deg) translate(3em,-4em);
            box-shadow: -0.2em 3.25em 0 -1.1em #b78e81;
        }
        60%,75% {
        transform:rotate(0) translate(4em,0);
            box-shadow: -0.2em 1em 0 -0.75em #b78e81;
        }
    }



    @keyframes kick {
        20%,50% {
            box-shadow:
                    4em 0.4em 0 -0.35em #3f3334,
                    0.5em 1.5em 0 white,
                    4em 1.75em 0 -0.3em white,
                    4em 1.75em 0 -0.3em white,
                    4em 1.9em 0 -0.4em white;
        }
        40% {
            box-shadow:
                    4em 0.4em 0 -0.35em #3f3334,
                    0.5em 2em 0 white,
                    4em 1.75em 0 -0.3em white,
                    4.2em 1.75em 0 -0.2em white,
                    4.4em 1.9em 0 -0.2em white;
        }
    }
}
</style>

效果:

:grin:為了生動形象一些,特地找了個(gè)兔子的CSS動畫。css類 .rabbit 中只定義了兔子的外觀，沒有定義動畫相關(guān)的信息。我們把動畫相關(guān)的信息都放到了 .animated 類中。

demo傳送

handleAnimate 函數(shù)是我們的關(guān)鍵部分:

$rabbit.classList.remove('animated') 的作用是每次點(diǎn)擊按鈕的時(shí)候刪除動畫效果。
requestAnimationFrame 這里用到了兩次,而且是嵌套著使用，為何要如此呢？其實(shí)也好理解,有個(gè)細(xì)節(jié)--刪除Dom元素的class類后,只有在樣式重新計(jì)算后才會生效，也就是要等到下一次重繪。而 requestAnimationFrame 注冊的回調(diào)函數(shù)是下一次重繪前，所以我們需要調(diào)用兩次，相當(dāng)于在中間插入了一個(gè)空隙專門用來讓刪除動畫效果生效，然后緊接著下一次重繪重新觸發(fā)動畫。

總結(jié)

javascript 相對css更適合用來控制動畫，動畫的觸發(fā)機(jī)制和瀏覽器渲染機(jī)制相關(guān)。

參考

MDN

總結(jié)

以上所述是小編給大家介紹的CSS3動畫之利用requestAnimationFrame觸發(fā)重新播放功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！