Avance
En el artículo anterior , presenté el uso de anime.js para realizar la animación del anillo de carga de win10. Esta vez implementamos la animación de la barra de carga de win10. Debería ver esta animación en muchos lugares en Win10. Veámosla. Vista previa
| Estilos nativos en WPF | Estilo JS |
|---|---|
 |
 |
Código fuente
No hay mucho que decir, creo que encontrará el efecto cuando vea el efecto, porque la versión WPF del parámetro se usa como base, la versión JS está muy cerca del estilo original y el código fuente de JS se carga directamente a continuación. La función genera un objeto Lodingbar. Consulte la línea de tiempo de anime.js para un uso específico
/**
* @param {} size
* @param {} dotsize
* @param {} color
* @param {} autosize
*/
function CreateLodingBar(size, dotsize, color, autosize) {
var bar = Object();
//#region Create Object
function CreateBarStyle(size) {
return "display:block;" + "position:absolute;" + "overflow:hidden;" + ("width:" + size.w + "px;") + ("height:" + size.h + "px;");
}
function CreateTrackStyle(dotsize) {
return "display:block;" + "position:absolute;" + ("width:" + dotsize + "px;") + ("height:" + dotsize + "px;");
}
function CreateDotSize(size, dotsize, color) {
return (
"display:block;" +
"position:absolute;" +
("top:" + (size.h - dotsize) / 2 + "px;") +
("width:" + dotsize + "px;") +
("height:" + dotsize + "px;") +
("border-radius:" + dotsize / 2 + "px;") +
("background-color:" + color)
);
}
var loadingbar = document.createElement("div");
loadingbar.id = "LodingBar";
loadingbar.style.cssText = CreateBarStyle(size);
for (var i = 0; i < 5; i++) {
var track = document.createElement("div");
track.className = "t" + (i + 1);
track.style.cssText = CreateTrackStyle(dotsize);
var dot = document.createElement("span");
dot.className = "d" + (i + 1);
dot.style.cssText = CreateDotSize(size, dotsize, color);
track.appendChild(dot);
loadingbar.appendChild(track);
}
document.body.appendChild(loadingbar);
//#endregion
//#region Create Animation
function CreateTimeLine(wellpos, dotsize) {
var tl = anime.timeline({
loop: true,
autoplay: false
});
var offset = 0;
tl.add(
{
targets: "#LodingBar",
translateX: [
{
value: -wellpos / 2, duration: 0, easing: "linear" },
{
value: (2 * wellpos) / 1.5, duration: 3917, easing: "linear" }
]
},
0
);
for (var i = 0; i < 6; i++) {
offset = (500 / 3) * i;
tl.add(
{
targets: "#LodingBar .d" + (i + 1),
translateX: [
{
value: 0, duration: 0, easing: "steps(1)" },
// { value: 0, duration: offset, easing: easefunc },
{
value: wellpos, duration: 1000, easing: "cubicBezier(0.4,0,0.6,1)", delay: offset },
// { value: wellpos, duration: 1000, easing: easefunc },
{
value: 2 * wellpos, duration: 1000, easing: "cubicBezier(0.4,0,0.6,1)", delay: 1000 }
],
opacity: [
{
value: 0, duration: 0, easing: "linear" },
{
value: 1, duration: offset, easing: "linear" },
{
value: 0, duration: 1000, easing: "linear", delay: 2000 }
]
},
0
).add(
{
targets: "#LodingBar .t" + (i + 1),
translateX: [
{
value: 0, duration: 0, easing: "steps(1)" },
{
value: 3 * dotsize * (5 - i), duration: 500, easing: "linear", delay: offset },
{
value: 100, duration: 1000, easing: "linear", delay: 1500 }
]
},
0
);
}
return tl;
}
//#endregion
if (autosize) {
addEventOnResize(bar, bar => {
var newsize = document.body.clientWidth;
bar.obj.style.cssText = CreateBarStyle({
w: newsize, h: bar.parameter[0].h });
// bar.obj.childNodes.forEach(child => {
// child.style.cssText = CreateTrackStyle({ w: newsize, h: bar.parameter[0].h });
// });
if (bar.timeline) {
bar.reload = !bar.timeline.paused;
bar.timeline.pause();
bar.timeline = null;
bar.timeline = CreateTimeLine(newsize / 3, bar.parameter[1]);
if (bar.reload) setTimeout(autoResume, 240, bar);
}
});
}
function autoResume(obj) {
obj.parameter[0].w === document.body.clientWidth ? obj.timeline.play() : ((obj.parameter[0].w = document.body.clientWidth), setTimeout(autoResume, 240, obj));
}
function addEventOnResize(Object, fn) {
var originFn = window.onresize;
window.onresize = function() {
originFn && originFn();
fn(Object);
};
}
bar.reload = false;
bar.parameter = [size, dotsize, color, autosize];
bar.obj = loadingbar;
bar.timeline = CreateTimeLine(size.w / 3, dotsize);
return bar;
}
以及使用
window.onload = function() {
// anime({
// targets: '#PNG',
// strokeDashoffset: [anime.setDashoffset, 0],
// easing: 'easeInOutSine',
// duration: 1500,
// delay: function(el, i) { return i * 250 },
// direction: 'alternate',
// loop: true
// });
var LBAR = this.CreateLodingBar({
w: 480, h: 10 }, 4, "#000000", true);
this.LBAR.timeline.play();
// intervalid = window.setInterval(this.PlayAnimation, 1500);
};