css動畫
css3中引入了animation模塊,自此css動畫進入了我們的視野。css動畫名符其實,會寫css樣式就可以創作動畫，對一些不怎么會JS的設計師也是比較包容的。但也正因為如此，當你需要重新播放或者說手動觸發動畫時，css的局限性就突顯出來了，畢竟它不是一門編程語言。像這種在頁面中創建一個按鈕，點擊按鈕時開始播放一段動畫這種活交給JS才是最合適的。
原理和思路
重新播放css動畫,我們只需要將CSS動畫效果 刪除 ，然后再 重新加上 css動畫效果即可。那么如何讓瀏覽器理解我們的意圖呢,今天的主角 requestAnimationFrame ,這個任務就交給它來完成。 requestAnimationFrame 會告訴瀏覽器--你需要執行一個動畫，并要求在下一次重繪前調用指定的回調函數更新動畫。也就是 requestAnimationFrame 需要傳入一個回調函數作為參數，這個函數會在瀏覽器下一次重繪之前執行。 這個機制可以用花費最短的時間讓瀏覽器理解我們需要重新播放動畫的意圖。
當然 requestAnimationFrame 只是其中的一步，我們還需要再加上個小技巧-- 分離動畫樣式 .
關鍵代碼
<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:為了生動形象一些,特地找了個兔子的CSS動畫。css類 .rabbit 中只定義了兔子的外觀，沒有定義動畫相關的信息。我們把動畫相關的信息都放到了 .animated 類中。
demo傳送
handleAnimate 函數是我們的關鍵部分:
總結
javascript 相對css更適合用來控制動畫，動畫的觸發機制和瀏覽器渲染機制相關。
參考
MDN
總結
以上所述是小編給大家介紹的CSS3動畫之利用requestAnimationFrame觸發重新播放功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
