多张图片生成动态图片

**

HTML结构

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

函数封装

**

// 动态图生成函数
//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);
}

多张不同时调用

如果需要时间间隔调用下面方式t为延时的时间 如不需要 则可直接调用

 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)
}

参考网址：https://www.sitepoint.com/frame-by-frame-animation-css-javascript/

最后

以上就是伶俐书本为你收集整理的多张图片生成动态图片的全部内容，希望文章能够帮你解决多张图片生成动态图片所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。