运动 ( 动画 ) , 就是操作对应的dom元素发生变化 , ( 这个变化要持续多次 ( 修改样式 ) ) , 每次间隔的时间是你肉眼察觉不到的 ( 时间比较短 ) . 当到达目标位置就停止 , 这个就是所谓的动画
主要实现原理
-
利用定时器定时操作dom的样式
-
当设置的目标值到达后 清除定时器
运动三大要素
-
当前值 ( current )
-
变化值 ( step )
-
目标值 ( target )
主要动画
匀速运动 ( 每次变化的值是一样的 )
-
示例 ( 操作div的宽度变化 )
//匀速运动每次变化的值 是固定的 //获取页面上的元素 var div = document.querySelector('div') //获取当前的样式 var current = parseInt(getStyle(div).width) //设置目标值 var target = 500 //设置步长(变化值) var step = 10 //给div设置点击事件,并添加定时器,通过定时器来实现样式的变化 div.onclick=function(){ var timer = setInterval(()=>{ //判断当前值是否等于目标值,相等就清除定时器 if(current == target){ clearInterval(timer) }else{ //否则给div设置样式 //每次将当前值加上变化值,完成变化 current += step div.style.width = current + 'px' } },40) } //封装一个获取页面上样式的方法 function getStyle(element){ if(window.getComputedStyle){ return window.getComputedStyle(element,'') }else{ return element.currentStyle } }
- 封装的匀速运动代码 ( 如果设置值不一样 , 那么动画将不会一起完成 )
//匀速运动的封装方法 //element表示移动的元素 , target是目标位置{width:500,left:500} function yunsu(element,targetObj){ //遍历targetObj for(let key in targetObj){//key是字符串 //获取当前样式 let current = parseFloat(getStyle(element)[key]) //获取目标值 let target = targetObj[key] //获取步长(变化值) let step = target - current >0?10:-10 //设置定时器,没有添加事件会自动开启定时器 let timer = setInterval(()=>{ //判断是否有到达目标位置,到了就清除清时期 if(current == target){ clearInterval(timer) }else{ //否则给元素设置样式 //更改每次变化后的值(当前值+步长赋给当前值继续下一轮遍历) current += step element.style[key]=current + 'px' } },40) } } //封装一个获取页面上样式的方法 function getStyle(element){ if(window.getComputedStyle){ return window.getComputedStyle(element,'') }else{ return element.currentStyle } }
-
示例 ( 操作div的位置变化 )
//div位置变化,以缓冲运动进行变化 //1.获取div var div = document.querySelector('div') //2.1.获取当前样式 let current = parseInt(getStyle(div).left) //3.设置目标值 let target = 500 //5.给div添加点击事件并设置定时器 div.onclick=function(){ let timer = setInterval(()=>{ //6.判断当前样式值是否等于目标样式值,相等就清除定时器 if(current == target){ clearInterval(timer) }else{ //4.设置步长 //变化值应是(目标值-当前)/10,因为每次的值都会除10会出现小数点然后无线增加,导致永远道不了目标值,所以要取下整数 let step = Math.ceil((target - current)/10) //7.不相等就先获取当前的变化样式,再赋值给div current += step div.style.left = current + 'px' } },40) } //2.0封装一个获取页面上样式的方法 function getStyle(element){ if(window.getComputedStyle){ return window.getComputedStyle(element,'') }else{ return element.currentStyle } }
-
缓冲封装
//封装一个获取样式的方法 function getStyle(element){ if(window.getComputedStyle){ return window.getComputedStyle(element,'') }else{ return element.currentStyle } } //封装缓存动画的方法,参数有元素和目标值对象 function buffer(element,targetObj){ //判断是否有元素,没有就直接报错,不往下走 if(!element){ throw new Error('元素不能少') } //给这个元素设置定时器 element.timer=setInterval(()=>{ //默认都能执行 var flag = true //遍历目标值对象 for(let key in targetObj){ //取出当前样式值 let current = parseInt(getStyle(element)[key]) //取出目标值 let target = targetObj[key] //判断当前是否是宽高及位置的变化 if(key == 'width' || key== 'height' || key =='left' || key == 'top'){ //是就先取出变化值,负值向下取整,正值向上取整 let step = target-current>0?Math.ceil((target-current)/10):Math.floor((target-current)/10) //把变化值赋给当前值,并设置给元素 current += step element.style[key] = current + 'px' } //判断是否为透明度的变化 if(key == 'opacity'){ //是就先取出变化值,负值向下取整,正值向上取整 let step = target - current>0?Math.ceil((target-current)*1000/10):Math.floor((target-current)*1000/10) current += step /1000 element.style[key] = current } //如果是层高就直接赋值 if(key == 'zIndex'){ element.style[key] = target } //如果当前值不等于目标值,就是false if(current != target){ flag = false } } //如果全部走完了,就清除定时器 if(flag){ clearInterval(element.timer) } },40) }
原文地址:http://www.cnblogs.com/itlulu/p/16823038.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性