一个十分简短的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);

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

<!DOCTYPE html> <html> <head> <title>Tween 测试例子</title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> * {margin:0; padding:0;} body {background-color:#fff;} #demo {width:200px; height:150px; border:1px solid #849bca; background-color:#eef1f8; position:absolute; top:80px; left:80px;} </style> </head> <body> <div id="demo"></div> <button id="startTween">运行动画</button> </body> </html> 预览代码

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券