原理就是時(shí)時(shí)刻刻改變他的position。

1.JS逐幀動(dòng)畫

JS就是調(diào)用定時(shí)器，這邊有一個(gè)小技巧：直接改變一個(gè)經(jīng)測(cè)試會(huì)有閃爍的情況，再加一個(gè)重疊替換運(yùn)動(dòng)

每次改變位置，效率不高。簡(jiǎn)單封裝了一段JS插件

;(function($) { 'use strict'; $.extend($.fn, { requestAnimFrame: function(opt){ var defined = { top:0, left:0, position:'absolute' }, option = $.extend(defined, opt), i = 0, flag = false, curAnim = null, self = this, width = 0, isRunning = false, maybeAddPx = function (value) { return (typeof value == "number") ? value + "px" : value; }, /** * 標(biāo)準(zhǔn)化requestAnimFrame * @param {[type]} ){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })( [description] * @return {[type]} [description] */ requestAnimationFrame = (function(){ if(option.time) { return function( callback ){ window.setTimeout(option.time); }; } return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(), //添加兩張圖，解決一輪動(dòng)畫結(jié)束閃屏問題 anim_1 = $('
', { css : { background : 'url(' + option.url + ') no-repeat scroll 0px 0px transparent' } }), anim_2 = anim_1.clone(), init = function() { self.append(anim_1).append(anim_2).css('position', 'relative'); }, width = option.length / option.step, go = function() { if (i > step) { i = 0; } flag ? (curAnim = anim_1) : (curAnim = anim_2); flag = !flag; curAnim[0].style.backgroundPosition = "-" + i * width + "px 0px"; //使用Zepto方法會(huì)閃動(dòng)，具體看博文：http://www.hacke2.cn/anmi-strange-problem/ //curAnim.css('background-position' , '-' + i * 75 + 'px 0px') self.append(curAnim); i++; console.log(isRunning) isRunning && requestAnimationFrame(go) }; init(); return { run : function() { isRunning = true; requestAnimationFrame(go); }, stop : function() { isRunning = false; }, isRunning : function() { return isRunning; } }; } }) })(Zepto);

調(diào)用的時(shí)候這樣調(diào)用:

var ra = scope.find('#divParent').requestAnimFrame({ step : 80, url : 'img/1-slow.png', length : 6000, time : 12 }); ra.run();

自己完成兩個(gè)DOM的COPY，html結(jié)果如下：

提供了幾個(gè)接口：run、stop、isRunning

2.CSS3逐幀動(dòng)畫

CSS3方式實(shí)現(xiàn)當(dāng)時(shí)比用JS效率高很多，許多優(yōu)化在瀏覽器底層完成。之前為什么不用有兩點(diǎn)考慮：

1.兼容性

2.每一幀都要手動(dòng)去寫

但是在移動(dòng)端CSS3已經(jīng)支持很好了，但每一幀都得自己寫太痛苦，還好在一篇博客看到有一個(gè)step函數(shù)供我們調(diào)用 https://idiotwu.me/css3-running-animation/。我們將它整合一下：

怎么樣，是不是很簡(jiǎn)單，中間的幀數(shù)讓瀏覽器給我們計(jì)算就可以了。