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

 更新时间:2022年04月14日 16:36:29   作者:zhijie   
这篇文章主要介绍了javascript 中动画制作方法 animate()属性,animate是所有dom元素都有的方法,可以用来最做过度动画,关键帧动画,下面文章的相关介绍需要的小伙伴可以参考一下

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()属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS验证逗号隔开可以是中文字母数字

    JS验证逗号隔开可以是中文字母数字

    这篇文章主要介绍了JS验证逗号隔开可以是中文字母数字 的相关资料,需要的朋友可以参考下
    2016-04-04
  • 密码强度检测效果实现原理与代码

    密码强度检测效果实现原理与代码

    密码强度检测有利于提醒增加密码的安全指数,更好的保护密码安全,接下来介绍密码强度检测效果的实现
    2013-01-01
  • JavaScript中Async/Await通过同步的方式实现异步的方法介绍

    JavaScript中Async/Await通过同步的方式实现异步的方法介绍

    在JavaScript的异步编程中,我们经常使用回调函数、Promise和 Async/Await来解决异步操作的问题,Async/Await 又是Promise的语法糖,它的出现让异步编程变得更加直观和易于理解,本文将详细讲解Async/Await如何通过同步的方式实现异步
    2023-06-06
  • 细数promise与async/await的使用及区别说明

    细数promise与async/await的使用及区别说明

    这篇文章主要介绍了细数promise与async/await的使用及区别说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • 微信小程序图片上传以及内容安全审核详解

    微信小程序图片上传以及内容安全审核详解

    踩了很多次坑,终于在微信小程序中搞定了图片上传以及内容安全审核,下面这篇文章主要给大家介绍了关于微信小程序图片上传以及内容安全审核的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • 使用CoffeeScrip优美方式编写javascript代码

    使用CoffeeScrip优美方式编写javascript代码

    CoffeeScript就是JavaScript,他进行的是一对一的编译,或者说是翻译,而且编译成的JavaScript代码可读性很强。本文给大家介绍使用CoffeeScript优美方式编写javascript代码,感兴趣的朋友一起看看吧
    2015-10-10
  • 跟我学习javascript的this关键字

    跟我学习javascript的this关键字

    跟我学习javascript的this关键字,this是动态绑定,或称为运行期绑定的,这就导致 JavaScript中的this关键字有能力具备多重含义,带来灵活性的同时,也为初学者带来不少困惑
    2015-11-11
  • js 如何删除对象里的某个属性

    js 如何删除对象里的某个属性

    这篇文章主要介绍了js 如何删除对象里的某个属性,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • django admin 使用SimpleUI自定义按钮弹窗框示例

    django admin 使用SimpleUI自定义按钮弹窗框示例

    Django 后台admin有大量的属性和方法,拥有强大的功能和自定义能力,这篇文章主要介绍了django admin 使用SimpleUI自定义按钮弹窗框示例,需要的朋友可以参考下
    2023-04-04
  • 微信小程序拼接图片链接无底洞深入探究

    微信小程序拼接图片链接无底洞深入探究

    这篇文章主要给大家介绍了关于微信小程序拼接图片链接无底洞深入探究的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09

最新评论