js 애니메이션(animate) 간단한 엔진 코드 example_javascript 기술

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;
            }
        }
    }

}

하측면是个应용:

复主代码 代码如下:

   

       

       

           

               
• 

               
• 

               
• 

               
• 

               
• 

               
• 

               
• 

               
• 

           

       

       

   

   

• Bootstrap 목록 그룹 구성 요소에 대한 심층 분석
• JavaScript 함수 커링에 대한 자세한 설명
• JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)
• Angularjs는 WeChat UI(weui)를 통합합니다.
• JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개부인 성명Sitemap

© php.cn All rights reserved