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
});
分享到:
相关推荐
一个动画图解的数据结构与算法教程,支持多种编程语言,如 Java、C++、Python、Go、JS、TS、C#、Swift、Rust、Dart、Zig 等。通过可视化的方式,这个项目帮助学习者更轻松地理解和学习各种数据结构与算法。
在IT领域,将抽象的算法通过可视化的方式呈现出来是一种非常有效的教学和学习工具。这个名为"利用前端动画实现算法可视化,比如各种...如果你是学习者,那么通过观看这些动画,无疑能更直观地掌握排序算法的运作机制。
- JavaScript动画:利用JavaScript的`requestAnimationFrame`或定时器(如`setInterval`、`setTimeout`)来逐帧改变元素属性,创建自定义动画。 - 事件驱动:结合用户交互,如点击、滚动等,触发动画效果。 2. **...
2015年流利会议演讲动画算法-激活用户界面的简单公式简介:动画不仅使事情看起来很酷,而且还提供了上下文和其他细节。 动画为我们提供了交流的三维空间:时间。 现实世界并非以完全线性的方式移动,当我们看到发生...
总的来说,这个项目涵盖了八数码问题的理论、A*算法的实现、JavaScript编程、网页交互和动画制作等多个方面,是学习计算机科学与前端技术的很好实践。在实际操作中,还需要考虑性能优化,比如避免重复搜索和剪枝策略...
JavaScript是一种强大的客户端脚本语言,广泛应用于网页和...通过学习和实践这些JavaScript动画技术,你将能够创建出吸引人且性能良好的网页动画,提升用户体验。记得不断探索和实验,以适应不断发展的前端技术趋势。
《Hello 算法》是一本独特且直观的教程,旨在帮助学习者通过动画图解和一键运行的方式理解和掌握数据结构与算法。这本教程覆盖了多种编程语言,包括 Java, C++, Python, Go, JS, TS, C#, Swift, Rust, Dart, Zig 等...
本实例是基于JavaScript实现的A*寻路算法,结合了贪心算法与穷举法,还提供了一个可视化的界面来展示寻路过程,有助于理解和学习。 首先,我们要理解A*算法的核心思想。A*算法结合了Dijkstra算法的最短路径搜索和...
Tweene是一个专为JavaScript设计的动画代理库,它旨在简化和增强JavaScript中的动画制作过程,让你能够创造出更丰富、更流畅的动态效果。这个库的核心功能是帮助开发者更有效地控制对象在特定时间内的平滑过渡,无论...
anime.js是一款轻量级、高性能的JavaScript动画库,专为创建复杂的Web动画设计。它提供了丰富的API和功能,使得开发者可以轻松地实现各种酷炫的背景动画特效。在这个"anime.js动画引擎制作酷炫网页背景动画特效.zip...
KUTE.js,全称为“Keen Unique Timeline Engine”,是一个强大的原生JavaScript动画引擎,专为开发者设计,提供高效、灵活且可定制的动画解决方案。作为一个轻量级的库,KUTE.js允许开发者无需依赖任何其他大型框架...
这个名为"排序算法动画.zip"的压缩包文件,提供了一种直观的方式来帮助学习者理解这些算法,通过JavaScript实现的动态动画效果。 首先,我们来探讨一下压缩包中涉及的三种排序算法: 1. **冒泡排序**:是最简单的...
### JavaScript排序算法动画演示效果的实现方法 实现JavaScript排序算法动画演示效果是一个涉及前端技术栈的有趣话题。其核心在于如何将排序算法的每一步骤用动画的形式展示给用户,同时保证动画的流畅性和准确性。...
通过这个JavaScript花朵渐变色算法,开发者不仅可以学习到JavaScript基础语法,还能深入理解颜色处理、图形绘制、数学在图形艺术中的应用以及动画原理。此外,这个算法也可以作为教学示例,帮助初学者提升编程技能,...
在IT行业中,游戏开发、虚拟现实(VR)和增强现实(AR)等领域...通过学习和理解这个示例,开发者可以提升在WebGL、three.js、Vue和路径寻找算法方面的技能,这在游戏开发、交互式应用和其他3D项目中都是非常有价值的。
在IT行业中,动画效果是提升用户...通过学习和实践这类动画,开发者不仅可以提升自己的技能,还能为用户创造出更吸引人的交互体验。在实际项目中,可以结合业务需求进行调整和创新,以实现更具特色和个性化的动画效果。
在这个"A*寻径js动画效果"的项目中,开发者利用JavaScript语言实现了这一算法,并通过动画展示其工作过程,便于理解和学习。 A*算法的核心思想是使用一个评估函数来衡量当前节点到目标节点的总成本,这个评估函数...
通过分析并运行这个源码,你可以深入理解路径查找算法的工作原理,同时也可以学习到如何使用P5.js进行动画编程,提升你的编程技能和视觉表达能力。记得阅读`使用须知.txt`,以了解项目的具体使用方法和注意事项,...
6. **动画和过渡**:JavaScript可以实现复杂的动画效果,包括元素的进入、退出、变换和过渡。例如,它可以控制元素的位置、大小、透明度等属性,以创建平滑的过渡效果。 7. **性能优化**:JavaScript布局算法应考虑...
GSAP (GreenSock Animation Platform) 是一个强大的JavaScript动画库,专为现代网络设计,提供高效、灵活且高性能的动画解决方案。这个库以其出色的性能、易用性和广泛的浏览器兼容性而闻名,深受开发者喜爱。在...