可视化大屏-实现数字动效效果

1、背景：
可视化大屏想要页面看起来不那么死板的话，可以做一些动态效果，实现方式有很多，比如具有动效的图片、视频，CSS样式，CSS+JS等来实现。主要是利用animation属性****+ @keyframes来实现
本文主要使用CSS样式实现动效，利用JS控制生效的时间间隔

2、实现效果：

数字滚动

3、效果图的完整代码：
CSS样式：

.scroll-animation {
  animation: scroll 1s;   // 1秒的动效
  animation-fill-mode: forwards; /* 保持动画结束状态 */
}
@keyframes scroll {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

JS控制动效的间隔时间（若需求动态频率在几秒内 可以不需要JS来控制，直接在 animation把时间设置高一点）

const  isShowAnimation = ref(false);
function triggerAnimation() {  // 控制页面动效的间隔 利用样式class类的显示与隐藏来控制
  isShowAnimation.value = true;
    setTimeout(() => {
      isShowAnimation.value = false;
    }, 1000); // 1秒后暂停动画
  }
onMounted(() => {
  setInterval(triggerAnimation, 150000);  // 这里设置了15秒后 才动效一次
})
//注：记得离开页面时销毁定时器哦

HTML页面
<div :class="{'scroll-animation': isShowAnimation}"> 合格率 </div>

4、补充：
若你页面动效间隔比较短的话，我们可以直接用CSS样式实现，就更简单了，如：

.scroll-animation {
   animation: scroll  2s  forwards infinite;  // infinite是无限循环 默认是1 表示只动态1次
}
@keyframes scroll {   // 动效的效果设置
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

5、Animation属性说明：

• animation-name: 指定要绑定到元素的关键帧名称。这是必需的。
• animation-duration: 指定动画完成一个周期所需的时间，默认值是 0s。
• animation-timing-function: 指定动画速度变化的函数，默认值是 ease。
• animation-delay: 指定动画开始前的延迟时间，默认值是 0s。
• animation-iteration-count: 指定动画应该播放的次数，默认值是 1。可以使用 infinite 表示无限次循环。
• animation-direction: 指定动画播放的方向，默认值是 normal。其他值包括 reverse、alternate 和 alternate-reverse。
• animation-fill-mode: 指定动画在开始之前和结束之后应用于元素的样式，默认值是 none。其他值包括 forwards、backwards 和 both。
• animation-play-state: 指定动画的播放状态，默认值是 running。其他值包括 paused。