用慣了jquery的同學,相信都很欣賞其動畫引擎。確實相對比較完善!如果,如果想像力夠豐富的話,相信可以做出超乎想像的效果。當然,跟2d庫比起來,還是相差相當一段距離。 jquery壓根也不是專門為動畫而設計的。模擬真實世界方面,還是不足的。但在web世界裡還是游刃有餘的。動畫其實一直是flash的專屬領地(web區哉)。只是它常常淪為駭客攻擊的漏洞所在,而且要裝插件,有時候文件實在太大,而且性耗實在是高啊。 html5出現後,其實adobe自己都轉移陣地到html5了。當然,我覺得很長一段時間內,flash是不會被放棄的。
長話短說,步入正題。仿照flash的動畫原理,自己寫了一個很簡單的js動畫引擎。
首先,用過flash的同學都知道。 flash有個時間線,上面佈滿了「幀」。其實每個畫面都是一個鏡頭,鏡頭連貫起來就是一副動畫效果。其實,這跟電影的原理也是一樣的,小時候玩過底片的都知道,對著光可以看到一副副的鏡頭。人眼分辨兩個畫面的連貫性是有時間限度的。如果想看不到兩個畫面變換時的閃爍大概30格/秒左右,影片是24格的。所以,如果能保證,動畫切換能保證每秒30次,基本上,就做到了動畫的流暢效果,但這取決環境。所以具體情況,具體而定,其實關於這方面的知識我也是一知半解。就這個動畫引擎而言,了解這麼多也差不多足夠了,有興趣可以找到相關知識!
下面開始說說設計原理。
首先需要一個幀頻,也就是多少幀每秒。如果有了總用時,就可以計算出整個動畫下來有多少個「畫面」(總幀數)。這種設計,顯然有個不足的地方,不能保證時間剛好是個整數幀。除非1ms一幀。這是一個網友提出來的,我覺得不好就沒有採用。所以這個引擎是有時間誤差的。有了總幀數,當動畫運行到最後一幀的時候,整個動畫也就播放完。如果需要重複播放,重新把目前影格歸0。這種動畫有一個好處,就可以直接運行到指定畫面。也就是flash裡的gotoAndStop和gotoAndPlay。其實整個動畫設計原理都是照著flash實現的。包括一個很重要的方法:enterFrame。位置是根據進入當前幀來計算的。還有其它一些方法:stop、play、next......等等因為目前來說,這個引擎是寫非常簡單和粗糙的,先不說這麼詳細了。下面先上程式碼和範例吧!
animate.js 動畫核心
animation.prototype = {
fps: 36,
init: function(props, duration, tween) {
//console.log('初始化');
this.curframe = 0;
this.initstate = {};
this.props = props;
this.duration = duration || 1000;
this.tween = tween || function(t, b, c, d) {
return t * c / d + b;
};
this.frames = Math.ceil(this.duration * this.fps/1000);
for (var prop in this.props) {
this.initstate[prop] = {
from: parseFloat($util.dom.getStyle(this.obj, prop)),
to: parseFloat(this.props[prop])
};
}
},
start: function() {
if (!this.running && this.hasNext()) {
//console.log('可以执行...');
this.ms.shift().call(this)
}
return this;
},
//开始播放
play: function(callback) {
//console.log('开始动画!');
var that = this;
this.running = true;
if (this.timmer) {
this.stop();
}
this.timmer = setInterval(function() {
if (that.complete()) {
that.stop();
that.running = false;
if (callback) {
callback.call(that);
}
return;
}
that.curframe++;
that.enterFrame.call(that);
},
/ this.fps);
return this;
},
// 停止动画
stop: function() {
//console.log('结束动画!');
if (this.timmer) {
clearInterval(this.timmer);
// 清除掉timmer id
this.timmer = undefined;
}
},
go: function(props,uration, tween) {
var that = this.ms.push(function() {
that.init.call(that、props、duration、tween);
返回此;
},
// 平滑一格
next: function() {
this.stop();
this.stop();
this.stop();
this.curframe >;這個.frames this.frames: this.curframe;
this.enterFrame.call(this);
},
//向前一幀
prev: function() {
this.stop ( );
this.curframe--;
this.curframe = this.curframe this.enterFrame.call(this);
},
// this. stop ();
this.curframe = frame;
this.play.call(this); this.stop();
this.curframe = frame;
🎜> EnterFrame: function ( ) {
//console.log('進入影格:' this.curframe)
var ds; ds = this.tween(this.curframe, this.initstate[prop]['from'], this.initstate[p][ ] - this.initstate[prop]['from'], this.frames).toFixed(2);
//console.log(prop ':' ds) . obj, prop, ds)
}
},
//動畫結束
🎜> },
hasNext: function() {
return this.ms.length >; 0;
}
}
以下是一個簡單的工具,其中有一些有用的緩動公式:
util.js
複製程式碼
程式碼如下:
//complete version
ver: null
};
// 浏览器
var browser = {
//browsers
ie: 0,
firefox: 0,
safari: 0,
konq: 0,
opera: 0,
chrome: 0,
//specific version
ver: null
};
// 客户端平台platform/device/OS
var system = {
win: false,
mac: false,
x11: false,
//移动设备
iphone: false,
ipod: false,
ipad: false,
ios: false,
android: false,
nokiaN: false,
winMobile: false,
//game systems
wii: false,
ps: false
};
// 偵測瀏覽器引擎
var ua = navigator.userAgent;
if (window.opera){
engine.ver = browser.ver = window .a.); = parseFloat(engine.ver);
} else if (/AppleWebKit/(S )/.test(ua)){
engine.ver = RegExp["$1"]; //判斷為Chrome 或Safari
browser.ver = RegExp["$1"];
browser.chrome = parseFloat (browser.ver);
} else if (/Version/(S )/.test(ua)){
browser.safari = parseFloat( browser.ver);
} else {
= 1;
if (engine.webkit
100){
} else if (engine.webkit safari 412){
safariVersion = 1.3;
safariVersion = 2;
}
}
} else if (/KHTML/(S )/.test(ua) engine.ver = browser .ver = RegExp["$1"];
engine.khtml = browser.konq = parseFloat(engine. engine.khtml = browser.konq = parseFloat(engine. );
: }/.test(ua)){
engine.ver = RegExp["$1"];
// 判斷是否為Firefox
if (/Firefox/(S )/.test(ua)){
browser.firefox = parseFloat(browser.ver);
}
} else if (/MSIE ([^;] )/.test(ua)){
engine.ie = 瀏覽器。
//detect browsers
browser.ie = engine.ie;
browser.opera = engine.opera;
//detect platform
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
//偵測Windows 作業系統
if (system.win){
){
.test(ua)){
if (RegExp["$1"] == "NT"){
🎜> case "5.0":
.win = "2000";
中斷;
案例"5.1":
system.win = "XP";
中斷;
case "6.0":
system.win = "Vista";
.1":
中斷;
system.win = "NT";
的休息; } } 系統。 win = "ME";
} else {
}
}
> system.iphone = ua.indexOf("iPhone") >; -1;
system.ipod = ua.index ") > -1;
system.nokiaN = ua.indexOf("NokiaN") > -1;
system.winMobile = system.win;
} else if (system.win == "Ph"){
if(/Windows Phone OS (\d+.\d+)/.test(ua)){;
system.win = "Phone";
system.winMobile = parseFloat(RegExp["$1"]);
}
}
//determine iOS version
if (system.mac && ua.indexOf("Mobile") > -1){
if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)){
system.ios = parseFloat(RegExp.$1.replace("_", "."));
} else {
system.ios = 2; //can't really detect - so guess
}
}
//determine Android version
if (/Android (\d+\.\d+)/.test(ua)){
system.android = parseFloat(RegExp.$1);
}
//gaming systems
system.wii = ua.indexOf("Wii") > -1;
system.ps = /playstation/i.test(ua);
//return it
return {
engine: engine,
browser: browser,
system: system
};
}(),
/**
*Tween 緩動相關性
*/
補間:{
/ d b ;
},
四邊形:{
return c * (t /= d) * t b;
},
easeOut: function(t, b, c, d) {
return - c * (t /= d) * (t - 2) b; if ((t /= d / 2) }
},
},
},
c, d) {
return c * (t /= d) * t * t b;
},
t = t / d - 1) * t * t 1) b;
},
easeInOut: function(t, b, c, 2) return c / 2 * ((t -= 2) * t * t 2) b;
Quart: {
easyIn: function(t, b, 、c、 d){
回傳c *(t /= d) * t * t * t * t b;
> sieleout:function(t,b,b,c,d){回傳-c * ((t = t / d - 1) * t * t * t - 1) b;
},
},
},
> if ((t / = d/2) - 2) b;
}
},
c, d) {
return c * (t /= d) * t * t * t * t b;
},
c * ((t = t / d - 1) * t * t * t * t 1) b;
},
easeInOut: function(t, b, c, d) {
🎜 > return c / 2 * ((t -= 2) * t * t * t * t 2) b;
正弦:{
easyIn :函數(t , b , c, d) {
return - c * Math.cos(t / d * (Math.PI / 2)) c b easeOut: function(t, b, c, d ) {
return c * Math.sin(t / d * (Math.PI / 2)) b;
escapeInOut: function(t, b, c, d) {
return - c / 2 * (Math.cos(Math.PI * t / d) - 1) b;
}
easyIn: function(t, b , c, d) {
返回(t == 0) ? b: c * Math.pow(2, 10 * (t / d - 1)) b;
},
},
},
},
return (t = = d) ? b c: c * ( - Math.pow(2, -10 * t / d) 1) b;
},
},
},
},
if (t == 0) return b;
if (t == d) return b c;
ow(2, 10 * ( t - 1)) b;
return c / 2 * ( - Math.pow(2, -10 * --t) 2) b ,
循環: {
easeIn: function(t, b, c, d) {
},
easeOut: function(t, b, c, d) {
},
escapeInOut :函數(t, b, c, d) {
if ((t /= d / 2) return c / 2 * (Math.sqrt(1 - (t -= 2) * t) 1) b; 彈性: {
easeIn: function(t, b, c, d, a, p 𠟠)> 🎜> if ((t /= d ) == 1) return b c;
if (!p) p = d * .3;
a = c;
var s = p / 4;
🎜> 則 - (a * Math.pow(2 ) ) , 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) b;
t , b, c, d, a, p) {
if (t == 0) return b;
if (! p ) p = d * .3;
if (!a || a var s = p / 4;
} 其他變數s = p / (2 * Math.PI) * Math.asin(c / a);
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - -sin s) ) ) * (2 * Math.PI) / p) c b);
},
if (t = = 0 ) return b;
if ( !a |一個 a = c;
} else var s = p / (2 * Math.PI) * Math .asin (c / a );
if (t return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * ( 2 * 數學.PI) / p) * .5 c b;
}
easyIn: 函數(t, b, c, d, s) {
if ( s ==未定義) s = 1.70158;
return c * (t /= ,
easeOut: function(t, b, c, d, s) {
return c * ((t = t / d - 1) * t * ((s 1) * t s) 1) b;
},
if (s == undefined) s = 1.70158 ;
if ((t /= d / 2) }
}
🎜> lisein:函數(t,b,c,d){
> if(((t / = d)<(1 / 2.75)){
返回c *(7.5625 * t * t * t)b;
} else if (t , } else if (t return c * (7.5625 * (t - } else {
返回 c *(7.5625 * (t - = (2.625 / 2.75)) * t .984375) b;
}
} 若(t /且為 0,5,Bounce.easeOut(t * 2 - d * 5, d * .5 b;
}
}
}
}
下面是個應用:
複製程式碼