首页 > 其他分享 >js缓动动画

js缓动动画

时间:2022-10-27 14:13:30浏览次数:52  
标签:动画 obj js step 缓动 offsetLeft Math

   // 缓动动画  // 封装缓动动画函数 传递两个参数 需要执行动画的对象和目标位置  function animate (obj,target){             //先把原先的定时器清除,只保留一个.             clearInterval(obj.time);              obj.time = setInterval( function(){                  //步长 公式:(目标位置-现在的位置)/10                 //  Math.ceil 是往大的取整. Math.floor s是往小的取整;                  var step =(target-obj.offsetLeft) / 20;                  step = step > 0 ? Math.ceil(step): Math.floor(step);                 if(obj.offsetLeft == target){                     clearInterval(obj.time);                 }                 obj.style.left = obj.offsetLeft + step +'px';                 obj.style.opacity=(obj.offsetLeft + step)/100             },20);         }

标签:动画,obj,js,step,缓动,offsetLeft,Math
From: https://www.cnblogs.com/shuhan-hou/p/16832009.html

相关文章

  • postman 模拟json发送数据
    https://www.onlinedown.net/article/10021411.htm  在地址栏里输入请求:127.0.0.1:8081/getmoney      选择“POST”方式。      在“headers”添加ke......
  • js获取时间文件的封装
    /**年(Y)可用1-4个占位符*月(m)、日(d)、小时(H)、分(M)、秒(S)可用1-2个占位符*星期(W)可用1-3个占位符*季度(q为阿拉伯数字,Q为中文数字)可用1或4个占位符......
  • Fastjson反序列化解析流程分析(以TemplatesImpl加载字节码过程为例)
    文章目录​​写在前面​​​​流程分析​​写在前面关于TemplatesImpl加载字节码就不多说了,之前也写过自己翻一翻,或者网上看看其他大佬的,至于为什么选择这一个,因为这里面大......
  • 【JS】对象属性标志和属性描述符
    1.对象属性对象属性分为两种:数据属性访问器属性2.对象数据属性标志属性标志有4个:value、writable、enumberable、configurablevalue:  即属性值writable: ......
  • unity 给动画帧添加触发事件并调用函数
    动画事件的作用:假设你要在动画的某一帧执行某个函数方法做一些判断,比如当人物攻击动画武器挥砍出去的一帧执行攻击函数 添加动画帧事件方法①点击需要店家动画事件的......
  • 【JSON】Python读取JSON文件报错json.decoder.JSONDecodeError的问题
    报错json.decoder.JSONDecodeError:Expectingpropertynameenclosedindoublequotes:line*column*(char*)解决百度到了多种情况:编码使用UTF-8键值用双引......
  • leetcode 206. 反转链表 js实现
    给你单链表的头节点head,请你反转链表,并返回反转后的链表。 示例1:输入:head=[1,2,3,4,5]输出:[5,4,3,2,1]示例2:输入:head=[1,2]输出:[2,1]示例3:输入:head=[]输出......
  • js async await
    async函数一定会返回一个promise对象。如果一个async函数的返回值看起来不是promise,那么它将会被隐式地包装在一个promise中。如asyncfunctionfoo(){retur......
  • Node.JS 安装(Windows 和 Linux )
    1、Linux版采用YUM方式安装。1.1、卸载旧版本查看旧版本:rpm-qa|grepnodejs卸载:卸载过程中输入y确认yumremovenodejs1.2、安装1.2.1、Hint官......
  • 打印的js
    //打印类属性、方法定义/*eslint-disable*/constPrint=function(dom,options){if(!(thisinstanceofPrint))returnnewPrint(dom,options);this.op......