Question

您好我正在尝试围绕我的背景边框旋转颜色变化，如此链接中显示的那样：https://www.youtube.com/watch?v=hmxA1qvZlxs

长期以来一直在寻找线索，但还没找到任何有用的东西。

我正在使用ValueAnimator进行边框颜色转换，但我却迷失了它的旋转效果。或者＆＃39;旋转＆＃39;如在视频中。我的守则如下：

＆＃13;

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();

＆＃13;

有想法或解决这个问题的任何人都可以指出我正确的方向吗？

非常感谢任何帮助。

Answer 1

可能是动画是在Android Studio之外完成的，gif是png在里面，只有在gif显示的边框之外？

Answer 2

如果您可以使用 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>

旋转颜色变化，类似于Edge lighting Android

2 个答案: