动画原理复盘

最新推荐文章于 2023-04-14 08:57:24 发布

jasmine s

最新推荐文章于 2023-04-14 08:57:24 发布

阅读量242

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/weixin_46513544/article/details/118934619

版权

Javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、动画实现原理
二、动画函数的简单封装
总结

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、动画实现原理

核心是setInterval()不断的重复移动盒子的位置

使用步骤
1、获取盒子当前的位置
2、让盒子当前位置上+1移动距离
3、利用定时器不断重复这个操作
注意此元素需要添加定位，才能使用element.style.left

<style>
div{
position:absolute;
left:0;
height:100px;
height:100px;
background-color:pink;
}
</style>
<body>
<div></div>
<script>
//offsetLeft获取当前位置 获取的位置重新赋值给style.left
var div=document.querySelector('div');
var timer=setInterval(function(){
if(div.offsetLeft>=400){
//停止动画 本质是停止定时器
clearInterval(timer);
}
div.style.left=div.offsetLeft+1+'px';
},30)

</script>
</body>

二、动画函数的简单封装

1.注意函数需要传进两个参数，动画对象和移动的距离

代码如下（示例）：

var div=documet.querySelector('div');
function animate(obj,function){
var timer=setInterval(function(){
if(obj.offsetLeft>target){
clearInterval(timer);
}
div.style.left=obj.offsetLeft+1+'px';
},30)
//函数的调用
animate(div,30);
}

2.给不同元素标记不同的定时器

代码如下（示例）：如果多个元素使用动画函数，每次都要var声明定时器，我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）
核心原理：利用JS是一门动态语言，可以很方便的给当前元素添加属性

// var obj={}
//obj.name='andy'; obj.timer=
function aninate(obj,target){
//当不断的点击按钮 这个元素的速度会越来越快 因为开启了太多的定时器
//解决方案就是只有一个定时器 先把原先的定时器清除 只保留当前的定时器
clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(obj.offsetLeft>target){
clearInterval('timer');
}
obj.style.left=obj.offsetLeft+1+'px';
},30)

}
var document.querySelector('div');
//调用函数
animate(div,30);

3.缓动动画原理

：
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
1、每次移动距离慢慢的变小，速度就会慢慢的落下来
2、核心算法：（目标值-现在的位置）/10 做为每次移动的距离步
3、停止条件时：让当前盒子位置等于目标位置就停止定时器

4.缓动动画基本代码实现

function animate(obj,target){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//步长值写到定时器里面 
var step=(target-obj.ofsetLeft)/10;
//盒子位置与目标位置相等时停止动画
if(obj.offsetLeft==target){
//清除动画
clearInterval(obj.timer)
}
//每次加1 这个步长该为一个慢慢变小的值 即 （目标值-现在的位置）/10
//每次计算一次都是改变步长值 所以要写在定时器里面
obj.style.left=obj.offsetLeft+step+'px';
},30)
}
div=doucment.querySelector('div');
animate(div,30);
//匀速动画 就是盒子当前的位置+固定的值10
//缓动动画 盒子当前的位置+变化的值

5.缓动动画多个目标值之间的移动

function animate(obj,target){
clearInterval(obj.timer);
 obj.timer=setInterval(function(){
 //步长写到定时器里面 
 //步长改为整数 不要出现小数的问题 即取整 往大取整(正值)
 //负值 则往小取 
 
 //var step=Math.ceil((target-obj.offsetLeft)/10);
 var step=(target-offsetLeft)/10;
step=step>0?Math.ceil(step):Math.floor(step);
 if(target==obj.offsetLeft){
 //停止定时器
 clearInterval(obj.timer);
 }
 
obj.style.left=obj.offset+step+'px';
},30)
}
var div=document.querySelecor(''div);
animate(div,30);

6.动画函数添加回调函数

回调函数原理：函数可以作为一个参数，将这个参数传到另一个函数里面，当那个函数执行完之后，在执行传进去的这个函数，这个过程就叫做回调
回调函数写到定时器结束

function animate(obj,target,callback){
//相当于callback=function(){} 调用 的时候callback()
clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(target==offsetLeft){
//回调函数写到定时器结束里面
if(callback()){
//调用函数
callback();
}
clearInterval(obj.timer);
}
var step=(target-offsetLeft)/10;
step=step>0?Math.ceil(step):Math.floor(step);
obj.style.left=obj.offsetLeft+step+'px';
},30)
}
var div=document.querySelector('div');
animate(div,30,function(){});

总结

动画函数封装到单独的JS文件里面
以后经常用这个动画函数，可以单独封装到js文件中，使用的时候引用这个JS文件即可

单独新建一个文件

function animate(obj,target,callback){
//相当于callback=function(){} 调用 的时候callback()
clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(target==offsetLeft){
//回调函数写到定时器结束里面
if(callback()){
//调用函数
callback();
}
clearInterval(obj.timer);
}
var step=(target-offsetLeft)/10;
step=step>0?Math.ceil(step):Math.floor(step);
obj.style.left=obj.offsetLeft+step+'px';
},30)
}
var div=document.querySelector('div');
animate(div,30,function(){});

jasmine s

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动画原理复盘

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、动画实现原理二、动画函数的简单封装1.注意函数需要传进两个参数，动画对象和移动的距离2.给不同元素标记不同的定时器3.缓动动画原理4.缓动动画基本代码实现5.缓动动画多个目标值之间的移动6.动画函数添加回调函数总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例
复制链接

扫一扫

专栏目录