@drozdik.m/lerp
Version:
Collection of lerp functions.
34 lines (33 loc) • 1.69 kB
JavaScript
exports.__esModule = true;
var Linear_1 = require("../Linear");
var EaseInQuad_1 = require("../EaseInQuad");
var EaseOutCubic_1 = require("../EaseOutCubic");
function Interpolate(from, to, targetElement, lerp) {
//let interpolationValue = 0.01;
var targetVal = to;
var currentFrame = 0;
var duration = 5000;
var timeBetweenFrames = 10;
var animationFrame = function () {
//console.log("Frame: " + currentFrame);
currentFrame += timeBetweenFrames;
var interpolationValue = lerp(from, targetVal, currentFrame, duration);
//console.log(" value: " + interpolationValue);
targetElement.style.left = interpolationValue + "px";
if (currentFrame < duration)
setTimeout(animationFrame, timeBetweenFrames);
};
animationFrame();
}
document.addEventListener("DOMContentLoaded", function () {
document.documentElement.insertAdjacentHTML("beforeend", "<div class='box' id='box1'> </div>");
var box1 = document.getElementById("box1");
Interpolate(0, 500, box1, Linear_1.Linear);
document.documentElement.insertAdjacentHTML("beforeend", "<div class='box' id='box2'> </div>");
var box2 = document.getElementById("box2");
Interpolate(500, 0, box2, Linear_1.Linear);
document.documentElement.insertAdjacentHTML("beforeend", "<div class='box' id='box3'> </div>");
Interpolate(0, 500, document.getElementById("box3"), EaseInQuad_1.EaseInQuad);
document.documentElement.insertAdjacentHTML("beforeend", "<div class='box' id='box4'> </div>");
Interpolate(0, 500, document.getElementById("box4"), EaseOutCubic_1.EaseOutCubic);
});