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 程序编码规范
Nov 23 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
PHP中session变量的销毁
2014/02/27 PHP
php判断是否为json格式的方法
2014/03/04 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
php微信开发之谷歌测距
2018/06/14 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
js中replace的用法总结
2013/12/27 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
优秀英语专业毕业生求职信
2013/11/23 职场文书
会计专业大学生求职信范文
2014/01/28 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
期末个人总结范文
2015/02/13 职场文书
消费者投诉书范文
2015/07/02 职场文书
python实现过滤敏感词
2021/05/08 Python
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server