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

赞 (0)

相关推荐

  • 原生js仿jquery animate动画效果

    原生js仿jquery animate动画效果

    jquery animate动画效果: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> *{margin:0;padding:0;} .box{width: 400px;height: 300px;background: #000;margin:40

  • 原生js实现jquery函数animate()动画效果的简单实例

    通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参

  • js动画(animate)简单引擎代码示例

    用惯了jquery的同学,相信都很欣赏其动画引擎.确实相对比较完善!如果,如果想像力足够丰富的话,相信可以做出超出想像的效果.当然,跟2d库比起来,还是相差相当一段距离.jquery压根也不是专门为动画而设计的.模拟真实世界方面,还是不足的.但在web世界里还是游刃有余的.动画其实一直是flash的专属领地(web区哉).只是它常常沦为黑客攻击的漏洞所在,而且要装插件,有时候文件实在太大,而且性耗实在是高啊.html5出现后,其实adobe自己都转移阵地到html5了.当然,我觉得很长一段时间内

  • jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】

    jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】

    本文实例讲述了jQuery animate()实现背景色渐变效果的处理方法.分享给大家供大家参考,具体如下: jquery animate函数不能处理背景色渐变,需要使用jquery.color插件 核心代码: $(function(){ $("#cdiv").animate( { backgroundColor:'#FF0000' },1000 ) }) 完整代码如下: <!DOCTYPE html> <html> <head> <meta

  • 浅谈原生JS实现jQuery的animate()动画示例

    本文介绍了浅谈原生JS实现jQuery的animate()动画示例,希望此文章对各位有所帮助. 参数介绍: obj 执行动画的元素 css JSON数值对,形式为"{属性名: 属性值}",指要执行动画的书序及其对应值 interval 属性每执行一次改变的时间间隔 speedFactor 速度因子,使动画具有缓冲效果,而不是匀速不变(speedFactor为1) func 执行完动画后的回调函数 注意: 必须为每一个元素分别添加一个定时器,否则会互相影响. cur != css[arr

  • js实现类似jquery里animate动画效果的方法

    本文实例讲述了js实现类似jquery里animate动画效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现鼠标移上,先宽度变化,再高度变化,最后透明度变化,鼠标移出,再依次变回去的效果. 要点一: startrun(obj,attr,target,fn) box.onmouseover = function(){ startrun(box,"width",200,function(){ startrun(box,"height",200,functio

  • 原生JS封装animate运动框架的实例

    如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 50px; b

  • 用js实现的模拟jquery的animate自定义动画(2.5K)

    后来发现还不错.不如继续写下去. 这个版本基本上跟jquery的animate一样了. 我是说效果基本上一样了.(效率还没测试过.): 如果有专业测试人员 帮我测试下. 1:功能说明 兼容主流浏览器. 1:支持回调函数: 2:支持级联动画调用: 3:支持delay动画队列延迟: 4:支持stop停止动画: 5:支持opacity透明度变化: 6:支持+= -= *= /=操作: 7:支持单位操作(px, %); 2:使用说明 jelle(A).animate(B, C, D); A:需要执行动画

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

    animate是个非常冷门的方法,以至于百度和手册上都找不到相关的资料.当然通过一个小小的demo,我还是发现了方法的一些属 animate是所有dom元素都有的方法,可以用来最做过度动画,关键帧动画.这个方法可以更方便的让我们制作动 animate共有两个参数 (很可惜似乎没有回调函数,没发现) 关键帧 (参数可以是数组或对象,数组内包裹的也必须是对象)对象里的属性就是css属性和值了 动画属性设置 {参数数字或者对象} 目前发现的属性有以下 : duration: 动画时长 (单位毫秒) i

  • JavaScript常用对象的方法和属性小结

    本文将简单介绍JavaScript中一些常用对象的属性和方法,以及几个有用的系统函数. 一.串方法 JavaScript有强大的串处理功能,有了这些串方法,才能编写出丰富多彩的网页.在这一部分里,我们将介绍到如何使用与串对象有关的方法和属性. 1.串对象的length属性 串对象仅有一个属性length,这个属性值表示这个串所包括字符的相对数目.语法为: stringName.length 2.串对象的方法 JavaScript提供了多个串方法以帮助控制显示信息.串方法可以分为几个大类,如属性方

  • javascript中checkbox使用方法简单实例演示

    javascript中checkbox使用方法简单实例演示

    演示一个小小的例子:在购物车里面,我们能够勾选自己所选的商品,然后能够显示出相应的价格. 1.首先显示出相应的界面:   相关代码: <body> 商品列表:<br/> 笔记本电脑<input type="checkbox" name="mm" value="3000" onclick="chose(this)" />3000 台式机<input type="checkbox

  • Javascript中的call()方法介绍

    在Mozilla的官网中对于call()的介绍是: 复制代码 代码如下: call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法. Call() 语法 复制代码 代码如下: fun.call(thisArg[, arg1[, arg2[, ...]]]) Call() 参数 thisArg 复制代码 代码如下: 在fun函数运行时指定的this值.需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为nul

  • JavaScript 中调用 Kotlin 方法实例详解

    JavaScript 中调用 Kotlin 方法实例详解 Kotlin 编译器生成正常的 JavaScript 类,可以在 JavaScript 代码中自由地使用的函数和属性 .不过,你应该记住一些微妙的事情. 用独立的 JavaScript 隔离声明 为了防止损坏全局对象,Kotlin 创建一个包含当前模块中所有 Kotlin 声明的对象 .所以如果你把模块命名为 myModule,那么所有的声明都可以通过 myModule 对象在 JavaScript 中可用.例如: fun foo() =

  • 总结JavaScript中BigIn函数常见的属性

    总结JavaScript中BigIn函数常见的属性

    目录 一.概述 二.属性 1. 数学运算符 2. 比较运算符 3. 布尔运算 三.总结 一.概述 BigInt 是一种特殊的数字类型,它提供了对任意长度整数的支持. 创建 bigint 的方式有两种:在一个整数字面量后面加 n 或者调用 BigInt 函数,该函数从字符串.数字等中生成 bigint. const bigint = 1234567890123456789012345678901234567890n; const sameBigint = BigInt("1234567890123

  • JavaScript中innerHTML使用方法实例

    JavaScript中innerHTML使用方法实例

    目录 innerHTML innerHTML的写法 总结 innerHTML innerHTML属性允许更改html元素的内容,可以设置或返回表格行的开始和结束标签之间的HTML,本篇文章就来给大家介绍关于innerHTML的用法 innerHTML的写法 对于element,设置innerHTML指定的元素名称 element.innerHTML; 将指定元素的html代码分配给变量 var sample1 = element.innerHTML 用指定元素替换变量的值 通过如下编写,可以在删

  • JavaScript中数组reduce()方法使用详情

    JavaScript中数组reduce()方法使用详情

    语法: reduce()对数组中的每个元素进行累加,返回一个新的值,可以传入初始值简单的讲就是返回数组中所有元素的和数  不会改变原始组的值  不会对空数组执行回调函数 arr.reduce(function(tmp, value, [index]) { // dosomething... }, [startValue]) // 提供初始值通常更安全 tmp:上一次的累加值,初始值为外部传进去的初始值 startValue,若没传默认是数组第一个值 value:数组元素:若累加值tmp为数组第一

  • javascript中一些util方法汇总

    javascript中一些util方法汇总 /***************原生对象工类方法****************/ /** * 判断非空 * @param obj * @returns {boolean} */ function isEmpty(obj) { if (obj == undefined || obj == null || new String(obj).trim() == '') { return true; } else { return false; } } /**

  • JavaScript中的splice方法用法详解

    JavaScript中的splice主要用来对js中的数组进行操作,包括删除,添加,替换等. 注意:这种方法会改变原始数组!. 1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 2.插入-向数组指定位置插入任意项元素.三个参数,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项) 3.替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数.第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项) 示例:

随机推荐