在使用JS动画做一些练习的时候我发现在动画执行时间内快速移开鼠标时会出现动画因鼠标移动过快从而导致代码冲突让画面抖动的bug ，今天我们就来解决这个bug。

示例：

可以看到当鼠标慢慢移动时，动画正常执行出现和退回，但当在动画执行过程中快速移动鼠标后，画面会出现抖动的bug。

以下是效果图源代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.boxx {position: absolute;top: 400px;left: -200px;width: 220px;height: 300px;}.one {position: absolute;width: 20px;background-color: yellow;text-align: center;top: 100px;left: 200px;cursor: pointer;}.box {position: absolute;top: 0;left: 0;width: 200px;height: 300px;background-color: skyblue;}</style>
</head><body><div class="boxx"><div class="one">分享到</div><div class="box"></div></div><script>var boxx = document.querySelector('.boxx');var one = document.querySelector('.one');var box = document.querySelector('.box');var flag = true;function animate(obj, target, callback) {obj.timer = setInterval(function() {var step = (target - obj.offsetLeft) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) {clearInterval(obj.timer);if (callback) {callback();}}obj.style.left = obj.offsetLeft + step + 'px';}, 10)};one.addEventListener('mouseenter', function() {animate(boxx, 0);});boxx.addEventListener('mouseleave', function() {animate(boxx, -200);});</script>
</body></html>

对于这个问题我们可以用节流阀来解决，节流阀本是在轮播图中防止图片移动过快而使用的，核心思路是利用回调函数，添加一个变量来控制，锁住函数和解锁函数，在动画中也可以用来防止抖动。

开始设置一个变量var flag = true；

if（flag）{falg = fasle；do something} 关闭水龙头

利用回调函数动画执行完毕，flag = true 打开水龙头

接下来我们就利用节流阀来更改最后两段代码让动画不再抖动：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.boxx {position: absolute;top: 400px;left: -200px;width: 220px;height: 300px;}.one {position: absolute;width: 20px;background-color: yellow;text-align: center;top: 100px;left: 200px;cursor: pointer;}.box {position: absolute;top: 0;left: 0;width: 200px;height: 300px;background-color: skyblue;}</style>
</head><body><div class="boxx"><div class="one">分享到</div><div class="box"></div></div><script>var boxx = document.querySelector('.boxx');var one = document.querySelector('.one');var box = document.querySelector('.box');var flag = true;function animate(obj, target, callback) {obj.timer = setInterval(function() {var step = (target - obj.offsetLeft) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) {clearInterval(obj.timer);if (callback) {callback();}}obj.style.left = obj.offsetLeft + step + 'px';}, 10)};one.addEventListener('mouseenter', function() {//节流阀if (flag) {flag = false;animate(boxx, 0, function() {flag = true;});};});boxx.addEventListener('mouseleave', function() {//节流阀if (flag) {flag = false;animate(boxx, -200, function() {flag = true;});};});</script>
</body></html>

效果如图：

可以看到即使在动画执行过程中快速移动鼠标动画也不会再抖动了，解决了这个bug。

总结

觉得有帮助的动动小手点个赞再走吧~~

节流阀解决JS动画抖动问题相关推荐

如何解决css动画抖动的问题
今天接到一个需求是这样的,我们有一个表格,表头固定,表格的宽高是可以通过拖拽调整的,当表格内容的高度大于表格设置的高度时,表格中的内容自动向上滚动: 但是之前的实现是当表格中的数据滚动到最后一行的时候 ...
vue图片动画上下跳动_Vue 解决路由过渡动画抖动问题(实例详解)
前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发 ...
html鼠标在ie上抖动,IE下CSS3动画抖动
问题记录:IE11中执行淡入动画时出现抖动效果,效果如下: 抖动.gif 解决此问题需理解一些概念: 重排:重新生成布局重绘:重新绘制注意:重排必定导致重绘,重绘不一定需要重排:比如改变背景色,就 ...
css动画和js动画_CSS与JS动画：哪个更快？
css动画和js动画 How is it possible that JavaScript-based animation has secretly always been as fast - or ...
css动画和js动画比较！
原文地址:http://css-tricks.com/myth-busting-css-animations-vs-javascript/ 译文地址:https://github.com/classi ...
解决 js 长任务导致的页面卡顿（时间分片技术）
时间分片技术解决 js 长任务导致的页面卡顿界面操作使用transform动画会使用GPU,不会让界面卡死解决 js 长任务导致的页面卡顿在web界面运行长时间代码时,会造成界面卡死,最新看了 ...
高中物理学运动公式实现js动画
在网页上创建动画一般有两种方式:css和javascript.它们在创建动画的时间和性能上是不一样的,各有利弊.选择哪种方法实际上取决于项目,以及想要实现什么类型的动画. 一般使用css动画来实现比较 ...
css动画和 js动画_CSS大师的动画建议
css动画和 js动画 Just over a week ago we were lucky enough to have Tiffany Brown join us on the SitePoin ...
scrolltop 原生js_解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法...
最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实现滚动 ...

节流阀解决JS动画抖动问题

总结

节流阀解决JS动画抖动问题相关推荐

最新文章

热门文章