猞猁

马黑黑 · 发表于 2022-7-22 07:44

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

loading ...

00:00

马黑黑 · 发表于 2022-7-22 07:47

本帖使用JS原生的animate方法制作动画，不支持IE。帖子代码：

<style>
#papa { margin: auto; width: 1024px; height: 640px; display: grid; place-items: center; background: linear-gradient(235deg, #FFFFFF 0%, #000F25 100%), linear-gradient(180deg, #6100FF 0%, #000000 100%), linear-gradient(235deg, #FFA3AC 0%, #FFA3AC 40%, #00043C calc(40% + 1px), #00043C 60%, #005D6C calc(60% + 1px), #005D6C 70%, #00C9B1 calc(70% + 1px), #00C9B1 100%), linear-gradient(125deg, #FFA3AC 0%, #FFA3AC 40%, #00043C calc(40% + 1px), #00043C 60%, #005D6C calc(60% + 1px), #005D6C 70%, #00C9B1 calc(70% + 1px), #00C9B1 100%); background-blend-mode: soft-light, screen, darken, normal; overflow: hidden; box-shadow: 3px 3px 24px #000; position: relative; }
#son { width: 700px; box-shadow: inherit; box-shadow: 2px 2px 8px #000; }
#papa p { margin: 0; padding: 0; }
#papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
#playbox { position: absolute; left: 10px; bottom: 10px; padding: 10px; font: normal 1em sans-serif; color: #eee; background: rgba(255,255,255,.2); border-radius: 8px; backdrop-filter: blur(1px); overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>
<div id="papa">
<img id="son" alt="" src="https://638183.freep.cn/638183/t22/animal/sl1.jpg" />
<div id="playbox">
<p id="geci" style="font-size: 1.2em; text-shadow: 1px 1px 1px #222">loading ... </p>
<p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
<input id="btnplay" type="button" value=">" />
<input id="slider" type="range" min="0" max="100" value="0" />
<span id="per">00:00</span>
</p>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1294924331.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let idx = 0, picId = 0;
let lrcAr = [ ['0.00','纯音乐 - Lynx'], ['150.00','歌手 - ELE SHEEP'], ['180.00','祝消暑愉快'] ];
aniPlay();
setInterval(aniPlay, 4000);
slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
slider.value = prog;
per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++){
if(aud.currentTime >= lrcAr[j][0]) geci.innerHTML = lrcAr[j][1];
}
});
let toMin = (val) => {
if(!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60);
let sec = parseFloat(val % 60);
if(min < 10) min = '0' + min;
if(sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
function aniPlay() {
let picAr = Array.from({length:10}, (_, x) => 'https://638183.freep.cn/638183/t22/animal/sl' + (x+1) + '.jpg');
let aniAr = [
[ { transform: 'translateX(-150%)' }, { transform: 'translateX(0)' } ],
[ { transform: 'translateX(0)' }, { transform: 'translateX(150%)' } ],
[ { transform: 'translateX(150%)' }, { transform: 'translateX(0)' } ],
[ { transform: 'translateY(0)' }, { transform: 'translateY(150%)' } ],
[ { transform: 'translateY(150%)' }, { transform: 'translateY(0)' } ],
[ { transform: 'translateY(0)' }, { transform: 'translateY(-150%)' } ],
[ { transform: 'translateY(-150%)' }, { transform: 'translateY(0)' } ],
[ { transform: 'translateX(0)' }, { transform: 'translateX(-150%)' } ]
];
son.animate(aniAr[idx], { duration: 3000, iterations: 1, fill: 'forwards', delay: 0, easing: 'linear', },);
if(idx % 2 == 0) {
son.src = picAr[picId];
picId ++;
if(picId > picAr.length - 1) picId = 0;
}
idx ++;
if(idx > aniAr.length - 1) idx = 0;
}
</script>

复制代码

马黑黑 · 发表于 2022-7-22 07:52

最初制作的时候，动画使用精准尺寸控制。换上图片后，需要将son盒子的height设置为不固定（就是不设置），所以改用百分比。使用本例，可能需要观察图片移动效果，太远或没能完全移出父盒子时，调整aniPlay函数中的数组 aniAr 内的 translateX和translateY百分比的值。

马黑黑 · 发表于 2022-7-22 07:55

JS用到的图片地址，也封装在了 aniPlay 函数内，就这一句：

let picAr = Array.from({length:10}, (_, x) => 'https://638183.freep.cn/638183/t22/animal/sl' + (x+1) + '.jpg');

可以更换 picAr 数组为传统数组表达方法：

let picAr = [
'图片1',
   '图片2',
   '图片。。。',
   '图片N'
];

马黑黑 · 发表于 2022-7-22 08:04

关于动画更换与运行速度：

setInterval(aniPlay, 4000);

上句，规定一动作轮换的时长。一个动作轮换，指同一张图片出场或退场这两个动作，每一个动作单独计时， 4 秒；

下一句：

son.animate(aniAr[idx], { duration: 3000, iterations: 1, fill: 'forwards', delay: 0, easing: 'linear', },);

红色部分，表示每一个动作，即出场或退场的动作，发生在3秒内。这与前面的定时器 4 秒的设定不矛盾：完成动作需要3秒，两个动作之间间隔时长需要4秒。