zoukankan      html  css  js  c++  java
  • 简单动画原理

      function FX(){
        this.init.apply(this, arguments);
      }
      
      FX.prototype.init = function(animationFunction, opts) {
        this._animationFunction = animationFunction;
        this._duration = opts && opts.duration || 250;
        this._interval = opts && opts.interval || 40;
        this._tween = opts && opts.tween || function(delta) {   
            var x = 1 - delta,
                elasticity = 0.25,
                value = 1 - Math.pow(x, 4) + x * x * Math.sin(delta * delta * Math.PI * elasticity);
            return value  
        };
        this._onDone = opts && opts.onDone || function (){
          console &&  console.log('onDone');
        }
      }
      
      FX.prototype.start = function(reverse) {
        var self = this;
        this._playing = true;
        this._startT = new Date().getTime();
        this._reverse = reverse;
        this._onInterval();
        this._intervalID = setInterval(function (){
         self._onInterval.call(self);
        }, this._interval);
      }
      
      FX.prototype.stop = function() {
        this._playing = false;
        clearInterval(this._intervalID);
      }
      
      FX.prototype.isGoing = function() { return this._playing }
      
      FX.prototype._onInterval = function() {
        var deltaT = new Date().getTime() - this._startT,
           duration = this._duration;
        if (deltaT >= duration) {
          this.stop();
          this._animationFunction(this._tween(this._reverse ? 0 : 1))
          if (this._onDone) { this._onDone() }
          return
        }
        var delta = deltaT / duration;
        if (this._reverse) { delta = 1 - delta }
        this._animationFunction(this._tween(delta))
      }
    
    
    
     var fx= new FX(function (x){
       document.getElementById('testBox').style.left = x*300+'px';
     });
    
     document.getElementById('testBtn').onclick = function (){
         document.getElementById('testBox').style.left='0px'
        fx.start();
    
     };
    

      

    test
  • 相关阅读:
    第八篇 EBS实现企业日常业务运管模型的解决方案设计思路
    第7篇 ORACLE EBS DEMO虚拟机环境的安装
    第六篇 ORACLE EBS用户界面通用元素或功能背后的道理解析
    第五篇 Getting Started with ORACLE EBS(开始学习ORACLE EBS)
    嵌入式根文件系统的移植和制作详解
    性能测试工具
    UEFI GPT
    系统启动过程和系统安装过程
    Gentoo安装
    Gentoo源码安装图解
  • 原文地址:https://www.cnblogs.com/zhuzf/p/2883405.html
Copyright © 2011-2022 走看看