代码动画-基于JS将带有复选标记的加载圆gif转换为动画

Question

我找到了这个 gif，但它的质量很差，我需要一个更好的。
是否可以基于JS编写gif动画？

Answer 1

是的，这是可能的。你可以做一个大的，录制它的动画，然后把HQ的转成gif格式。

这是解决方案之一：

$.getScript('https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js', function(){

var loading = `<style>
div#container {
  margin: 20px;
  width: 200px;
  height: 200px;
  pointer-events: none;
  user-select: none;
}
div#bkground {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 200px;
  height: 200px;
}
div#bkground div {
  width: 182px;
  height: 182px;
  background-color: #a3a3ff;
  border-radius: 100px;
}
div#whitecircle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 200px;
  height: 200px;
}
div#whitecircle div {
  width: 182px;
  height: 182px;
  background-color: #fff;
  border-radius: 100px;
}
div#tick {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 200px;
  height: 200px;
}
div#tick div {
  color: #E0E0FF;
  font-size: 0;
  font-weight: bold;
}
</style>
<div id="container">
<div id='bkground'><div></div></div>
<div id='whitecircle'><div></div></div>
<div id='tick'><div>✔</div></div>
</div>
</div>`;
$('div#check.check').html(loading);
var bar = new ProgressBar.Circle(container, {
  strokeWidth: 5,
  easing: 'easeInOutExpo',
  duration: 1500,
  color: '#a3a3ff',
  trailColor: '#d1d1ff',
  trailWidth: 5,
  svgStyle: null,  
  from: { color: '#a3a3ff', width: 5 },
  to: { color: '#a3a3ff', width: 5 },
  step: function(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);
    var value = Math.round(circle.value() * 100);
    if (value === 0) {
      circle.setText('');
    } else {
      circle.setText(value);
    }
  }
});
bar.text.style.color = 'transparent';
bar.animate(1.0);
var interval2 = setInterval(function(){
  if ($('div.progressbar-text').text() == '100') {
    clearInterval(interval2);
    $('div#whitecircle div').animate({
      width: 0,
      height: 0
    }, 333, function(){
      $('div#tick div').animate({
        fontSize: 150
      }, 333);
    });
  };
}, 100);
  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<div class='check' id='check'></div>

主要参数：
width 和 height（ori.=200px）
width 和 height（ori.=182px）
border-radius
easing (ori.= 'easeInOutExpo')
div#tick div（复选标记的 font-family）
更多bar的参数，请访问this page.

来源：kimmobrunfeldt

代码动画-基于JS将带有复选标记的加载圆gif转换为动画

Code animation - Convert a loading circle gif with check mark to animation based on JS

jquery

animation

animated-gif