zoukankan      html  css  js  c++  java
  • 一个十分简短的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);

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

  • 相关阅读:
    Caffe--solver.prototxt配置文件 参数设置及含义
    关于KMP算法理解(快速字符串匹配)
    Lintcode--004(最小子串覆盖)
    Lintcode--003(乱序字符串)
    Lintcode--002(两个字符串是变位词)
    Lintcode--001(比较字符串)
    闭包的应用实例
    JavaScript完整性检查
    null和undefined相等比较
    JavaScript逻辑运算符(操作数运算符)
  • 原文地址:https://www.cnblogs.com/meteoric_cry/p/2031771.html
Copyright © 2011-2022 走看看