♥缓动动画函数
· 之前我在博客上写过匀速的动画函数 ：https://www.cnblogs.com/lzxgg-xl/p/10227127.html
· 与匀速的相比 有相同的地方 也有不同的地方 我在这里就简单的写一遍
一. 首先还是一样，因为它是个函数体我们要传参 即 ：
1.移动的元素
2.移动的目的地
二. 和匀速的一样 要先清理定时器 不然会发生点击多次移动的速度越来越快的状况
1.因为每点击一次按钮 就会多生成一个定时器 生成的多了之后 速度就会加快 因为如果两个定时器一起进行 原本40的速度就会变成80
2.因为我们写的是缓动的动画效果 所以可能视觉上看的并不是很明显 但是我们要注意误差 要做到尽量严谨
三. 和匀速不同的地方
每次移动的距离是变化的 这个的具体实现是这样的：
每次令step = （target-current）/10
这样会出现有小数存在的情况 然而如果一直有小数 我们一直无法到达重点 就会是一个死循环
如果step是正数 我们向下取整 那么也是永远到不了的 因为到了0.x的小数的时候你向下取整 永远是0 也止步不前
所以说 正数的话要向上取整 负数的话向下取整就可以解决这个问题
下面给出代码：
我要评论function animate(element, target) {
//先清理定时器
clearinterval(element.timeid);
//缓动动画函数的封装
element.timeid= setinterval(
function () {
var current = element.offsetleft;
var step = (target - current) / 10;
//如果step 是正数 那么取的时候要向上取整 不然永远无法到达目的地
// 如果step 是负数 那么取得时候要向下取整 不然永远无法到达目的地
step = step > 0 ? math.ceil(step) : math.floor(step);
current += step;
element.style.left = current + "px";
if (current == target){
clearinterval(element.timeid);
}
console.log("当前距离是"+ current +",每一步移动"+math.abs(step));
//这个写入操作台的呢 是为了防止有错误 就是说用来检查自己写的对不对 如果你写熟练了那么可以去掉
}
, 20)
}
如对本文有疑问， 点击进行留言回复！！
MFC的静态库.lib、动态库.dll（包含引入库.lib）以及Unicode库示例
CTF 刷题记录（一） 白云新闻搜索（手动与自动化SQL注入）
javascript如何使用函数random来实现课堂随机点名方法详解
网友评论