基于CSS3、原生JS、Vue3.0技术各自实现序列帧动画效果

Yaiba123

已于 2023-06-24 23:33:09 修改

阅读量2.4k

点赞数 2

分类专栏： # Vue 前端大杂烩文章标签：前端

于 2022-09-02 18:16:18 首次发布

本文链接：https://blog.csdn.net/Cai181191/article/details/126668544

版权

前端大杂烩同时被 2 个专栏收录

69 篇文章 9 订阅

订阅专栏

Vue

51 篇文章 1 订阅

订阅专栏

该博客介绍了如何使用纯CSS3、原生JavaScript和Vue3.0框架来创建序列帧动画。通过改变背景位置实现动画效果，详细展示了代码实现过程，并提供了鼠标悬停触发的不同实现方式。三种方法分别利用CSS3的关键帧动画、JavaScript事件监听和Vue的响应式数据绑定来控制动画状态。

摘要由CSDN通过智能技术生成

还记得序列帧技术在2018年的时候很火的，那时做H5很吃香的...

那么在此记录一下用纯CSS3、原生JS、Vue3.0，这3种方式来设计几个例子。需要自己去找一下雪碧图哦，比如阿里云、腾讯云官网有很多雪碧图的~

1、使用纯CSS3方式实现

<template>
  <div class="machine">
    <div class="machine-box" :class="sign ? 'machine-running' : ''" @click="handleMachineRunningClick">
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'machineComponent',
  setup() {

    let sign = ref(false);

    function handleMachineRunningClick() {
      sign.value = true;
    }

    return {sign, handleMachineRunningClick}
  }
}
</script>

<style scoped>
  .machine {
    width: 250px;
    height: 250px;
    margin: 100px auto 0 auto;
    border-radius: 250px;
    box-shadow: 0px 0px 5px #888;
  }

  .machine .machine-box {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    cursor: pointer;
    background-position: 0 0;
    background-size: 100%;
    transform: translateY(93px);
    background-image: url('./machine.png');
  }

  .machine .machine-running {
    animation: startingRun 1s steps(1, start) infinite;
  }
</style>

<style>
  @keyframes startingRun {
    0% {
      background-position: 0 64px;
    }
    5% {
      background-position: 0 128px;
    }
    10% {
      background-position: 0 192px;
    }
    15% {
      background-position: 0 256px;
    }
    20% {
      background-position: 0 320px;
    }
    25% {
      background-position: 0 384px;
    }
    30% {
      background-position: 0 448px;
    }
    35% {
      background-position: 0 512px;
    }
    40% {
      background-position: 0 576px;
    }
    45% {
      background-position: 0 640px;
    }
    50% {
      background-position: 0 704px;
    }
    55% {
      background-position: 0 768px;
    }
    60% {
      background-position: 0 768px;
    }
    65% {
      background-position: 0 832px;
    }
    70% {
      background-position: 0 896px;
    }
    75% {
      background-position: 0 960px;
    }
    80% {
      background-position: 0 1024px;
    }
    85% {
      background-position: 0 1088px;
    }
    90% {
      background-position: 0 1152px;
    }
    95% {
      background-position: 0 1216px;
    }
    100%{
      background-position: 0 1280px;
    }
  }
</style>

效果：~

2、使用原生JS方式实现（在阿里云官网右键JS源码找到的^^）

<!DOCTYPE html>
<html>
<head>
	<title>使用原生JS方式实现序列帧动画</title>
	<style type="text/css">
	  	.machine {
		    width: 250px;
		    height: 250px;
		    margin: 100px auto 0 auto;
		    border-radius: 250px;
		    box-shadow: 0px 0px 5px #888;
		  }

		.machine .machine-box {
		    width: 64px;
		    height: 64px;
		    margin: 0 auto;
		    cursor: pointer;
		    background-position: 0 0;
		    background-size: 100%;
		    transform: translateY(93px);
		    background-image: url('./player.png');
		}
	</style>
</head>

<body>
	<div class="machine">
		<div class="machine-box"></div>
	</div>
</body>

<script type="text/javascript">
	
	let count = 0;
	let enterTimer;
	let leaveTimer;

	var o = document.getElementsByClassName("machine-box")[0];

	o.onmouseover = function() {
	  	clearInterval(leaveTimer),
	  	enterTimer = setInterval(function() {
	    if (count < 20 && 64 * count < 1344) {
	      	count++;
	      	document.getElementsByClassName("machine-box")[0].style.backgroundPositionY = -64 * count + "px";
	    } else {
	      	clearInterval(enterTimer)
	    }
	  }, 30);
	};

	o.onmouseout = function() {
	  	clearInterval(enterTimer),
	  	leaveTimer = setInterval(function() {
	    if (count > 0 && 64 * count > 0) {
	      	count--;
	      	document.getElementsByClassName("machine-box")[0].style.backgroundPositionY = -64 * count + "px"
	    } else {
	      	clearInterval(leaveTimer)
	    }
	  }, 30);
	};
</script>
</html>

效果：~

3、使用Vue3.0方式实现

<template>
  <div class="machine">
    <span>{{ offsetHeight }}</span>
    <div
      class="machine-box"
      :style="'background-position: 0 ' + offsetHeight + 'px'"
      @mouseenter.stop.prevent="handleMouseEnter"
      @mouseleave.stop.prevent="handleMouseLeave">
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'machineComponent',
  setup() {
    // 响应式设置偏移高度初始化为0
    let offsetHeight = ref(0);

    // 运算符初始化为加号，因为开始时的偏移高度为0，只能增加
    let operator = 'add';

    // 鼠标进入事件定时器
    let enterTimer;

    // 鼠标离开事件定时器
    let leaveTimer;

    /**
     * 增加背景图片的偏移高度
     */
    function loopComputeOffsetHeight() {
      if (operator == 'add') {
        offsetHeight.value += 64;
        if (offsetHeight.value >= 1344) {
          operator = 'reduce';
        }
      } else {
        if (offsetHeight.value > 0) {
          offsetHeight.value -= 64;
          if (offsetHeight.value <= 0) {
            operator = 'add';
          }
        }
      }
      console.log(operator, offsetHeight.value);
    }

    /**
     * 减少背景图片的偏移高度
     */
    function reduceOffsetHeight() {
      if (offsetHeight.value > 0) {
        offsetHeight.value -= 64;
        if (offsetHeight.value <= 0) {
          clearInterval(leaveTimer)
          operator = 'add';
        }
        console.log(offsetHeight.value);
      }
    }

    /**
     * 鼠标进入事件
     */
    function handleMouseEnter() {
      clearInterval(leaveTimer);
      enterTimer = setInterval(loopComputeOffsetHeight, 50);
    }

    /**
     * 鼠标离开事件
     */
    function handleMouseLeave() {
      clearInterval(enterTimer);
      leaveTimer = setInterval(reduceOffsetHeight, 50);
    }

    return {offsetHeight, handleMouseEnter, handleMouseLeave}
  }
}
</script>

<style scoped>
  .machine {
    width: 250px;
    height: 250px;
    position: relative;
    text-align: center;
    margin: 100px auto 0 auto;
    border-radius: 250px;
    box-shadow: 0px 0px 5px #ddd;
  }

  .machine span {
    position: absolute;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 50px;
    bottom: auto;
  }

  .machine .machine-box {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    background-position: 0 0;
    background-size: 100%;
    transform: translateY(93px);
    background-image: url('./machine.png');
    cursor: pointer;
  }
</style>

效果：~