プレビュー
前回の記事では、anime.jsを使ってwin10ローディングリングのアニメーションを実現する方法を紹介しました。今回はwin10ローディングバーのアニメーションを実装しました。このアニメーションはWin10のさまざまな場所で見られるはずです。見てみましょう。プレビューする
| WPFのネイティブスタイル | JSスタイル |
|---|---|
 |
 |
ソースコード
言うまでもありませんが、WPFバージョンのパラメーターがベースとして使用され、JSバージョンが元のスタイルに非常に近く、JSのソースコードが直接下にアップロードされているため、効果を確認すると効果が見つかると思います。この関数はLodingbarオブジェクトを生成します。特定の用途については、 anime.jsのタイムラインを参照してください
/**
* @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);
};