Android实现TextView/Button背景视图的无限左右循环动画

可以通过HTML+CSS快速实现这个效果，核心是用CSS动画控制倾斜背景的位置，同时借助伪元素避免影响按钮内的文字内容：

HTML结构 #

<button class="animated-btn">按钮文字</button>

CSS样式 #

.animated-btn {
  /* 按钮基础样式 */
  padding: 12px 32px;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  background-color: #333; /* 按钮底色 */
  position: relative;
  overflow: hidden; /* 隐藏超出按钮的背景部分 */
  cursor: pointer;
}

.animated-btn::before {
  /* 倾斜背景层 */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%; /* 宽度设为按钮的2倍，保证滚动时无缝衔接 */
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  ); /* 倾斜的灰色半透明条纹 */
  animation: slide 2s linear infinite; /* 无限循环动画 */
}

@keyframes slide {
  0% {
    transform: translateX(-50%); /* 初始位置在左侧外 */
  }
  100% {
    transform: translateX(0); /* 移动到右侧外，完成一轮循环 */
  }
}

代码说明 #

• 用::before伪元素创建倾斜背景层，避免覆盖按钮文字
• width: 200%和transform: translateX(-50%)配合，保证动画无缝循环，不会出现断层
• 调整animation的第二个参数（2s）可以改变动画速度，数值越小移动越快
• 修改linear-gradient里的颜色值，可以调整背景条纹的深浅和倾斜角度

内容的提问来源于stack exchange，提问作者Roop Kishore