Javascript动画效果进阶：链式与同时运动实现

"本文主要讲解了JavaScript中的动画效果，特别是链式运动和同时运动的实现方式，通过实例展示了如何在动画效果之间建立关联，以实现更复杂的动态效果。" 在JavaScript中，创建动画效果通常涉及到元素的位置、尺寸、颜色等属性的连续变化。在前两篇关于JavaScript动画效果的文章中，已经探讨了速度动画、透明度动画、多物体运动以及任意值变化。在本篇中，作者进一步介绍了如何封装一个更加实用的动画框架，重点讲解了链式运动和同时运动的概念。 1、链式运动 链式运动是指一系列动画效果按照特定顺序依次执行，一个动画完成后立即启动下一个。实现链式运动的关键在于，在一个动画结束时触发下一个动画的开始。这可以通过在`startMove`函数中添加一个额外的参数`fn`来实现，这个参数是一个函数，表示动画结束后需要执行的操作。当动画完成时，如果存在`fn`函数，则执行它，否则清除定时器。在`window.onload`事件中，通过嵌套调用`startMove`函数并传递回调函数，可以实现链式动画效果。 示例代码如下： ```javascript window.onload = function() { var Li = document.getElementById('li1'); Li.onmouseover = function() { startMove(Li, 'width', 400, function() { startMove(Li, 'height', 200, function() { startMove(Li, 'opacity', 100); }); }); }; Li.onmouseout = function() { startMove(Li, 'opacity', 30, function() { startMove(Li, 'height', 100, function() { startMove(Li, 'width', 200); }); }); }; }; ``` 这段代码展示了鼠标悬停在`li1`元素上时，元素宽度变为400px，然后高度变为200px，最后透明度变为100%，所有动画按顺序执行。鼠标移开时，动画反向进行，实现回退效果。 2、同时运动 与链式运动不同，同时运动是指多个动画同时开始，所有动画在相同的时间内完成。在JavaScript中，可以使用数组存储多个动画，并通过循环或`setTimeout`的递归调用来同时启动这些动画。由于文章没有提供同时运动的具体实现代码，这里提供一种可能的实现方式： ```javascript function startAllMoves(els, attrs, targets, duration) { for (let i = 0; i < els.length; i++) { startMove(els[i], attrs[i], targets[i], duration); } } // 使用示例 var els = [Li1, Li2, Li3]; var attrs = ['width', 'height', 'opacity']; var targets = [400, 200, 100]; var duration = 1000; startAllMoves(els, attrs, targets, duration); ``` 这段代码定义了一个`startAllMoves`函数，接受元素数组、属性数组、目标值数组和持续时间作为参数，然后遍历数组启动所有动画。 通过理解和应用链式运动和同时运动的概念，开发者可以创建出更为复杂和流畅的交互式用户体验。在实际开发中，还可以结合CSS3的过渡和动画，以及现代JavaScript库如jQuery、GreenSock等来进一步优化和简化JavaScript动画的实现。