Question

我有一个GIF动画，我在我的网站上用作保存/加载图标： Loader icon

由于不同背景颜色的边缘，我想将其更改为PNG动画。

当我想在此时显示装载程序时，我只需要确保以下范围可见：

<span class="loader"></span>

有几种方法可以在文档中插入此跨度：通过敲除可见绑定，通过JS，仅通过样式表等。

问题

我不希望我的动画代码知道这个范围最终在文档中可见，我只是希望他为它设置动画。

当然，每个帧（16 fps）扫描整个文档以获取具有“加载器”类的潜在新跨度，只需以了解哪些位置属性需要设置动画效果不是很好。

那么做一个文档广泛的png动画会有什么好的表现方式呢？

请注意，我确实需要支持IE8 :(

Answer 1

将sprite与CSS background-position结合使用时，请立即考虑： enter image description here （是的，我知道它是一个非常糟糕的，但它会完成这项工作）。

你提到了Knockout，并且其目的是将逻辑与表示分开，我将使用它。但是，完全将它分开，我知道这并不会带来性能成本（参见您的评论）。通常在Knockout中bindingHandlers用于独立于viewModel进行DOM操作。

Haven未经过测试，但通常应该在IE8上运行。运行下面的代码片段进行演示

＆＃13;

ko.bindingHandlers.loadIndicator = {
  update: function(element, valueAccessor) {
    var val = ko.unwrap(valueAccessor());
    if (val == true) {
      var intv = setInterval(function() {
        var bgX = parseInt(element.style.backgroundPosition.split(' ')[0].replace('px',''));
        if (bgX > -48) // 4 frames of 14px
          element.style.backgroundPosition = (bgX - 14) + 'px';
        else 
          element.style.backgroundPosition = '0px';
      }, 150);
      element.style.display = 'block';
    } else {
      element.style.display = 'none';
      clearInterval(intv);
    }
  }
};
var app = { loading: ko.observable(true) };
ko.applyBindings(app);
// simulate 'loaded' after 3 secs
setTimeout(function() { app.loading(false); }, 3000);

＆＃13;

.loader {
   display: block;
   width: 14px;
   height: 14px;
   background-image: url(http://i.imgur.com/1OZACw8.png);
 }

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<span class="loader" data-bind="loadIndicator: loading"></span>

＆＃13;

如果您认为自定义绑定不值得，可以将visible绑定与透明动画GIF 结合使用（是的，可以）。例如，请参阅：http://blog.ciuly.com/general/internet/making-animated-gif-transparent-with-gimp/。无论您选择何种方式，您都必须跟踪某些内容是否已完成加载/保存，例如在KO可观察属性中。

不想使用Knockout？你可以在vanilla JS / jQuery中做同样的事情。但是，因为你必须从某个地方跟踪状态，你必须要间隔检查DOM属性（这与Knockout在observable上自动执行的操作相同）或者选择以下方法的变体来调用init / stop隐藏/显示加载器的功能。

function loader(container) {
  var elem = document.createElement('span');
  elem.className = 'loader';
  container.appendChild(elem);

  var intv = setInterval(function() {
    var bgX = parseInt(elem.style.backgroundPosition.split(' ')[0].replace('px',''));
    if (bgX > -48) // 4 frames of 14px
      elem.style.backgroundPosition = (bgX - 14) + 'px';
    else 
      elem.style.backgroundPosition = '0px';
  }, 150);

  this.stop = function() { 
    clearInterval(intv);
    container.removeChild(elem);
  };
}
var x = new loader(document.body);
setTimeout(function() { x.stop() }, 10000);

表现方面我相信带有visible绑定的动画透明GIF和香草init/stop方法是最佳候选者。

最高效的文档广泛PNG动画方式

1 个答案: