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

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

Tween 测试例子运行动画 预览代码

一个十分简短的Tween相关推荐

  1. 一个很简短但很炫的html5代码(canvas画布)。。。。。

    最近在网上看到一个<一个很简短但很炫的html5代码>,特意收藏一下: [鼠标移入,酷炫样式] <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  2. 一个很简短的 JS 生成器入门和用法参考

    生成器函数 在写其他 js 代码时会经常用到 debugger 的东西,能够让当前运行的函数暂停住.生成器函数里的 yield 关键词也能使得函数暂停运行,同时还能用来做数据的输入输出(如果是 deb ...

  3. 【全网之最】用JavaScript写一个最简短的语句实现从A数组中去除B数组中相同元素

    [1,2,3,4].filter((x) => ![2,4].includes(x));//[1,3]

  4. go语言笔记——append是内置的函数!!!new是一个函数!!!调试可以使用闭包,本质上是print调试,尼玛!...

    内置函数 Go 语言拥有一些不需要进行导入操作就可以使用的内置函数.它们有时可以针对不同的类型进行操作,例如:len.cap 和 append,或必须用于系统级的操作,例如:panic.因此,它们需要 ...

  5. 用一年的时间,依靠SEO创造一个成功的网站

    以下内容是一位SEO前辈(站长世界的创始人Brett Tabke)写的,这篇文章在我最初学习SEO时,深刻得影响了我,给我了足够的自信.希望对你也有所帮助. a)准备工作和建立内容. 在你注册域名之前 ...

  6. Google Wave 的失败给现代实时协作办公的一个重大教训!

    作者 | Taskade 译者 | 弯月,责编 | 夕颜 出品 | 程序人生(ID:coder_life) 当Google Wave在2009年的I/O大会上首次亮相时,人们感到它是一种与众不同的工具 ...

  7. 谷歌教你25招构建一个优秀的移动网站

    谷歌公司的研究人员聆听了119个小时用户对移动网站的抱怨,了解到构建移动网站的精髓. 最近,来自谷歌公司和AnswerLab的研究人员主持了一场长达119小时的用户测试会议,他们每天都会让用户访问10 ...

  8. 纪念一个曾经的软件产品(五)——任务栏、系统通知与锁屏

    [回目录] 七.任务栏与系统通知 什么是系统通知?我大致列一下:电量的变化.蜂窝电话信号强弱的变化.WIFI的状态.蓝牙的状态变化.通话状态变化.新短信--好多,这些东西的共同特点就是你不知道它们会在 ...

  9. 【前端学习一】【网页设计】利用HTML和CSS制作了一个小网页.

    前言 最近在学习前端,光看不练是空谈,利用课下时间以及课上时间做了一个小网页,其中利用到了HTML和CSS.网页非常简单,功能也非常少,但还是出现了许多错误,有一些妥协性,而且目前从制作中还遗留了许多 ...

最新文章

  1. Ubuntu安装搜狗输入法
  2. 使用Java Stream API将List按自定义分组规则转换成Map的一个例子
  3. 隐藏自己电脑的IP地址
  4. 数据爆发式增长下,CIO不可不知的“数据经济学”
  5. Linux(Fedora 20) EFI 启动Windows出错 \EFI\Microsoft\Boot\bootmgfw.efi is missing
  6. JNI FindClass出错的一种特殊情况
  7. 尚硅谷2022 jenkins教程笔记
  8. 操作系统和各类编辑器的豆沙绿设置
  9. android手表文件管理,watch文件管理器APP安卓版下载-watch文件管理器华为手表版v1.1.0 免费版-007游戏网...
  10. 用剥洋葱理解递归逆序输出单链表
  11. python re.split 空格_str.split和re.split中空格的区别
  12. PHP isset()与empty()的区别
  13. 3、InnoDB存储引擎
  14. 教你1个转换小技巧,免费多张jpg合并成pdf
  15. VirtualBox 搭建虚拟环境
  16. 当代大学生应该如何学习计算机科学
  17. ubuntu16.04 titan rtx 24g +显卡驱动+cuda10.1+cudnn环境配置
  18. 06年java星战ol,《星战三国》微端网游 左转是网游右拐是页游
  19. asm磁盘组不同创建方式compatible.asm的差异
  20. k8s etcd-2 Unhealthy HTTP probe failed with statuscode: 503

热门文章

  1. 基于cnn的短文本分类_自然语言理解之(二)短文本多分类TextCNN实践
  2. python numpy 数据类型为python对象-python numPy模块 与numpy里的数据类型、数据类型对象dtype...
  3. 怎么把线稿提取出来_抠线稿,三种提取漫画线稿的方式
  4. [CQOI2010]扑克牌
  5. 图论-有向图的连通性模板题(hdu1296)(hdu1827)
  6. 思维 ---- 两两匹配问题 2021杭电多校第6场 E - Median
  7. 图论 ---- Codeforces Round #649 (Div. 2)D题[dfs求环+深度分层求图中独立集]
  8. Codeforces数学1600day3[数学CodeForces - 1213D2, CodeForces - 1165E 数论,CodeForces - 1165D 因子分解]
  9. szu 寒训第二天 树状数组 二维树状数组详解,以及树状数组扩展应用【求逆序对,以及动态第k小数】
  10. java swing中英文支持,java - Swing国际化 - 如何在运行时更新语言 - SO中文参考 - www.soinside.com...