匀速动画的实现

使用offsetLeft获取left，用style.left设置left
使用计时器实现平滑的匀速动画
为了避免计时器重复，应保证一个对象对应一个计时器

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<style> *{ margin:0; padding:0; font-family:"微软雅黑"; } .box{ width:50px; height:50px; color:#fff; text-align:center; font-size:14px; line-height:50px; margin-top:20px; position:relative; } .box:nth-child(1){ background:#08f; left:50px; } .box:nth-child(2){ background:#f80; left:400px; } #ruler{ margin-top:40px; } #a div{ width:48.6px; height:7.6px; border:1.4px solid #333; border-width:0 1.4px 1.4px 0; float:left; } #a div:last-child{ border-width:0 0 1.4px 0; } #b div{ font-size:12px; font-weight:lighter; position:relative; top:-10px; float:left; } #b div:nth-child(1){left:90px;} #b div:nth-child(2){left:150px;} #b div:nth-child(3){left:220px;} #b div:nth-child(4){left:290px;} #b div:nth-child(5){left:360px;} #form{ background:#eee; font-size:14px; margin:20px 0; width:540px; padding:30px; } #form input:nth-Child(1){ width:50px; padding:3px; font-size:12px; font-weight:lighter; border:1.4px solid #666; } #form input:nth-Child(2){ border:1.4px solid #444; padding:3px 8px; font-size:12px; background:#666; color:#fff; } </style>
</head>
<body>
<div class="box">box1</div>
<div class="box">box2</div>
<div id="ruler">
 <div id="a">
  <div></div><div></div>
  <div></div><div></div>
  <div></div><div></div>
  <div></div><div></div>
  <div></div><div></div>
  <div></div><div></div>
 </div><br/>
 <div id="b">
  <div>100px</div>
  <div>200px</div>
  <div>300px</div>
  <div>400px</div>
  <div>500px</div>
 </div>
 <div id="form">
  要移动到的坐标：
  <input type="text" value="100" />
  <input type="submit" value="移动" />
 </div>
</div>
<script> var btn=document.getElementsByTagName("input")[1]; var target=document.getElementsByTagName("input")[0]; var box=document.getElementsByClassName("box")[0]; var box2=document.getElementsByClassName("box")[1]; btn.onclick=function(){ uniformSpeed(box,target.value); uniformSpeed(box2,target.value); }; function uniformSpeed(ele,target){ var speed=6; if(Math.abs(ele.offsetLeft-target) > speed){ clearInterval(ele.timer); //保证元素此动画计时器不重复 var dir=ele.offsetLeft<target ? 1 : -1; //确定运动方向 ele.timer=setInterval(function(){ ele.style.left=ele.offsetLeft+dir*speed+"px"; if(Math.abs(ele.offsetLeft-target)<=speed){ //快到达时微调到具体位置 ele.style.left=target+"px"; clearInterval(ele.timer); } },24); } } </script>
</body>
</html>

缓动动画的实现

要实现缓动效果，思路是元素每次移动1/10，移动幅度越来越小，达到缓动效果
注意：offset只能取整数位精度，要注意精度问题

将uniformSpeed函数进行以下改进：

function uniformSpeed(ele,target){
 clearInterval(ele.timer); //保证元素此动画计时器不重复
 var dir=ele.offsetLeft<target ? 1 : -1; //确定运动方向
 ele.timer=setInterval(function(){
  ele.style.left=ele.offsetLeft+dir*Math.ceil(Math.abs(ele.offsetLeft-target)/10)+"px"; //offset精度为整数位,移动幅度<1时会丢失小数,所以当<1时用Math.ceil将其改为1,直至达到目标
  if(ele.offsetLeft==target){ //如果到了就清除计时器
   clearInterval(ele.timer);
  }
 },24);
}

例子:导航固定和回到页首

在这里插入图片描述

导航固定：使用offsetHeight获取header的高，然后用scrollTop判断nav是否到了该固定的位置
回到页首：利用scrollBy(x,y)相对滚动，结合offset小节的缓动动画实现回到页首的缓动效果

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<style> *{ margin:0; padding:0; font-family:"微软雅黑"; color:#fff; font-size:30px; text-align:center; } div{ width:100%; } #header{ background:#aaa; line-height:100px; } #nav{ line-height:50px; background:#888; position:static; top:0; } #main{ line-height:200px; color:#888; } #toTop{ width:50px; height:50px; position:fixed; display:none; top:80%; left:5%; } </style>
</head>
<body>
<div id="header">header</div>
<div id="nav">nav</div>
<div id="main">main<br/>main<br/>main<br/>main<br/>main</div>
<!-- 图标非原创,来源：https://www.iconfont.cn/user/detail?spm=a313x.7781069.0.d214f71f6&uid=246734 -->
<svg id="toTop" xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024" width="200" height="200" t="1565094469045" p-id="1475" version="1.1"><path fill="#0088ff" d="M 752.736 431.063 C 757.159 140.575 520.41 8.97 504.518 0.41 V 0 l -0.45 0.205 l -0.41 -0.205 v 0.41 c -15.934 8.56 -252.723 140.165 -248.259 430.653 c -48.21 31.457 -98.713 87.368 -90.685 184.074 c 8.028 96.666 101.007 160.768 136.601 157.287 c 35.595 -3.482 25.232 -30.31 25.232 -30.31 l 12.206 -50.095 s 52.47 80.569 69.304 80.528 c 15.114 -1.23 87 -0.123 95.6 0 h 0.82 c 8.602 -0.123 80.486 -1.23 95.6 0 c 16.794 0 69.305 -80.528 69.305 -80.528 l 12.165 50.094 s -10.322 26.83 25.272 30.31 c 35.595 3.482 128.574 -60.62 136.602 -157.286 c 8.028 -96.665 -42.475 -152.617 -90.685 -184.074 Z m -248.669 -4.26 c -6.758 -0.123 -94.781 -3.359 -102.891 -107.192 c 2.95 -98.714 95.97 -107.438 102.891 -107.93 c 6.964 0.492 99.943 9.216 102.892 107.93 c -8.11 103.833 -96.174 107.07 -102.892 107.192 Z m -52.019 500.531 c 0 11.838 -9.42 21.382 -21.012 21.382 a 21.217 21.217 0 0 1 -21.054 -21.34 V 821.74 c 0 -11.797 9.421 -21.382 21.054 -21.382 c 11.591 0 21.012 9.585 21.012 21.382 v 105.635 Z m 77.333 57.222 a 21.504 21.504 0 0 1 -21.34 21.626 a 21.504 21.504 0 0 1 -21.34 -21.626 V 827.474 c 0 -11.96 9.543 -21.668 21.299 -21.668 c 11.796 0 21.38 9.708 21.38 21.668 v 157.082 Z m 71.147 -82.043 c 0 11.796 -9.42 21.34 -21.053 21.34 a 21.217 21.217 0 0 1 -21.013 -21.34 v -75.367 c 0 -11.755 9.421 -21.299 21.013 -21.299 c 11.632 0 21.053 9.544 21.053 21.3 v 75.366 Z" p-id="1476" /></svg>
<script> var headerHeight=document.getElementById("header").offsetHeight; //头部高度 var nav=document.getElementById("nav"); var main=document.getElementById("main"); var toTop=document.getElementById("toTop"); //回到页首代码1： var toTopTimer=null; //计时器声明 toTop.onclick=function(){ clearInterval(toTopTimer); //清除计时器 toTopTimer=setInterval(function(){ st=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop; //scrollTop window.scrollBy(0,-Math.ceil(st/10)); //相对滚动；缓动效果，Math.ceil解决精度问题 if(st==0){ clearInterval(toTopTimer); } },10); }; window.onscroll=function(){ //滚动页面时触发 st=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop; //固定导航代码： if(st>headerHeight){ //到达导航时 nav.style.position="fixed"; main.style.paddingTop=nav.offsetHeight+"px"; //腾出main被占用的空间 }else{ nav.style.position="static"; main.style.paddingTop="0px"; } //回到页首代码2： if(st>150){ //当超出部分多于150时 toTop.style.display="block"; //显示箭头 }else{ toTop.style.display="none"; } }; </script>
</body>
</html>

缓动动画封装

实现效果

在这里插入图片描述
在offset小节，实现了匀速动画和缓动动画，但每次只能设置一个属性，且动画不能先后有序执行，所以要解决：

给函数传递一个包含样式信息的数组，执行动画时所有属性同步进行
若有多个动画需依次执行，后面的语句传给前面的语句，依次执行
若需要延时，后者传给前者的语句可以加上计时器

代码

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<style> *{ margin:0; padding:0; font-family:"微软雅黑"; } #box{ width:50px; height:50px; color:#fff; text-align:center; font-size:14px; line-height:50px; position:relative; background:#08f; top:50px; left:10px; border-radius:100%; } </style>
</head>
<body>
<div id="box">box</div>
<script> var box=document.getElementById("box"); box.onclick=function(){ var t=this; //this赋给t方便操作 var json={ //动画1 "top":25, "left":100, "width":100, "height":100, "line-height":100, "font-size":30 }; var json2={ //动画2 "top":50, "left":190, "width":50, "height":50, "line-height":50, "font-size":14 }; animate(t,json,function(){ setTimeout(function(){ //延时1s animate(t,json2); },1000); }); }; function animate(ele,json,fn){ clearInterval(ele.timer); ele.timer=setInterval(function(){ var flag=true; for(var key in json){ var current=parseInt(getStyle(ele,key)) || 0; //获取源值，若无则赋0 var dir=current<json[key] ? 1 : -1; //确定方向 ele.style[key]=current+dir*Math.ceil(Math.abs(current-json[key])/10)+"px"; if(json[key]!=current){ //所有参数都到位再停止 flag=false; } } if(flag){ clearInterval(ele.timer); if(fn){ fn(); } } },24); } function getStyle(ele, attr) { if (window.getComputedStyle) { return window.getComputedStyle(ele, null)[attr]; } return ele.currentStyle[attr]; } </script>
</body>
</html>

以上代码只能实现left,width,font-size等整数数值类样式的动画，opacity等小数位样式不能实现，color,background等复杂样式不能实现，但可以针对某个样式进行专门的解析

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 js原生动态创建表格使用Lottie将AE项目转换为 Web 原生动画原生JS-封装http请求类 h5+js随机拖动鼠标产生动画效果大杀器Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画 ScrollReveal-元素随页面滚动产生动画的js插件 [转]原生JS-查找相邻的元素-siblings方法的实现原生js动画效果（源码解析）基于canvas与原生JS的H5动画引擎 9种原生js动画效果(转)