Sebelum munculnya REVERSANIMATIONFRAME, kami biasanya menggunakan SetTimeout dan SetInterval, jadi mengapa HTML5 menambahkan REVERINGANIMATIONFRAME baru?
Keuntungan dan Karakteristik:1) RequestanimationFrame akan memusatkan semua operasi DOM di setiap bingkai, menyelesaikannya dalam satu penulisan ulang atau pengembalian, dan interval waktu untuk melatih atau kembali dengan cermat mengikuti frekuensi penyegaran browser.
2) Dalam elemen yang tersembunyi atau tidak terlihat, REAMANDANIMATIONFRame tidak akan kembali atau kembali, yang berarti bahwa ada lebih sedikit CPU, GPU, dan penggunaan memori.
3) RequestanimationFrame adalah API yang disediakan oleh browser khusus untuk animasi.
Singkatnya, hal ini tinggi dan tidak akan macet, dan frame rate secara otomatis disesuaikan sesuai dengan browser yang berbeda. Jika Anda tidak mengerti atau mengerti, itu tidak masalah. Mari belajar menggunakannya terlebih dahulu!
Bagaimana cara menggunakan requestanimationframe?
Cara penggunaannya mirip dengan pengaturan timer.
var timer = requestAnimationFrame (function () {console.log ('kode timer');});});Parameter adalah fungsi panggilan balik, dan nilai pengembalian adalah integer, yang digunakan untuk mewakili jumlah timer.
<! uaa -compatible content = ie = edge> <itement> dokumen </iteme> <script> window.onload = function () {var ainput = document.queeryselectollll (input), timer = null; () {Timer = requestAnimationFrame (function katakan () {console.log (1); timer = requestAnimationFrame (katakan);};}; input [1] .onClick = function () {can clanimationframe (timer);}} < /script> </head> <body> <input type = nilai tombol = open> <input type = nilai tombol = tertutup> </body> </html>CancelanimationFrame digunakan untuk mematikan timer
Metode ini harus kompatibel:
Kompatibilitas Sederhana:
Window.requestanImframe = (function () {return window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimation || function (callback) {window.settimeut (callback, 1000 /60);};});Jika browser tidak tahu AnimationFrame, gunakan kompatibilitas SetTimeout.
Gunakan 3 timer yang berbeda (SetTimeout, SetInterval, RequestanimationFrame) untuk mencapai pemuatan bilah kemajuan
1. Metode SetInterval: <! UAA -Compatible Content = IE = Edge> <Title> Dokumen </title> <wertion> Div {width: 0px; 30px /40px 'Microsoft Yahei'; null, curwidth = 0, getstyle = function (obj, name, value) {if (obj.currentstyle) {return obj.currenttenle [name];} else {retcomputedstyle (obj, obj, false) [name];}}; OBSTN 1000) {Obox. <p> <input type = nilai tombol = siap! Kedua, metode setTimeout <script> window.onload = function () {var obtn = document.queryselector (input), obox = document.queryselector (div), timer = null, getSty le = fungsi (obj, name, value) {if (obj. CurrenStyle) {return obj.currentstyle [name];} else {return getComputedstyle (obj, false) [name];}; ; Timer = setTimeout (function go () {curwidth = parseInt (getStyle (obox, 'width')); if (curwidth <1000) {obox. Style.width = obox.Offset Lebar + 10 + 'px'; obox. Inerhtml = parseInt (getStyle (OBOX, 'width')) /10 + '%'; skrip> 3. Metode RequestanimationFrame <! UAA -Compatible Content = IE = Edge> <Title> Dokumen </title> <wertion> Div {width: 0px; 30px /40px 'Microsoft Yahei'; null, curwidth = 0, getstyle = function (obj, name, value) {if (obj.currentstyle) {return obj.currenttenle [name];} else {retcomputedstyle (obj, obj, false) [name];}}; ONCHN .OffsetWidth + 10 + 'px'; e (go);} else {cancelanimationframe (timer);}});} </script> </head> <diver> <veT> 0%</div> <p > <input type = nilai tombol = siap!