[HTML] 使用anime.js實現Win10 加載條動畫的樣式

預覽

上一篇中我介紹了使用anime.js實現win10加載圓環的動畫，這次我們實現的是win10加載條的動畫，這個動畫你也應該在Win10上許多地方都能看到，下面就來看預覽吧

WPF 中原生樣式	JS樣式

源碼

話不多說，相信看到效果你也會發現，因爲有WPF版本的參數作爲基礎，JS版本實現的已經非常接近原生樣式了，下面就直接上JS的源碼 ，函數生成的是一個Lodingbar 對象，具體使用請參考anime.js的timeline

/**
 * @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);
};