首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一个十分简短的Tween

一个十分简短的Tween

作者头像
meteoric
发布2019-02-25 16:45:05
4740
发布2019-02-25 16:45:05
举报
文章被收录于专栏:游戏杂谈游戏杂谈

说它短,是因为总共核心代码+注释不到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> 预览代码

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2011-04-28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档