Question

我想在等待异步调用完成时为按钮设置动画。禁用按钮并将微调器放置在按钮的中间或旁边显然可以，但是现在感觉有些无聊。我认为循环播放一些边框动画会很好。类似于

具体来说，是他们演示的第三个按钮。它在悬停时很好地填充了边框，但是我想的是填充完边界后，它会沿相同方向撤消边框颜色。如果愿意，它将“追逐”另一个动画。

我在摆弄他们的CSS，但似乎无法弄清楚如何循环播放边框动画（我确实成功地反转了动画），但是由于：before和：after，我一直在努力使其循环播放

所以我想主要的任务是，当动画依靠:: before和:: after css选择器时，如何循环播放它。为简化起见，我将如何循环以下CSS？（我意识到这不只是CSS，但总的来说，您将如何循环播放？）

.btn-1::before{
  right: 0;
  top: 0;
}
.btn-1::after{
  left: 0;
  bottom: 0;
}
.btn-1:hover::before, .btn-1:hover::after{
  transition-delay: 0s;
}

Answer 1

您要使用的是CSS动画，并使其继续通过animation-iteration-count: infinite在动画中循环播放。

这是下面的样子：https://codepen.io/jerrylow/pen/eXmroN?editors=1100

为了简化成像，我们希望每个边的持续时间为1s。总时间为8s，因为每边1s连续4边乘以2，因为存在展开周期。一侧的动画如下：

@keyframes btn-border-top {
  0% {
    left: auto;
    right: 0;
    width: 0%;
  }
  12.5% {
    left: auto;
    right: 0;
    width: 100%;
  }
  12.6% {
    left: 0;
    right: auto;
  }
  50% {
    width: 100%;
  }
  62.5% {
    width: 0%;
  }
  100% {
    left: 0;
    right: auto;
    width: 0%;
  }
}

动画将在整个8s上运行，因此您要在第5秒钟展开12.5%的完整周期（4s）后，50% - 62.5%的1/8是final float len = getResources().getDisplayMetrics().densityDpi/6; linear1.setOnTouchListener(new View.OnTouchListener() { float initX; float initY; @Override public boolean onTouch(View v, MotionEvent event) { switch(event.getAction()) { case MotionEvent.ACTION_DOWN: initX = event.getX(); initY = event.getY(); break; case MotionEvent.ACTION_UP: initX -= event.getX(); initY -= event.getY(); if (initY > len) { //Logic For Swipe Right } else if(initY < -len) { //Logic For Swipe Left } break; } return false; } });（12.5 * 5）。之后，我们要一直保持“结束”状态直到下一个周期。

编辑：如果您希望在下一个周期开始之前开始一个周期的重叠，则可以通过自己计算时间来计算百分比。

按钮加载指示器边框动画

1 个答案: