[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)