提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
前言
提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。
提示:以下是本篇文章正文内容,下面案例可供参考
一、动画实现原理
核心是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(){});