js实现元素抖动动画效果

最新推荐文章于 2023-10-27 13:35:54 发布

ﺭ亲了你一口ﺭ小猪

最新推荐文章于 2023-10-27 13:35:54 发布

阅读量2k

点赞数 1

文章标签： javascript html html5

本文链接：https://blog.csdn.net/xiaozhudiaoyu/article/details/105744490

版权

js实现元素抖动动画效果

elShaking函数封装
代码演示

elShaking函数封装

给指定元素绑定mouseenter事件，当鼠标移入时，元素抖动

function elShaking(el) {
  const maxAngle = 7 // 震动偏移角度
  const interval = 12 // 震动快慢，数字越小越快，太小DOM反应不过来，看不出动画
  const quarterCycle = 6 // 一次完整来回震动的四分之一周期
  let curAngle = 0
  let direction = 1
  const timer = setInterval(function(){
    if (direction > 0) {
      curAngle++
      if (curAngle === maxAngle) {
        direction = -1
      }
    } else {
      curAngle--
      if (curAngle === -maxAngle) {
        direction = 1
      }
    }
    el.style.transform = 'rotate(' + curAngle + 'deg)';
  }, interval)
  setTimeout(function(){
    clearInterval(timer)
  }, maxAngle * interval * quarterCycle);
}

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box{
			background-color: red;
			width: 100px;
			margin: 0 auto;
			margin-top: 200px;
			height: 100px;
		}
	</style>
</head>
<body>
	<div class="box" id="box"></div>
	<script>
		document.getElementById('box').addEventListener('mouseenter',function(e){
			elShaking(e.target)
		})
		function elShaking(el) {
			const maxAngle = 7 // 震动偏移角度
			const interval = 12 // 震动快慢，数字越小越快，太小DOM反应不过来，看不出动画
			const quarterCycle = 6 // 一次完整来回震动的四分之一周期
			let curAngle = 0
			let direction = 1
			const timer = setInterval(function(){
				if (direction > 0) {
				curAngle++
				if (curAngle === maxAngle) {
					direction = -1
				}
				} else {
				curAngle--
				if (curAngle === -maxAngle) {
					direction = 1
				}
				}
				el.style.transform = 'rotate(' + curAngle + 'deg)';
			}, interval)
			setTimeout(function(){
				clearInterval(timer)
			}, maxAngle * interval * quarterCycle);
		}
	</script>
</body>
</html>