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()属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
JavaScript中Async/Await通过同步的方式实现异步的方法介绍
在JavaScript的异步编程中,我们经常使用回调函数、Promise和 Async/Await来解决异步操作的问题,Async/Await 又是Promise的语法糖,它的出现让异步编程变得更加直观和易于理解,本文将详细讲解Async/Await如何通过同步的方式实现异步2023-06-06使用CoffeeScrip优美方式编写javascript代码
CoffeeScript就是JavaScript,他进行的是一对一的编译,或者说是翻译,而且编译成的JavaScript代码可读性很强。本文给大家介绍使用CoffeeScript优美方式编写javascript代码,感兴趣的朋友一起看看吧2015-10-10django admin 使用SimpleUI自定义按钮弹窗框示例
Django 后台admin有大量的属性和方法,拥有强大的功能和自定义能力,这篇文章主要介绍了django admin 使用SimpleUI自定义按钮弹窗框示例,需要的朋友可以参考下2023-04-04
最新评论