来源：未知 时间：2024-06-10 21:33 作者：小飞侠 阅读:次
[导读] 利用css逐帧动画steps实现js可控动画正序播放，倒序播放，暂停 可以鼠标向上倒序，向下正序，点击播放暂停 代码： !DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-widt...
|
利用css逐帧动画steps实现js可控动画正序播放，倒序播放，暂停 可以鼠标向上倒序，向下正序，点击播放暂停 代码： <!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>
*{
margin: 0; padding: 0;
}
body{
width: 100%;
height: 100vh;
}
.main{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.unlock{
width: 66px;
height: 88px;
background-repeat: no-repeat;
background-image: url(./privacy_animated__dbfct2heugsy_medium.png);
background-size: auto;
background-position: 0px 0px;
animation: unlock_animation-large 36s steps(1) forwards;
animation-play-state: paused;
animation-iteration-count: 1;
animation-duration: 36s;
}
@keyframes unlock_animation-large {
0% {
background-position: 0px 0px
}
2.7777777778% {
background-position: -66px 0px
}
5.5555555556% {
background-position: -132px 0px
}
8.3333333333% {
background-position: -198px 0px
}
11.1111111111% {
background-position: -264px 0px
}
13.8888888889% {
background-position: -330px 0px
}
16.6666666667% {
background-position: 0px -88px
}
19.4444444444% {
background-position: -66px -88px
}
22.2222222222% {
background-position: -132px -88px
}
25% {
background-position: -198px -88px
}
27.7777777778% {
background-position: -264px -88px
}
30.5555555556% {
background-position: -330px -88px
}
33.3333333333% {
background-position: 0px -176px
}
36.1111111111% {
background-position: -66px -176px
}
38.8888888889% {
background-position: -132px -176px
}
41.6666666667% {
background-position: -198px -176px
}
44.4444444444% {
background-position: -264px -176px
}
47.2222222222% {
background-position: -330px -176px
}
50% {
background-position: 0px -264px
}
52.7777777778% {
background-position: -66px -264px
}
55.5555555556% {
background-position: -132px -264px
}
58.3333333333% {
background-position: -198px -264px
}
61.1111111111% {
background-position: -264px -264px
}
63.8888888889% {
background-position: -330px -264px
}
66.6666666667% {
background-position: 0px -352px
}
69.4444444444% {
background-position: -66px -352px
}
72.2222222222% {
background-position: -132px -352px
}
75% {
background-position: -198px -352px
}
77.7777777778% {
background-position: -264px -352px
}
80.5555555556% {
background-position: -330px -352px
}
83.3333333333% {
background-position: 0px -440px
}
86.1111111111% {
background-position: -66px -440px
}
88.8888888889% {
background-position: -132px -440px
}
91.6666666667% {
background-position: -198px -440px
}
94.4444444444% {
background-position: -264px -440px
}
97.2222222222% {
background-position: -330px -440px
}
to {
background-position: -330px -440px
}
}
#test{
width: 3px; height: 3px; position: absolute;
background-color: red;
transform: scale(2);
font-size: 11px;
text-wrap: nowrap;
}
#test2 {
}
.testScroll{
position: absolute;
width: 200vw;
height: 20px;
display: block;
}
</style>
</head>
<body>
<div id="test"></div>
<div class="testScroll"></div>
<div class="main">
<div id="test2"></div>
<div class="unlock" id="unlock" style='animation-delay: -6s;'></div>
</div>
<script>
let KeyAnim = function(maxKeys, dom, playSort) {
this.curFrameIndex = 0;
this.maxKeys = maxKeys ? maxKeys : 36;
this.dom = dom ? dom : null;
this.playSort = playSort ? playSort : 'asc';
this.paused = false;
this.bindMouseEvent();
}
KeyAnim.prototype.toDo = function() {
document.querySelector('#test2').innerHTML = '排序:' + this.playSort + ',' + (this.paused === false ? '播放' : '暂停')
if (this.paused) {
return;
}
if (this.playSort === 'asc') {
this.curFrameIndex ++;
if(this.curFrameIndex > this.maxKeys) {
this.curFrameIndex = 0;
}
} else {
this.curFrameIndex --;
if(this.curFrameIndex < 0) {
this.curFrameIndex = this.maxKeys;
}
}
this.setCurDelay();
this.autoPlay();
}
KeyAnim.prototype.autoPlay = function() {
// 动画执行
// requestAnimationFrame(this.toDo.bind(this))
setTimeout(this.toDo.bind(this), 1000/6);
}
KeyAnim.prototype.bindMouseEvent = function() {
document.addEventListener('mousedown', (e) => {
this.paused = !this.paused;
if (!this.paused) {
this.autoPlay();
}
})
document.addEventListener('mousemove', (e) => {
// console.log('e', e.movementX, e.movementY)
let curYinterval = Math.abs(e.movementY);
if(curYinterval > 3) {
this.playSort = e.movementY > 0 ? 'asc' : 'desc';
}
// console.log('e',curYinterval, e.movementY)
document.querySelector('#test').style.left = e.pageX + 'px';
document.querySelector('#test').style.top = e.pageY + 'px';
})
}
KeyAnim.prototype.setCurDelay = function() {
this.dom.setAttribute('style', `animation-delay: -${this.curFrameIndex}s`)
}
document.addEventListener('DOMContentLoaded', function(event) {
console.log("DOM fully loaded and parsed"); // 先打印
let curKeyAnim = new KeyAnim(null, document.querySelector('#unlock'));
curKeyAnim.autoPlay();
console.log(curKeyAnim)
});
</script>
</body>
</html>思路来源: https://blog.csdn.net/weixin_48003149/article/details/128790545 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
