还记得序列帧技术在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>
效果：~
