前端學習(八十七) DOM-動畫(Dom)
阿新 • • 發佈:2018-12-28
動畫
單位時間內產生連續的動作,產生的視覺錯覺
setTimeout / setInterval
大致就是
<div> <div class="move-red" id="moveRed"></div> <input type="button" value="開始" id="start"> <input type="button" value="結束" id="end"> </div> <script> (function(params) { var start = document.getElementById('start'), end = document.getElementById('end'), div = document.getElementById('moveRed'), index = 0; var timer; start.addEventListener('click',function (params) { timer = setInterval(function() { console.log('start'); div.style.left = (++index)*2+'px'; },50) }) end.addEventListener('click',function(params) { clearInterval(timer); }) })();
var timer = window.requestAnimationFrame(callback)
callback:觸發時當前的那個時間
清除
window.cancelAinmationFrame(timer)
<div> <div class="move-red" id="moveRed"></div> <input type="button" value="開始" id="start"> </div> <script> (function(params) { var start = document.getElementById('start'), end = document.getElementById('end'), div = document.getElementById('moveRed'), index = 0; var timer; start.addEventListener('click',function (params) { timer=requestAnimationFrame(function fn(params) { console.log('start'); div.style.left = (++index)*2+'px'; requestAnimationFrame(fn) }) }) })();
由於requestAnimationFrame是在主執行緒上完成,意味著如果主執行緒繁忙,則效果會大打折扣
動畫曲線
具體每條曲線規則檢視:https://easings.net/zh-cn#,其實大部分都可以通過css3完成了