首页 > JavaScript 阅读：18986

JS动画效果的实现（附带示例）

< 上一节下一节 >
通义灵码
在学习 CSS 时我们知道，通过 CSS 可以实现简单的动画效果，但对于比较复杂的动画，使用 CSS 实现起来就会比较麻烦。除了可以使用 CSS 来实现外，也可以使用 JavaScript 来实现。JavaScript 动画主要是通过修改元素样式来实现的，能够实现许多 CSS 动画所不能实现的效果，例如暂停、回放等。

与 CSS 动画相比，JavaScript 动画具有以下特点：
  • JavaScript 动画控制能力更强，可以在动画播放过程中对动画进行控制，例如开始、暂停、回放、终止、取消等；
  • JavaScript 动画的效果比 CSS 动画更丰富，比如曲线运动，冲击闪烁，视差滚动等效果，只有 JavaScript 动画才能完成；
  • CSS 动画有兼容性问题，而 JavaScript 大多时候没有兼容性问题。

JavaScript 主要通过代码修改 DOM 元素来实现动画的，并且可以配合定时器来实现循环播放，示例代码如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JavaScript</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         #box {
  12.             width: 200px;
  13.             height: 200px;
  14.             margin-top: 10px;
  15.             background: rgb(43, 221, 255);
  16.             position: relative;
  17.             left: -200px;
  18.             top: 0;
  19.         }
  20.         #box span {
  21.             width: 20px;
  22.             background: rgb(255, 119, 157);
  23.             position: absolute;
  24.             left: 200px;
  25.             top: 75px;
  26.             color: #fff;
  27.             text-align: center;
  28.             cursor: pointer;
  29.             padding: 5px 1px 5px 0;
  30.             border-radius: 0 5px 5px 0;
  31.         }
  32.         #box span:hover {
  33.             background: rgb(255, 84, 137);
  34.         }
  35.     </style>   
  36. </head>
  37. <body>
  38.     <div id="box">
  39.         <span id="share">分享</span>
  40.     </div>
  41.     <script>
  42.         window.onload = function () {
  43.             //动画
  44.             var div = document.getElementById("box");
  45.             var timer = null;
  46.             div.onmouseover = function () {
  47.                 startMove(0);
  48.             };
  49.             div.onmouseout = function () {
  50.                 startMove(-200);
  51.             };
  52.             function startMove(targetPosition) {
  53.                 clearInterval(timer);
  54.                 var speed = 0;
  55.                 if (targetPosition < 0) {
  56.                     speed = -10;
  57.                 } else {
  58.                     speed = 10;
  59.                 }
  60.                 timer = setInterval(function () {
  61.                     if (div.offsetLeft == targetPosition) {
  62.                         clearInterval(timer);
  63.                     } else {
  64.                         div.style.left = div.offsetLeft + speed + 'px';
  65.                     }
  66.                 }, 17);
  67.             }
  68.         };
  69.     </script>
  70. </body>
  71. </html>
运行结果如下：

JS动画效果示例1
图1：JavaScript 动画效果

提示：如今，大多数显示器的刷新率为 60HZ，为了实现更加平滑的动画效果，使用定时器的最佳循环间隔约为 17ms。

下面再通过一个示例来演示如何创建 JavaScript 动画，示例代码如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JavaScript</title>
  6.     <style type="text/css">
  7.         * {
  8.             margin: 0 auto;
  9.             padding: 0;
  10.         }
  11.         ul {
  12.             list-style: none;
  13.         }
  14.         #view {
  15.             position: relative;
  16.             width: 320px;
  17.             height: 120px;
  18.             border: 10px solid #bc8f8f;
  19.             overflow: hidden;
  20.             margin-top: 5px;
  21.         }
  22.         #img_list {
  23.             position: absolute;
  24.             width: 960px;
  25.         }
  26.         #img_list li {
  27.             float: left;
  28.             width: 320px;
  29.             height: 120px;
  30.         }
  31.     </style>
  32. </head>
  33.  
  34. <body>
  35.     <div id="view">
  36.         <ul id="img_list">
  37.             <li style="background-color: #87ceeb;"></li>
  38.             <li style="background-color: #ff69b4;"></li>
  39.             <li style="background-color: #98fb98;"></li>
  40.         </ul>
  41.     </div>
  42.     <script type="text/javascript">
  43.         var img_list = document.getElementById('img_list');
  44.  
  45.         setInterval(function() {
  46.             for (var i = 0; i <= 100; i++) {
  47.                 (function(pos) {
  48.                     setTimeout(function() {
  49.                         img_list.style.left = - (pos / 100) * 320 + 'px';
  50.                     }, (pos + 1) * 10)
  51.                 })(i)
  52.             }
  53.  
  54.             var current = img_list.children[0];
  55.             setTimeout(function() {
  56.                 img_list.appendChild(current);
  57.                 img_list.style.left = '0px';
  58.             }, 1100);
  59.         }, 2000);
  60.     </script>
  61. </body>
  62. </html>
运行结果如下：

JS动画效果示例2
图2：JavaScript动画效果
< 上一节下一节 >