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

css動(dòng)畫
css3中引入了animation模塊,自此css動(dòng)畫進(jìn)入了我們的視野。css動(dòng)畫名符其實(shí),會(huì)寫css樣式就可以創(chuàng)作動(dòng)畫,對(duì)一些不怎么會(huì)JS的設(shè)計(jì)師也是比較包容的。但也正因?yàn)槿绱?,?dāng)你需要重新播放或者說手動(dòng)觸發(fā)動(dòng)畫時(shí),css的局限性就突顯出來了,畢竟它不是一門編程語言。像這種在頁面中創(chuàng)建一個(gè)按鈕,點(diǎn)擊按鈕時(shí)開始播放一段動(dòng)畫這種活交給JS才是最合適的。
原理和思路
重新播放css動(dòng)畫,我們只需要將CSS動(dòng)畫效果 刪除 ,然后再 重新加上 css動(dòng)畫效果即可。那么如何讓瀏覽器理解我們的意圖呢,今天的主角 requestAnimationFrame
,這個(gè)任務(wù)就交給它來完成。 requestAnimationFrame
會(huì)告訴瀏覽器--你需要執(zhí)行一個(gè)動(dòng)畫,并要求在下一次重繪前調(diào)用指定的回調(diào)函數(shù)更新動(dòng)畫。也就是 requestAnimationFrame
需要傳入一個(gè)回調(diào)函數(shù)作為參數(shù),這個(gè)函數(shù)會(huì)在瀏覽器下一次重繪之前執(zhí)行。 這個(gè)機(jī)制可以用花費(fèi)最短的時(shí)間讓瀏覽器理解我們需要重新播放動(dòng)畫的意圖。
當(dāng)然 requestAnimationFrame
只是其中的一步,我們還需要再加上個(gè)小技巧-- 分離動(dòng)畫樣式 .
關(guān)鍵代碼
<template> <div class="page-animate"> <button @click="handleAnimate">開始動(dòng)畫</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:為了生動(dòng)形象一些,特地找了個(gè)兔子的CSS動(dòng)畫。css類 .rabbit 中只定義了兔子的外觀,沒有定義動(dòng)畫相關(guān)的信息。我們把動(dòng)畫相關(guān)的信息都放到了 .animated 類中。
handleAnimate 函數(shù)是我們的關(guān)鍵部分:
- $rabbit.classList.remove('animated') 的作用是每次點(diǎn)擊按鈕的時(shí)候刪除動(dòng)畫效果。
- requestAnimationFrame 這里用到了兩次,而且是嵌套著使用,為何要如此呢?其實(shí)也好理解,有個(gè)細(xì)節(jié)--刪除Dom元素的class類后,只有在樣式重新計(jì)算后才會(huì)生效,也就是要等到下一次重繪。而 requestAnimationFrame 注冊(cè)的回調(diào)函數(shù)是下一次重繪前,所以我們需要調(diào)用兩次,相當(dāng)于在中間插入了一個(gè)空隙專門用來讓刪除動(dòng)畫效果生效,然后緊接著下一次重繪重新觸發(fā)動(dòng)畫。
總結(jié)
javascript 相對(duì)css更適合用來控制動(dòng)畫,動(dòng)畫的觸發(fā)機(jī)制和瀏覽器渲染機(jī)制相關(guān)。
參考
總結(jié)
以上所述是小編給大家介紹的CSS3動(dòng)畫之利用requestAnimationFrame觸發(fā)重新播放功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
CSS3 animation – steps 函數(shù)詳解
本文通過實(shí)例代碼給大家介紹了CSS3 animation – steps 函數(shù),代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2019-08-30css3中用animation的steps屬性制作幀動(dòng)畫
這篇文章主要介紹了css中用animation的steps屬性制作幀動(dòng)畫,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-25- 本篇介紹的animation屬性和傳統(tǒng)的動(dòng)畫制作一樣,能控制幀的每一步,制作出更強(qiáng)大的動(dòng)畫效果。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看2018-12-25
css3的動(dòng)畫特效之動(dòng)畫序列(animation)
這篇文章主要介紹了css3的動(dòng)畫特效之動(dòng)畫序列(animation) 的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-22- 這篇文章主要為大家詳細(xì)介紹了CSS3中Animation動(dòng)畫屬性用法,教大家如何使用animation動(dòng)畫,感興趣的小伙伴們可以參考一下2016-07-04
CSS3中animation實(shí)現(xiàn)流光按鈕效果
這篇文章主要介紹了CSS3中animation實(shí)現(xiàn)流光按鈕效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-21