Preview
In the previous article , I introduced the use of anime.js to realize the animation of the win10 loading ring. This time we implemented the animation of the win10 loading bar. You should see this animation in many places on Win10. Let’s look at it. Preview it
| Native styles in WPF | JS style |
|---|---|
 |
 |
Source code
Not much to say, I believe you will find the effect when you see the effect, because the WPF version of the parameter is used as the basis, the JS version is very close to the original style, and the source code of JS is directly uploaded below. The function generates a Lodingbar object. Please refer to the timeline of anime.js for specific use
/**
* @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);
};