javascript 中动画制作方法 animate()属性

animate是个非常冷门的方法，以至于百度和手册上都找不到相关的资料。当然通过一个小小的demo，我还是发现了方法的一些属

animate是所有dom元素都有的方法，可以用来最做过度动画，关键帧动画。这个方法可以更方便的让我们制作动

animate共有两个参数 (很可惜似乎没有回调函数，没发现)

关键帧 (参数可以是数组或对象，数组内包裹的也必须是对象)
对象里的属性就是css属性和值了

动画属性设置 {参数数字或者对象}

目前发现的属性有以下 ：

• duration： 动画时长 (单位毫秒)
• iterations ：重复次数(默认1) 数字 （无限循环：‘Infinity’） [非必须]
• fill ：结束时复位 [不复位：forwards, 复位(默认值)：none] [非必须]
• delay ： 设置动画延迟时长 (单位毫秒) [非必须]
• easing ：设置动画 运动速率 [esse(默认)：慢-快-慢 ，linear: 匀速， ease-in: 慢-匀速， ease-in-out 慢-匀速-慢] [非必须]

通过两个案例说明一下:

过度动画即第一个参数直接为对象{}

<div id="box" style=”width: 200px;height: 200px;background: red;border-radius:50% 50% 0 0;”></div>

    <script>
            // 获取元素对象
       var box = document.getElementById("box");

 		box.animate(
        { // 对象
           transform:'rotate(360deg)'
        },
        { 
            duration: 1000,  //  动画时长  (单位毫秒)
            easing:'linear',		// 平滑
            iterations: Infinity,  //  重复次数  （无限循环：Infinity）
            
        },
       ); 
 </script>

第二个小盒子移动，第一个参数是数字，数组包裹着对象(每个对象就算一个关键帧)[{},{}]

<style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            background: red;
			position: absolute;
			border-radius:50% 50% 0 0;
        }
</style>
<div id="box"></div>
<script>
      box.animate(
        [  //关键帧（数组包裹对象）
        		{transform:'translate3d(0px, 0px, 0)',opacity:'1'},     // 第一帧
        		{transform:'translate3d(50px, 0px, 0)',opacity:'.8'},   // 第二帧
     		{transform:'translate3d(150px, 100px, 0)',opacity:'.5'}, // 第三帧
        ],
        { 
            duration: 1000,  //  动画时长  (单位毫秒)
            iterations: 1,  //  重复次数  （无限循环：Infinity）
            fill:'forwards',  //结束时不复位
            delay:0,   // 设置动画延迟时长 (单位毫秒)
            easing:'linear'  //设置动画 运动速率  (linear: 匀速)
        },
       );
</script> 

到此这篇关于javascript 中动画制作方法 animate()属性的文章就介绍到这了,更多相关javascript animate()属性内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！