function Opacity(dom , spec) {
Element.extend(dom);
var from = spec.from || dom.getOpacity();
var to = spec.to || '1.0';
var fps = spec.fps || 100;
var delay = spec.delay || 0;
var duration = spec.duration;
var startOn = delay * 1000;
var finishOn = startOn + duration * 1000;
var totalTime = finishOn - startOn;
var totalFrames = fps * duration;
var currentFrame = 0;
var fromToDelta = to - from ;
var interval;
var transition = function(pos) {
return (-Math.cos(pos*Math.PI)/2) + .5;
};
function render(pos) {
pos = (transition(pos) * fromToDelta) + from;
dom.setStyle({
opacity : pos
});
}
function loop() {
var timePos = new Date().getTime();
if (timePos >= finishOn) {
render(1);
return;
}
var pos = (timePos - startOn) / totalTime,
frame = (pos * totalFrames).round();
if (frame > currentFrame) {
render(pos);
currentFrame = frame;
}
interval = setTimeout(loop , 15);
}
var stamp = new Date().getTime();
startOn += stamp;
finishOn += stamp;
interval = setTimeout(loop , 15);
}
Opacity($('d2') , {
to : 0.3,
duration : 3,
delay : 1
});
分享到:
相关推荐
2015年流利会议演讲动画算法-激活用户界面的简单公式简介:动画不仅使事情看起来很酷,而且还提供了上下文和其他细节。 动画为我们提供了交流的三维空间:时间。 现实世界并非以完全线性的方式移动,当我们看到发生...
一个动画图解的数据结构与算法教程,支持多种编程语言,如 Java、C++、Python、Go、JS、TS、C#、Swift、Rust、Dart、Zig 等。通过可视化的方式,这个项目帮助学习者更轻松地理解和学习各种数据结构与算法。
动画算法 - 激活用户界面的简单公式 简介: 动画不仅使事情看起来很酷,而且还提供了上下文和其他详细信息。 动画为我们提供了第三个维度来进行交流:时间。 现实世界不会以完美的线性方式移动,当我们看到这样做的...
本文实例讲述了用队列模拟jquery的动画算法。分享给大家供大家参考。具体分析如下: Aaron最近疯狂的爱上了算法研究,估计又要死伤不少脑细胞了,我喜欢捡现成的,可以省些力气。发现他写的一段源码,运行一下,还蛮...
数据结构是计算机存储、组织数据的方式,它涉及到数据的逻辑结构、物理结构以及对数据的基本操作。...通过对数据结构的理解和运用,以及对算法的学习和研究,可以帮助我们更有效地解决实际问题,提升编程能力。
‧ 全书采用动画图解,结构化地讲解数据结构与算法知识,内容清晰易懂、学习曲线平滑。 ‧ 算法源代码皆可一键运行,支持 Java、C++、Python、Go、JS、TS、C#、Swift、Rust、Dart、Zig 等 语言。 ‧ 鼓励读者在章节...
前段时间为了做动画,学习了一下tween算法的使用,这几天根据tween算法,然后根据各种材料参考,做了一个简单的动画函数.
2019 5/16接下来一段时间将分享数据结构与算法系列的文章,通过半年数据结构与算法的学习,加上一个月 Leetcode 刷题,对数据结构与算法难点进行归纳、总结,编写成一系列的文章分享给每个人学习。2019/9/1开始逐渐...
Algorithmie.js 通过将学校中的基本算法练习应用于javascript来尝试学习Js,并在javascript中创建带有检查字段的登录表单,并在javascript中绘制CSS键入动画中的三角形
我在2014年6月下旬至7月上旬之间的某个迷雾笼罩的地方编写了De Casteljau算法JavaScript实现。向客户推销的一项工作涉及在HTML5视频上制作弯曲字母形式的动画图,这对于使用CSS动画实现是不切实际的。 我感到有机会...
最后结束时会计算玩家的累积经验值,除此之外,还有多种主题皮肤、重玩、退出游戏以及选择背景音乐进行播放功能,让你在玩的过程中不再无聊,这个项目中实现了很多动画效果,都是用js算法实现的,非常适合刚学习编程...
在这里,用户通过动画学习算法,其中算法以伪代码形式显示。 Algorithm Visualizer通过查看动画来帮助您掌握最复杂的算法。 动机 计算机科学教育是算法动画的第一个显而易见的应用。 与其使用繁琐的过程来向以前...
Battlesim:对网络上各单位之间的战斗进行建模和动画处理。 该项目在提供的网站上以原始形式的动画提供了完全精确的战斗模拟器(TABS)精简...请注意,运行模拟需要Javascript。 确保正确引用本材料的任何使用并遵守。
这些课程基于支持学习的交互式动画,引导学习者使用具体的真实编程语言进行编程。 出版物 塞巴斯蒂安·康贝菲斯、维吉妮·范登施里克、亚历克西斯·诺滕斯。 通过互动问题培养算法思维以鼓励学习编程。 在信息学...
这是在Typescript / Javascript中构建的超级简单的学习算法。 动画和绘图是使用p5js完成的。 该站点本身使用React。 服务器端渲染是通过Next.js完成的。 灵感与功劳 这个想法的灵感来自The Coding Train 一集。 ...
排序算法欢迎使用 Sort-Algo,这是一款排序可视化应用程序,可帮助您通过交互动画和解释来学习和理解排序算法。 我们构建这个应用程序是因为我们觉得学生学习排序算法时缺乏视觉表现。 因此,我们希望为未来正在学习...
6-骨骼游戏动画(什么是模型动画,常见游戏案例,如何让人头进行各种攻击动作) 7-3d模型加载(常见模型格式,如何渲染不同格式,不同格式的特点,什么格式性能优越,模型渲染异常,贴图不显示等问题详解) 8-高阶...
概括 是一种两人连接游戏,玩家首先选择一种颜色,然后轮流将彩色圆盘从顶部放入七列六行垂直...Anthony Ng ------ 模型、算法、Heroku Angela Field ------ 视图,动画 Jeremy McIntyre ------ 控制器,Firebase.js
最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好的满足这个需求,而且它还是开源的,于是乎就开始学习使用Sortable.js,再然后就有了这篇文章。 特点: 轻量级但...
可视化数据结构学习课件,网页的动画显示,排序算法动态显示,有课件使用说明,本项目使用html和JavaScript制作而成,本地使用需要电脑上安装浏览器,推荐使用Chrome、Microsoft Edge等浏览器。