多张图片生成动态图片

1
2
3
4

<img class="airdrop" src="./images/icons/airdrop/LandingPageAnimation_airdrop_00018.png" alt="">
//可以多张、也可单张

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// 动态图生成函数
//path:文件路径
// prefix：图片文件的公共前缀（序数之前的文件名部分）（文件名不能包含中文）
// format:图片格式
// start: 图片文件名开始的序数(最小的序数)（不一定从1开始）
// totalFrames:图片文件名最大序数（结束的序数）
// objet:img标签的类名
function dynamic(path, prefix, format, start, totalFrames, objet) {
const $element = $(`.${objet}`);
const imagePath = path;
const animationDuration = 3000;
const timePerFrame = animationDuration / totalFrames;
let timeWhenLastUpdate;
let timeFromLastUpdate;
let frameNumber = start;
function step(startTime) {
if (!timeWhenLastUpdate) timeWhenLastUpdate = startTime;
timeFromLastUpdate = startTime - timeWhenLastUpdate;
if (timeFromLastUpdate > timePerFrame) {
$element.attr('src', imagePath + `/${prefix}${frameNumber}.${format}`);
// reset the last update time
timeWhenLastUpdate = startTime;
// then increase the frame number or reset it if it is the last frame
if (frameNumber >= totalFrames) {
frameNumber = start;
return
} else {
frameNumber = frameNumber + 1;
}
}
requestAnimationFrame(step);
}
$(document).ready(() => {
for (var i = start; i < totalFrames + 1; i++) {
$('body').append(`<div id="preload-image-${i}" style="background-image: url('${imagePath}/${prefix}${i}.${format}');"></div>`);
}
});
requestAnimationFrame(step);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 var ani = {
a: {
path: ['./images/mac', '000', 'jpg', 1, 74, 'mac'],
t: 0
},
b: {
path: ['./images/icons/like', 'LandingPageAnimation_like_000', 'png', 1, 64, 'like'],
t: 500
},
c: {
path: ['./images/icons/excel', 'LandingPageAnimation_excel_000', 'png', 20, 64, 'excel'],
t: 1000
},
d: {
path: ['./images/icons/photo', 'LandingPageAnimation_photo_000', 'png', 33, 64, 'photo'],
t: 1500
},
e: {
path: ['./images/icons/app', 'LandingPageAnimation_app_000', 'png', 21, 64, 'app'],
t: 2000
},
f: {
path: ['./images/icons/m1', 'LandingPageAnimation_m1_000', 'png', 35, 64, 'm1'],
t: 2000
},
g: {
path: ['./images/icons/airdrop', 'LandingPageAnimation_airdrop_000', 'png', 18, 64, 'airdrop'],
t: 2500
},
h: {
path: ['./images/icons/camera', 'LandingPageAnimation_camera_000', 'png', 26, 64, 'camera'],
t: 2000
},
i: {
path: ['./images/icons/notes', 'LandingPageAnimation_notes_000', 'png', 24, 64, 'notes'],
t: 500
},
k: {
path: ['./images/icons/safari', 'LandingPageAnimation_safari_000', 'png', 29, 64, 'safari'],
t: 2500
},
}
for (let key in ani) {
setTimeout(() => {
dynamic(...ani[key].path)
}, ani[key].t)
}