一个十分简短的Tween

说它短,是因为总共核心代码+注释不到100行。(需要声明一下的是此代码非原创,但略有修改,加了自已的部分注解)

   1: function getEl(id) {
   2:     return typeof id === "string" ? document.getElementById(id) : id;
   3: }
   4: /**
   5: * @fileoverview Tween
   6: */
   7: function Tween(C, B, A) {
   8:     if (C) {
   9:         this.time = parseInt(C * 1000)
  10:     }
  11:     if (B) {
  12:         this.transform = B
  13:     }
  14:     if (A) {
  15:         this.interval = A
  16:     }
  17: }
  18: Tween.prototype = {
  19:     interval: 40,
  20:     transform: function(A) {
  21:         return 1 - Math.pow(1 - A, 3)
  22:     },
  23:     time: 1000,
  24:     start: function(A, E, D) {
  25:         D = D || this.transform;
  26:         function H() {
  27:             I += C;
  28:             var J = I / F;//<==>(runTime / totalTime)
  29:             if (J >= 1) {//Tween over
  30:                 A(1);
  31:                 E();
  32:                 clearInterval(B)
  33:             } else {
  34:                 A(D(J) / G)
  35:             }
  36:         }
  37:         var C = this.interval;
  38:         var F = this.time;
  39:         var G = D(1);
  40:         var I = 0;
  41:         var B = setInterval(H, C);
  42:         return B
  43:     },
  44:     /**
  45:     * C {id|dom}
  46:     * F width
  47:     * E height
  48:     */
  49:     moveBy: function(C, F, E, G) {
  50:         C = getEl(C);
  51:         var I = C.offsetLeft;
  52:         var H = C.offsetTop;
  53:         var B = C.style;
  54:         function A(J) {
  55:             B.left = parseInt(I + J * F) + "px";
  56:             B.top = parseInt(H + J * E) + "px"
  57:         }
  58:         function D() {
  59:             C = B = null;
  60:             G && G()
  61:         }
  62:         return this.start(A, D)
  63:     },
  64:     /**
  65:     * D {id|dom}
  66:     * C start--opacity
  67:     * A end--opacity
  68:     * E complete--callback
  69:     */
  70:     opacity: function(D, C, A, E) {
  71:         D = getEl(D);
  72:         var G = A - C;
  73:         var M = document.defaultView && document.defaultView.getComputedStyle;
  74:         function B(I) {
  75:             I = C + G * I;
  76:             if (!M) {                
  77:                 if (I >= 1) {
  78:                     D.style.filter = "";
  79:                     return true;
  80:                 }
  81:  
  82:                 D.style.filter = 'alpha(opacity=' + (I * 100) + ')';
  83:             } else {
  84:                 D.style.opacity = I;
  85:             }
  86:         }
  87:         function F() {
  88:             D = null;
  89:             E && E()
  90:         }
  91:         return this.start(B, F)
  92:     }
  93: };

只提供两个方法,moveBy、opacity两个方法,一个是移动元素位置另一个是设置DOM元素的透明度。

调用也很简单,ex:

var tween = new Tween();

tween.moveBy("demo", 100, 0);

tween.opacity("demo", 1, .2);

在本页面直接运行查看效果:

原文地址:https://www.cnblogs.com/meteoric_cry/p/2031771.html