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

98 浏览量更新于2024-09-01 收藏 67KB PDF 举报

"本文主要探讨了JavaScript中的动画效果，特别是链式运动和同时运动的实现。作者在前文中已经介绍了速度动画、透明度动画、多物体运动和任意值变化，并封装了一个简单的动画插件。接下来的目标是扩展这个框架，使其更实用。文章详细解释了链式运动和同时运动的概念，并提供了实现这两种运动效果的代码示例。" 在JavaScript动画中，链式运动和同时运动是两种常见的运动模式。链式运动指的是动画效果按照顺序一个接一个地执行，即一个动画完成之后立即开始下一个。相反，同时运动则是所有动画在同一时间启动，各自独立运行。对于链式运动的实现，作者提出了一种方法：通过在动画函数`startMove`中添加一个额外的参数`fn`，表示一个函数。当当前动画效果完成后，如果`fn`存在，就立即执行这个函数，从而实现动画的连贯性。在`startMove`内部，通过在定时器的回调函数中添加判断来执行或清除`fn`。在实际应用中，例如在`onmouseover`和`onmouseout`事件中，可以嵌套调用`startMove`并传递不同的动画效果函数，形成动画链。下面是一个展示链式运动的HTML代码片段： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>链式运动</title> <style type="text/css"> body, ul, li {margin: 0px; padding: 0px;} ul li {width: 200px; height: 100px; background-color: red; opacity: 30%; transition: all 0.5s ease;} </style> </head> <body> <ul> <li id="li1"></li> </ul> <script type="text/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); }); }); }; }; </script> </body> </html> ``` 在这个例子中，当鼠标悬停在`li1`元素上时，元素会先扩展宽度到400像素，然后高度变为200像素，最后透明度变为100%，形成一个连续的动画效果。当鼠标离开时，元素会按相反的顺序恢复原状。同时运动的实现相对简单，只需要在同一个事件处理函数中调用多个`startMove`函数，不传递额外的回调函数即可。所有动画将在同一时刻开始，但由于CSS的`transition`属性，它们可能会以不同的速度结束，具体取决于它们的动画时间和缓动函数。通过这种方式，开发者可以创建出复杂而流畅的用户交互体验，使网页元素的动态行为更加丰富和自然。这在现代Web开发中尤其重要，因为视觉反馈和用户体验是吸引和保持用户的关键因素之一。

Javascript动画效果（动画效果（3））

前面我们已经介绍了速度动画、透明度动画、多物体运动和任意值变化，并且我们在Javascript动画效果（二）中介绍到我们

封装了一个简单的插件雏形，接下来我们对前面的动画效果进行进一步扩充，尽量将我们的框架做到更实用。在这里我们还需

要了解两个运动，一个是链式运动，一个是同时运动。它们间的区别分别是：链式运动是指运动一个接着一个（一个运动完成

马上进行下一个运动）；而同时运动是指所有的运动同时进行。在这里，我们该如何实现呢？

1、链式运动、链式运动

　　前面的效果中，我们已经能对任意值进行相应的变化，我们该如何在一个动画后添加一个动画呢？

　　思路：我们能不能在参数中传入一个函数，当一个效果完成后马上执行后面的函数（效果），该函数可以是想要的动画效

果

　　实现：在function startMove(obj,attr,iTarget)中在传入一个参数fn，代表一个函数。这时我们还需要修改的有在定时器的

后面增加一个判断if(fn){fn(); }，当存在fn函数时执行fn函数，当不存在fn函数时清除定时器。这样我们的window.onload函数也

应该发生相应变化，代码如下：

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);

});

};

所以我们得到链式运动的如下代码：

<!DOCTYPE html>

<html>

<head>

body,ul,li{ margin: 0px; padding: 0px; }

ul,li{ list-style: none; }

ul li{ width: 200px; height: 100px; background: yellow; margin-bottom: 20px; border: 4px solid #000; filter:alpha(opacity:30); opacity:0.3; }

</style>

</head>

<body>

<ul>

</ul>

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);

});

};

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38685961

粉丝: 8
资源: 907

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

javascript动画效果打开层 关闭层

JavaScript 动画制作教程 exe工具

HTML5+JavaScript动画基础（文本+源码）

AngularJS 实现JavaScript 动画效果详解

Javascript动画效果（4）

Javascript动画效果（1）

javascript动画效果的实现.pdf

javascript动画效果打开/关闭层

javascript人物行走动画效果

用JavaScript实现动画效果的方法

最新资源

javascript动画效果打开层关闭层