You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
3.4 KiB
104 lines
3.4 KiB
|
|
const TIME_TO_FILL_FPRINT = 2000; //ms
|
|
|
|
const $fprintPaths = document.querySelectorAll('.demo__fprint-path');
|
|
const $endingPaths = document.querySelectorAll('.demo__ending-path');
|
|
const fprintPathSelector = '.demo__fprint-path';
|
|
let fprintPaths = [];
|
|
let lastRafCallTimestamp = 0;
|
|
let curFprintPathsOffset = -1;
|
|
let fprintProgressionDirection = 1;
|
|
let isFprintAnimationInProgress = false;
|
|
let isFprintAnimationOver = false;
|
|
let fprintTick = 0;
|
|
let currentFprintProgresss = 0;
|
|
function offsetAllFprintPaths(ratio) {
|
|
fprintPaths.forEach(path => path.offset(ratio));
|
|
}
|
|
function fprintFrame(timestamp) {
|
|
if (!lastRafCallTimestamp) {
|
|
lastRafCallTimestamp = timestamp;
|
|
window.requestAnimationFrame(fprintFrame);
|
|
return;
|
|
}
|
|
let diff = timestamp - lastRafCallTimestamp;
|
|
fprintTick = (diff / TIME_TO_FILL_FPRINT) * 2;
|
|
lastRafCallTimestamp = timestamp;
|
|
curFprintPathsOffset += fprintTick * fprintProgressionDirection;
|
|
offsetAllFprintPaths(curFprintPathsOffset);
|
|
if (curFprintPathsOffset >= -1 && curFprintPathsOffset <= 1) {
|
|
window.requestAnimationFrame(fprintFrame);
|
|
}
|
|
else if (curFprintPathsOffset > 1) {
|
|
curFprintPathsOffset = curFprintPathsOffset - 2;
|
|
offsetAllFprintPaths(curFprintPathsOffset);
|
|
window.requestAnimationFrame(fprintFrame);
|
|
|
|
}
|
|
else if (curFprintPathsOffset < -1) {
|
|
curFprintPathsOffset = curFprintPathsOffset + 2;
|
|
offsetAllFprintPaths(curFprintPathsOffset);
|
|
window.requestAnimationFrame(fprintFrame);
|
|
}
|
|
}
|
|
|
|
function fprintFrameToProcess(timestamp) {
|
|
if (!lastRafCallTimestamp) {
|
|
lastRafCallTimestamp = timestamp;
|
|
window.requestAnimationFrame(fprintFrameToProcess);
|
|
return;
|
|
}
|
|
let diff = timestamp - lastRafCallTimestamp;
|
|
fprintTick = (diff / TIME_TO_FILL_FPRINT) * 2;
|
|
lastRafCallTimestamp = timestamp;
|
|
curFprintPathsOffset += fprintTick * fprintProgressionDirection;
|
|
offsetAllFprintPaths(curFprintPathsOffset);
|
|
if (curFprintPathsOffset >= -1 && curFprintPathsOffset <= currentFprintProgresss - 1) {
|
|
window.requestAnimationFrame(fprintFrameToProcess);
|
|
}
|
|
else if (curFprintPathsOffset > currentFprintProgresss - 1) {
|
|
curFprintPathsOffset = currentFprintProgresss - 1;
|
|
offsetAllFprintPaths(curFprintPathsOffset);
|
|
lastRafCallTimestamp = 0;
|
|
}
|
|
}
|
|
function setFprintProgress(progress) {
|
|
if (progress == 0) {
|
|
curFprintPathsOffset = -1;
|
|
offsetAllFprintPaths(curFprintPathsOffset);
|
|
}else {
|
|
currentFprintProgresss = progress;
|
|
window.requestAnimationFrame(fprintFrameToProcess);
|
|
}
|
|
}
|
|
|
|
class Path {
|
|
constructor(selector, index) {
|
|
this.index = index;
|
|
this.querySelection = document.querySelectorAll(selector)[index];
|
|
this.length = this.querySelection.getTotalLength();
|
|
this.$ = $(selector).eq(index);
|
|
this.setDasharray();
|
|
this.removesForwards = this.$.hasClass('demo__fprint-path--removes-forwards');
|
|
}
|
|
|
|
setDasharray() {
|
|
this.$.css('stroke-dasharray', `${this.length} ${this.length + 2}`);
|
|
return this;
|
|
}
|
|
offset(ratio) {
|
|
this.$.css('stroke-dashoffset', -this.length * ratio );
|
|
return this;
|
|
}
|
|
makeVisible() {
|
|
this.$.css('visibility', 'visible');
|
|
return this;
|
|
}
|
|
}
|
|
$(document).ready(() => {
|
|
for (let i = 0; i < document.querySelectorAll(fprintPathSelector).length; i++) {
|
|
fprintPaths.push(new Path(fprintPathSelector, i));
|
|
fprintPaths[i].offset(-1).makeVisible();
|
|
}
|
|
//window.requestAnimationFrame(fprintFrame);
|
|
})
|