Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Javascript and jQuery script for creating a animation out of Media Encoder image sequence exports
$(function() {
// Main function for creatng the animation loop
function createImgAnimation(imgInfo){
// Pad zero's for Adobe Media Encoder output filenames
Number.prototype.pad = function(size) {
var s = String(this);
while (s.length < (size || 2)) {s = "0" + s;}
return s;
}
let numb = imgInfo.skipFrames;
let fileBase = imgInfo.urlBase+"/"+imgInfo.fileNameBase;
let lengthPad = (imgInfo.imageAmt).toString().length;
function fadeInLastImg(){
let conURL_prev = fileBase+(numb-imgInfo.skipFrames).pad(lengthPad)+"."+imgInfo.fileType; // Fix load flicker
let conURL = fileBase+(numb).pad(lengthPad)+"."+imgInfo.fileType;
$("."+imgInfo.targetClass+"").css("background-image","url("+conURL_prev+"), url("+conURL+")");
numb+=imgInfo.skipFrames;
if(numb>imgInfo.imageAmt){
numb = imgInfo.skipFrames;
}
};
_intervalId = setInterval( function() {
fadeInLastImg();
}, imgInfo.speed);
};
// Create the animation...
// /targetClass is the item you want to cycle images
// urlBase is a folder name / URL
// fileNameBase is the name of each image before the 0's start
// fileType is the image extension
// speed in ms for the loop
// skipFrames will change the framerate and save bandwidth
createImgAnimation({
targetClass: "imageCycle",
urlBase: "lolz",
fileNameBase: "lolz",
fileType: "jpg",
imageAmt: 701,
speed: 300,
skipFrames: 6
});
// Example targeting <div class="imageCycle" style="backround-image: url('lolz/lolz000.jpg');"> </div>
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment