一个十分简短的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);
在本页面直接运行查看效果:
Tween 测试例子运行动画 预览代码
一个十分简短的Tween相关推荐
- 一个很简短但很炫的html5代码(canvas画布)。。。。。
最近在网上看到一个<一个很简短但很炫的html5代码>,特意收藏一下: [鼠标移入,酷炫样式] <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- 一个很简短的 JS 生成器入门和用法参考
生成器函数 在写其他 js 代码时会经常用到 debugger 的东西,能够让当前运行的函数暂停住.生成器函数里的 yield 关键词也能使得函数暂停运行,同时还能用来做数据的输入输出(如果是 deb ...
- 【全网之最】用JavaScript写一个最简短的语句实现从A数组中去除B数组中相同元素
[1,2,3,4].filter((x) => ![2,4].includes(x));//[1,3]
- go语言笔记——append是内置的函数!!!new是一个函数!!!调试可以使用闭包,本质上是print调试,尼玛!...
内置函数 Go 语言拥有一些不需要进行导入操作就可以使用的内置函数.它们有时可以针对不同的类型进行操作,例如:len.cap 和 append,或必须用于系统级的操作,例如:panic.因此,它们需要 ...
- 用一年的时间,依靠SEO创造一个成功的网站
以下内容是一位SEO前辈(站长世界的创始人Brett Tabke)写的,这篇文章在我最初学习SEO时,深刻得影响了我,给我了足够的自信.希望对你也有所帮助. a)准备工作和建立内容. 在你注册域名之前 ...
- Google Wave 的失败给现代实时协作办公的一个重大教训!
作者 | Taskade 译者 | 弯月,责编 | 夕颜 出品 | 程序人生(ID:coder_life) 当Google Wave在2009年的I/O大会上首次亮相时,人们感到它是一种与众不同的工具 ...
- 谷歌教你25招构建一个优秀的移动网站
谷歌公司的研究人员聆听了119个小时用户对移动网站的抱怨,了解到构建移动网站的精髓. 最近,来自谷歌公司和AnswerLab的研究人员主持了一场长达119小时的用户测试会议,他们每天都会让用户访问10 ...
- 纪念一个曾经的软件产品(五)——任务栏、系统通知与锁屏
[回目录] 七.任务栏与系统通知 什么是系统通知?我大致列一下:电量的变化.蜂窝电话信号强弱的变化.WIFI的状态.蓝牙的状态变化.通话状态变化.新短信--好多,这些东西的共同特点就是你不知道它们会在 ...
- 【前端学习一】【网页设计】利用HTML和CSS制作了一个小网页.
前言 最近在学习前端,光看不练是空谈,利用课下时间以及课上时间做了一个小网页,其中利用到了HTML和CSS.网页非常简单,功能也非常少,但还是出现了许多错误,有一些妥协性,而且目前从制作中还遗留了许多 ...
最新文章
- Ubuntu安装搜狗输入法
- 使用Java Stream API将List按自定义分组规则转换成Map的一个例子
- 隐藏自己电脑的IP地址
- 数据爆发式增长下,CIO不可不知的“数据经济学”
- Linux(Fedora 20) EFI 启动Windows出错 \EFI\Microsoft\Boot\bootmgfw.efi is missing
- JNI FindClass出错的一种特殊情况
- 尚硅谷2022 jenkins教程笔记
- 操作系统和各类编辑器的豆沙绿设置
- android手表文件管理,watch文件管理器APP安卓版下载-watch文件管理器华为手表版v1.1.0 免费版-007游戏网...
- 用剥洋葱理解递归逆序输出单链表
- python re.split 空格_str.split和re.split中空格的区别
- PHP isset()与empty()的区别
- 3、InnoDB存储引擎
- 教你1个转换小技巧,免费多张jpg合并成pdf
- VirtualBox 搭建虚拟环境
- 当代大学生应该如何学习计算机科学
- ubuntu16.04 titan rtx 24g +显卡驱动+cuda10.1+cudnn环境配置
- 06年java星战ol,《星战三国》微端网游 左转是网游右拐是页游
- asm磁盘组不同创建方式compatible.asm的差异
- k8s etcd-2 Unhealthy HTTP probe failed with statuscode: 503
热门文章
- 基于cnn的短文本分类_自然语言理解之(二)短文本多分类TextCNN实践
- python numpy 数据类型为python对象-python numPy模块 与numpy里的数据类型、数据类型对象dtype...
- 怎么把线稿提取出来_抠线稿,三种提取漫画线稿的方式
- [CQOI2010]扑克牌
- 图论-有向图的连通性模板题(hdu1296)(hdu1827)
- 思维 ---- 两两匹配问题 2021杭电多校第6场 E - Median
- 图论 ---- Codeforces Round #649 (Div. 2)D题[dfs求环+深度分层求图中独立集]
- Codeforces数学1600day3[数学CodeForces - 1213D2, CodeForces - 1165E 数论,CodeForces - 1165D 因子分解]
- szu 寒训第二天 树状数组 二维树状数组详解,以及树状数组扩展应用【求逆序对,以及动态第k小数】
- java swing中英文支持,java - Swing国际化 - 如何在运行时更新语言 - SO中文参考 - www.soinside.com...