JavaScript实现缓动动画


Posted in Javascript onNovember 25, 2020

JavaScript原生定时器实现动画的缓动效果,供大家参考,具体内容如下

原理很简单通过定时器修改边距达到移动动画效果

实现速度的变化

缓动必然移动速度会有变化,这里需要用到一个小公式或者说算法?

移动单位 = (指定移动位置边距 - obj.offsetLeft) / 10;
var step = (ydpx - obj.offsetLeft) / 10;

有一个细节需要注意下:

移动的步数应该去掉小数,否者因为除法的原因无法移动到指定位置,会有一些差距
当step小于0对应的是向左移动舍去小数如:1.2 为1
大于0向右移动,进位,如:1.2为2
这应该是个数学问题**

之后代码的实现就简单多了:

//ydjl:移动到指定位置 (obj.offsetLeft)
function animate(obj,ydpx) {
 //清除定时器 防止每一次调用都产生一个定时器,叠加导致问题(速度变快)
 clearInterval(obj.timer); 
 obj.timer=setInterval(function () {
  var step = (ydpx - obj.offsetLeft) / 10; //移动距离
  //取整
  step = step>0 ? Math.ceil(step) : Math.floor(step);
  //判断是否移动到指定位置
  if(obj.offsetLeft == ydpx)
  {
  //清除定时器,停止移动
   clearInterval(obj.timer);
  }
  //修改left实现移动
  obj.style.left = obj.offsetLeft + step + 'px';

 },15)//移动间隔设置
}

下面是演示:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  .boks{
   position: absolute;
   top: 300px;
   left:0;
   width: 100px;
   height: 100px;
   background-color: #ff0011;
  }
 </style>

</head>
<body>
<button class="yd500">移动500px</button>
<button class="yd800">移动800px</button>
<div class="boks">hezi</div>
</body>
<script>
 function animate(obj,ydpx) {
  //清除定时器
  clearInterval(obj.timer);
  obj.timer=setInterval(function () {
   var step = (ydpx - obj.offsetLeft) / 10;
   step = step>0 ? Math.ceil(step) : Math.floor(step);
    if(obj.offsetLeft == ydpx)
    {
     clearInterval(obj.timer);
    }
   obj.style.left = obj.offsetLeft + step + 'px';

  },15);
 }
 var yd500 = document.querySelector(".yd500");
 var yd800 = document.querySelector(".yd800");
 //盒子
 var boks = document.querySelector(".boks");

 yd500.addEventListener('click', function() {
  // 调用函数
  animate(boks, 500); //传递要移动的对象 和 移动位置
 })

 yd800.addEventListener('click', function() {
  // 调用函数
  animate(boks, 800); //传递要移动的对象 和 移动位置
 })
</script>
</html>

萌新小白的学习记录

JavaScript实现缓动动画

JavaScript实现缓动动画

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
javascript object array方法使用详解
Dec 03 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 #Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 #Vue.js
JavaScript实现网页动态生成表格
Nov 25 #Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 #Vue.js
JavaScript实现HTML导航栏下拉菜单
Nov 25 #Javascript
vue打开其他项目页面并传入数据详解
Nov 25 #Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 #Vue.js
You might like
PHP导入Excel到MySQL的方法
2011/04/23 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
CSS+Jquery实现页面圆角框方法大全
2009/12/24 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
js的三种继承方式详解
2017/01/21 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
pytorch训练imagenet分类的方法
2018/07/27 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
管理部部长岗位职责
2013/12/05 职场文书
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
厂长助理岗位职责
2013/12/27 职场文书
新教师工作感言
2014/02/16 职场文书
自我鉴定总结
2014/03/24 职场文书
国旗下的演讲稿
2014/05/08 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
机关作风建设心得体会
2014/10/22 职场文书
事业单位年度考核评语
2014/12/31 职场文书
污染环境建议书
2015/09/14 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python