旋转颜色变化，类似于 Edge 照明 Android答案

【问题标题】：Rotating color change, something like the Edge lighting Android旋转颜色变化，类似于 Edge 照明 Android
【发布时间】：2017-11-02 10:21:52
【问题描述】：

我正在尝试在我的背景边框周围设置旋转颜色变化的动画，类似于此链接中显示的内容：https://www.youtube.com/watch?v=hmxA1qvZlxs

一直在寻找线索，但没有找到任何有用的东西。

我正在使用 ValueAnimator 进行边框颜色过渡，但无法像视频中那样让它“旋转”或“旋转”。我的代码如下：

ValueAnimator anim = new ValueAnimator();
        anim.setIntValues(Color.parseColor("#FFFFFF"), Color.parseColor("#FFFF0000"));
        anim.setEvaluator(new ArgbEvaluator());
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                bgShape.setStroke(10, (Integer)valueAnimator.getAnimatedValue());
            }
        });

        anim.setDuration(10000);
        anim.setRepeatCount(1);
        anim.setInterpolator(new CycleInterpolator(10));
        anim.setRepeatMode(ValueAnimator.REVERSE);
        anim.start();

任何有想法或解决此问题的人可以为我指明正确的方向吗？

【问题讨论】：

我猜你还需要在onAnimationUpdate 中指定颜色的新值？ anim.setIntValues(Color.parseColor(NEW_RANDOM_VALUE_OF_COLOR_HERE), Color.parseColor(NEW_RANDOM_VALUE_OF_COLOR_HERE))
嗨，我试过了，但它没有给我旋转效果。感谢您的意见。
有什么解决办法吗？

标签： javascript android animation colors

【解决方案1】：

如果您可以使用 android WebView，您可以为此使用纯 CSS。像这样的东西可以达到这种效果：

body {
  font-family: sans-serif;
}

#mobile {
  width: 350px;
  height: 600px;
  background: black;
  border-radius: 50px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#mobile:after {
  content: "";
  width: 20px;
  height: 20px;
  background: white;
  position: absolute;
  top: 5px;
  left: 165px;
  border-radius: 100%;
}
#background {
  position: absolute;
  background: white;
  width: 310px;
  height: 540px;
  border-radius: 50px;

  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
#foreground {
  position: absolute;
  background: #333;
  width: 300px;
  height: 530px;
  border-radius: 50px;
}

#rotating-box {
  border-radius: 50px;
  min-width: 200%;
  height: 200%;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
  background-image: linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="mobile">
      <div id="background">
        <div id="rotating-box"></div>
      </div>
      <div id="foreground"></div>
    </div>
  </body>
</html>

【讨论】：