js 애니메이션(animate) 간단한 엔진 코드 example_javascript 기술
- WBOY원래의
- 2016-05-16 17:47:201661검색
jquery에 익숙한 학생들은 모두 jquery의 애니메이션 엔진을 높이 평가한다고 생각합니다. 정말 비교적 완벽합니다! 상상력이 풍부하다면 상상 이상의 효과를 얻을 수 있다고 믿습니다. 물론 2D 라이브러리와 비교하면 아직은 한참 뒤떨어져 있습니다. jQuery는 애니메이션용으로 특별히 설계되지 않았습니다. 현실 세계를 시뮬레이션하는 측면에서는 아직 부족합니다. 하지만 나는 여전히 웹 세계가 편하다. 실제로 애니메이션은 항상 플래시의 독점적인 영역이었습니다(웹 영역에서만). 단지 해커들이 공격할 수 있는 허점이 되는 경우가 많고, 때로는 파일이 너무 커서 성능 소모가 정말 높을 때도 있습니다. HTML5가 등장한 후 Adobe 자체는 실제로 HTML5로 위치를 옮겼습니다. 물론, 플래시를 오랫동안 버리지 않을 것이라고 생각합니다.
긴 이야기를 짧게 하기 위해 요점만 말씀드리겠습니다. 플래시의 애니메이션 원리에 따라 매우 간단한 js 애니메이션 엔진을 작성했습니다.
우선 플래시를 써본 학생들은 다 알잖아요. Flash에는 "프레임"으로 가득 찬 타임라인이 있습니다. 실제로 각 프레임은 샷이고, 샷이 서로 연결되어 애니메이션 효과를 만들어냅니다. 사실 이것은 영화의 원리와 동일합니다. 어렸을 때 영화를 가지고 놀았던 사람이라면 렌즈를 빛에 대면 볼 수 있다는 것을 알 것입니다. 인간의 눈이 두 이미지의 연속성을 구별하는 데에는 시간 제한이 있습니다. 두 이미지가 바뀔 때 깜박이는 것을 보고 싶지 않다면 초당 30 프레임 정도이고 동영상은 24 프레임입니다. 따라서 초당 30회 애니메이션 전환이 보장될 수 있다면 기본적으로는 부드러운 애니메이션 효과를 얻을 수 있겠지만 이는 환경에 따라 다르다. 그래서 구체적인 상황에 따라 다릅니다. 사실 저는 이 부분에 대해 잘 모릅니다. 이 애니메이션 엔진에 관해서는 이 정도만 알아도 충분할 것 같습니다. 관심이 있으시면 관련 지식을 찾아보시면 됩니다!
디자인 원칙부터 시작해 보겠습니다.
먼저 초당 프레임 수를 나타내는 프레임 속도가 필요합니다. 총 시간이 있으면 전체 애니메이션에 몇 개의 "그림"(총 프레임 수)이 있는지 계산할 수 있습니다. 이 디자인에는 분명히 단점이 있습니다. 시간이 정확히 정수 프레임임을 보장할 수는 없습니다. 한 프레임이 1ms가 아닌 이상. 한 네티즌이 제안한 내용이지만 마음에 들지 않아 채택하지 않았습니다. 그래서 이 엔진에는 시간 오류가 있습니다. 총 프레임 수로 애니메이션이 마지막 프레임에 도달하면 전체 애니메이션이 재생됩니다. 반복 재생이 필요한 경우 현재 프레임을 0으로 재설정하세요. 이러한 종류의 애니메이션은 지정된 프레임으로 직접 실행할 수 있다는 장점이 있습니다. 그것은 플래시의 gotoAndStop 및 gotoAndPlay입니다. 실제로 전체 애니메이션 디자인 원리는 플래시에 따라 구현됩니다. 매우 중요한 메소드인 enterFrame이 포함되어 있습니다. 위치는 현재 프레임 입력을 기준으로 계산됩니다. 다른 방법도 있습니다: 중지, 재생, 다음 등. 현재 이 엔진은 작성하기가 매우 간단하고 거칠기 때문에 자세한 내용은 다루지 않겠습니다. 코드와 예제부터 시작해 보겠습니다!
animate.js 애니메이션 코어
var animation = function(obj) {
this.obj = obj;
this.frames = 0;
this.timmer = undefined;
this.running = false;
this.ms = [];
}
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, Duration, tween) {
var that = this;
//console.log(tween)
this.ms.push(function() {
that.init.call(that, props, Duration, tween);
that.play.call(that, that.start);
});
return this;
},
//向后一帧
다음: function() {
this.stop();
this.curframe ;
this.curframe = this.curframe > this.frames ? this.frames: this.curframe;
this.enterFrame.call(this);
},
//向前一帧
prev: function() {
this.stop( );
this.curframe--;
this.curframe = this.curframe < 0? 0 : this.curframe;
this.enterFrame.call(this);
},
//跳跃到指定帧并播放
gotoAndPlay: function(frame) {
this.stop {
this.stop();
this.curframe = 프레임;
this.enterFrame.call(this);
},
//进入帧动작
enterFrame: function( ) {
//console.log('进入帧：' this.curframe)
var ds;
for (var prop in this.initstate) {
//console.log('from : ' this.initstate[prop]['from'])
ds = this.tween(this.curframe, this.initstate[prop]['from'], this.initstate[prop]['to'] - this.initstate[prop]['from'], this.frames).toFixed(2);
//console.log(prop ':' ds)
$util.dom.setStyle(this. obj, prop, ds)
}
},
//动画结束
완료: function() {
return this.curframe >= this.frames;
},
hasNext: function() {
return this.ms.length > 0;
}
}
下면是一个简单的工具,其中有所用到的缓动公式：
util.js
复主代码
$util = {
/**
* 유형 감지
*/
유형 : function(obj){
var rep = /[객체(w )]/i;
var str = Object.prototype.toString.call(obj).toLowerCase();
str.match(rep);
return RegExp.$1;
},
/**
* 전체 복사
*/
$unlink :function (객체){
var unlinked;
스위치 ($type(객체)){
케이스 '객체':
unlinked = {};
for (var p in object) {
unlinked[p] = $unlink(object[p]);
}
break;
'배열':
연결 해제됨 = [];
for (var i = 0, l = object.length; i < l; i ) {
unlinked[i] = $unlink(object[i]);
}
휴식;
기본값: 객체 반환;
}
연결 해제된 반환;
},
/**
*돔 관련 운영
*/
dom:{
$: 함수(id) {
return document.getElementById(id);
},
getStyle: function(obj, prop) {
var style = obj.currentStyle || window.getCompulatedStyle(obj, '');
if (obj.style.filter) {
return obj.style.filter.match(/d /g)[0];
}
return style[prop];
},
setStyle: function(obj, prop, val) {
스위치(prop) {
케이스 '불투명도':
if($util.client .browser.ie){
obj.style.filter = 'alpha(' prop '=' val*100 ')'
}else{
obj.style[prop] = val;
}
break;
기본값:
obj.style[prop] = val 'px';
break;
}
},
setStyles: function(obj, props) {
for (props의 var prop) {
스위치(prop) {
케이스 '불투명도':<> if($util.client. browser.ie){
obj.style.filter = 'alpha(' prop '=' props[prop] ')'
}else{
obj.style[prop] = 소품[prop];
}
break;
기본값:
obj.style[prop] = props[prop] 'px';
휴식;
}
}
}
},
/**
*이벤트 이벤트 관련
*/
evt : {
addEvent : function(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
o타겟. addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" sEventType, fnHandler);
} else {
oTarget["on" sEventType] = fnHandler;
}
},
rmEvent : function RemoveEventHandler (oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" sEventType, fnHandler);
} else { oTarget["on" sEventType] = null;
}
}
},
/**
*Ajax 비동기 로딩
*/
ajax : {
요청:함수(옵션) {
var xhr, res;
var url = options.url,
맥락 = options.context,
성공 = options.success,
type = options.type,
데이터 유형 =
async = options.async,
보내기 = options.send,
헤더 = options.headers;
시도 {
xhr = new XMLHttpRequest();
} catch(e ) {
시도해 보세요 {
xhr = new ActiveXObject(' MSXML2.XMLHTTP');
} catch(e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
}
xhr.onreadystatechange = 기능( ) {
if (xhr.readyState == 4 && xhr.status == 200) {
res = xhr.responseText;
성공(res);
}
}
xhr.open(type, url, async);
xhr.send(send);
}
},
/**
*어레이 어레이 관련
*/
배열 : {
minIndex : 함수(ary){
return Math.min.apply(null,ary);
},
최대 항목 : 함수(ary){
return Math.max.apply(null,ary);
}
},
/**
*Client 客户端检测
*/
client : function(){
// 浏览器渲染引擎 engines
var engine = {
ie: 0,
gecko: 0,
webkit: 0,
khtml: 0,
opera: 0,
//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.opera.version();
engine.opera = browser.opera =parseFloat(engine.ver);
} else if (/AppleWebKit/(S )/.test(ua)){
engine.ver = RegExp["$1"];
engine.webkit =parseFloat(engine.ver);
//Chrome인지 Safari인지 확인
if (/Chrome/(S )/.test(ua)){
browser.ver = RegExp["$1"];
browser.chrome =parseFloat(browser.ver);
} else if (/Version/(S )/.test(ua)){
browser.ver = RegExp["$1"];
browser.safari = parseFloat(browser.ver);
} else {
//대략적인 버전
var safariVersion = 1;
if (engine.webkit < 00){
safariVersion = 1;
} else if (engine.webkit < 312){
safariVersion = 1.2;
} else if (engine.webkit < 412){
safariVersion = 1.3;
} else {
safariVersion = 2;
}
browser.safari = browser.ver = safariVersion;
}
} else if (/KHTML/(S )/.test(ua) || /Konqueror/([^;] )/.test(ua)){
engine.ver = 브라우저 .ver = RegExp["$1"];
engine.khtml = browser.konq =parseFloat(engine.ver);
} else if (/rv:([^)] )) Gecko/d{8 }/.test(ua)){
engine.ver = RegExp["$1"];
engine.gecko =parseFloat(engine.ver);
//Firefox인지 확인
if (/Firefox/(S )/.test(ua)){
browser.ver = RegExp["$1"];
browser.firefox = parseFloat(browser.ver);<🜜> }
} else if (/MSIE ([^;] )/.test(ua)){
engine.ver = browser.ver = RegExp["$1"];
engine.ie = 브라우저. 즉 =parseFloat(engine.ver);
}
//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){
if (/Win(?:dows )?([^do]{2})s?(d .d )?/ .test(ua)){
if (RegExp["$1"] == "NT"){
스위치(RegExp["$2"]){
케이스 "5.0":
시스템 .win = "2000";
break;
사례 "5.1":
system.win = "XP" ;
break;
사례 "6.0":
system.win = "Vista";
break;
사례 "6.1":
system.win = "7";
break;
기본값:
system.win = "NT";
휴식;
}
} else if (RegExp["$1"] == "9x"){
시스템 .win = "ME";
} else {
system.win = RegExp[ "$1"];
}
}
}
//모바일 기기
system.iphone = ua.indexOf("iPhone") > -1;
system.ipod = ua.indexOf("iPod") > -1;
system.ipad = ua.indexOf("iPad") > -1;
system.nokiaN = ua.indexOf("NokiaN") > -1;
//windows mobile
if (system.win == "CE"){
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
};
}(),
/**
*트윈 완화 관련
*/
트윈: {
선형: 함수(t, b, c, d) {
return c * t / d b;
},
쿼드: {
easyIn: function(t, b, c, d) {
return c * (t /= d) * t b;
},
easyOut: 함수(t, b, c, d) {
return - c * (t /= d) * (t - 2) b;
},
easyInOut: 함수(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t b;
return - c / 2 * ((--t) * (t - 2) - 1) b;
}
},
큐빅: {
easyIn: function(t, b, c, d) {
return c * (t /= d) * t * t b;
},
easyOut: function(t, b, c, d) {
return c * ((t = t / d - 1) * t * t 1) b;
},
easyInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t b;
return c / 2 * ((t -= 2) * t * t 2) b;
}
},
쿼트: {
easyIn: function(t, b , 씨, d) {
return c * (t /= d) * t * t * t b;
},
easyOut: function(t, b, c, d) {
return - c * ((t = t / d - 1) * t * t * t - 1) b;
},
easyInOut: function(t, b, c, d) {
if ((t / = d / 2) < 1) 반환 c / 2 * t * t * t * t b;
반환 - c / 2 * ((t -= 2) * t * t * t - 2) b;
}
} ,
Quint: {
easyIn: function(t, b, c, d) {
return c * (t /= d) * t * t * t * t b;
},
easyOut: function(t, b, c, d) {
return c * ((t = t / d - 1) * t * t * t * t 1) b;
},
easyInOut: function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t b;
c / 2 * ((t -= 2) * t * t * t * t 2) b;
}
},
사인: {
: 함수(t, b, c, d) {
return - c * Math.cos(t / d * (Math.PI / 2)) c b;
},
easyOut: function(t, b, c, d) {
return c * Math.sin(t / d * (Math.PI / 2)) b;
},
easyInOut: function(t, b, c, d) {
return -c / 2 * (Math.cos (Math.pi * t / d) -1) b;
} <🎜}, <🎜 엑스포 : {
easein : function (t, b , c, d) {
반환(t == 0) ? b: c * Math.pow(2, 10 * (t / d - 1)) b;
},
easyOut: function(t, b, c, d) {
return (t = =디) ? b c: c * ( - Math.pow(2, -10 * t / d) 1) b;
},
easyInOut: function(t, b, c, d) {
if (t == 0) return b;
if (t == d) return b c;
if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) b;
반환 c / 2 * ( - Math.pow(2, -10 * --t) 2) b;
}
},
원: {
easyIn: function(t, b, c, d) {
return - c * (Math.sqrt(1 - (t /= d) * t) - 1) b;
},
easyOut: function(t, b, c, d) {
return c * Math.sqrt(1 - (t = t / d - 1) * t) b;
},
easyInOut : function(t, b, c, d) {
if ((t /= d / 2) < 1) return - c / 2 * (Math.sqrt(1 - t * t) - 1) b ;
반환 c / 2 * (Math.sqrt(1 - (t -= 2) * t) 1) b;
}
},
탄력적: {
easyIn: function(t, b, c, d, a, p) {
if (t == 0) return b;
if ((t /= d ) == 1) return b c;
if (!p) p = d * .3;
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else var s = p / (2 * Math.PI) * Math.asin(c / a);
return - (a * Math.pow(2 , 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) b;
},
easyOut: function(t, b, c, d, a, p) {
if (t == 0) return b;
if ((t /= d) == 1) return b c;
if (!p) p = d * .3;
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else var s = p / (2 * Math.PI) * Math.asin(c / a);
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s ) * (2 * Math.PI) / p) c b);
},
easyInOut: function(t, b, c, d, a, p) {
if (t == 0) return b;
if ((t /= d / 2) == 2) return b c;
if (!p) p = d * (.3 * 1.5);
if (!a | | < Math.abs(c)) {
a = c;
var s = p / 4;
} else var s = p / (2 * Math.PI) * Math.asin(c / a );
if (t < 1) return - .5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) b;
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math .pi) / p) * .5 c b;
} <🎜} <🎜}, back : {
easein : function (t, b, c, d, s) {<× if (s == 정의되지 않음) s = 1.70158;
return c * (t /= d) * t * ((s 1) * t - s) b;
},
easyOut: function(t, b, c, d, s) {
if (s == undefine) s = 1.70158;
return c * ((t = t / d - 1) * t * ((s 1) * t s) 1) b;
},
easyInOut: function(t, b, c, d, s) {
if (s == 정의되지 않음) s = 1.70158 ;
if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) 1) * t - s)) b;
c / 2 * ((t -= 2) * t * (((s *= (1.525)) 1) * t s) 2) b;
}
},
바운스: {
easyIn: function(t, b, c, d) {
return c - Tween.Bounce.easeOut(d - t, 0, c, d) b;
},
easyOut: function(t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t .75) b;
} else if (t < ( 2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t .9375) b;
} else {
c * (7.5625 * (t - = (2.625 / 2.75)) * t .984375) b;
}
},
easyInOut: function(t, b, c, d) if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 b;
그렇지 않으면 Tween.Bounce.easeOut(t * 2 - d, 0, c, d) *를 반환합니다. .5 c * .5 b;
}
}
}
