为什么这个动画不统一

Why is this animation not uniform?

本文关键字：不统一 动画 为什么      更新时间：2023-09-26

我有一个扩大和缩小的圆圈，但在10px-20px左右出现了故障。仔细看，你会看到它"抽搐"。

这就好像这个圆圈有一些分配的空间，然后"突破"它

https://jsfiddle.net/nj2u9bhy/4/

$A.Class.create('test',{
    Name: 'Animator',
    E: {
        timer: '#timer'
    },
    init: function(){
        this.animate();
    },
    animate: function(){
        var s = this.E.timer.style;
        var step = 2;
        var state = 'up';
        $A.setInterval(function(){
            $A.log(step);
            s.height = s.width = step + 'px';
            s.borderRadius = step/2 + 'px';
            if(state === 'up') {
                step += 2;
            }
            if(state === 'down') {
                step -= 2;
            }
            if(step === 2) {
                state = 'up';
            }
            if(step === 42){
                state = 'down';
            }
        }, 200);
    } 
});

我试着在这里明确地给它空间：

https://jsfiddle.net/nj2u9bhy/5/

但效果相同。

这是因为它是一个与底部垂直对齐的内联块元素，所以让它与顶部垂直对齐可以解决问题，或者将其更改为块元素。

更新的fiddle

#timer{
  position: relative;
  top: 20px;
  left: 20px;
  display: inline-block;
  width: 32px;
  height: 32px;
  vertical-align: top;
  background-color: black;
  border-radius: 16px;
}

使用CSS动画可以很容易地完成，这将提供更平滑的过渡（注意，IE 9和更早版本不支持CSS动画）

#timer{
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: top;
  background-color: black;
  border-radius: 50%;
  animation: zoom 3s linear infinite;
}
@keyframes zoom {
  0% {width: 0; height: 0;}
  50% {width: 32px; height: 32px;}
  100% {width: 0; height: 0;}
}
<div id="timer">
</div>

相关文章：