通过CSS动画实现圆形进度条

温暖全栈
734 阅读5分钟

QQ2024920-143913.gif

1. WXML结构部分

<view class="circleProgress_wrapper" bind:longpress="startCountDown" bind:touchend="endCountDown">
  <view class="wrapper right">
    <view class="circleProgress rightcircle {{ animation ? 'animation' : '' }}"></view>
  </view>
  <view class="wrapper left">
    <view class="circleProgress leftcircle {{ animation ? 'animation' : '' }}"></view>
  </view>
  <view class="inner">
    <view class="block"></view>
    <view class="text">结束</view>
  </view>
</view>
  • bind:longpress="startCountDown" 和 bind:touchend="endCountDown"：分别绑定了长按和触摸结束事件，用于启动和停止倒计时动画。
  • rightcircle 和 leftcircle 这两个视图分别负责右半部分和左半部分进度条的显示，并在动画激活时添加 animation 类。

2. CSS样式部分

这段代码实现了一个圆形进度条的效果，采用了 CSS 和动画来创建动态效果。下面是详细的解析：

外部结构 .circleProgress_wrapper

.circleProgress_wrapper {
  width: 200rpx;
  height: 200rpx;
  margin: 50rpx auto;
  position: relative;
}
  • width: 200rpx; height: 200rpx;：设置了圆形进度条的外部容器的宽高为200rpx。
  • margin: 50rpx auto;：将该容器水平居中，并且上下有50rpx的间隔。
  • position: relative;：设置 position: relative，使得其内部子元素可以通过 position: absolute 定位。

进度条容器 .wrapper

.wrapper {
  width: 100rpx;
  height: 200rpx;
  position: absolute;
  top: 0;
  overflow: hidden;
}
  • width: 100rpx; height: 200rpx;：设置容器宽度为100rpx，内部高度仍然是200rpx。
  • position: absolute;：让 .wrapper 定位到父容器 .circleProgress_wrapper 的顶部。
  • overflow: hidden;：使得容器的内容溢出部分不可见。

左右部分 .right 和 .left

.right {
  right: 0;
}

.left {
  left: 0;
}
  • .right 和 .left 通过 position: absolute; 定位，用于在圆形进度条的左右两侧放置旋转的进度条动画。

圆形进度条 .circleProgress

.circleProgress {
  width: 190rpx;
  height: 190rpx;
  border: 5rpx solid #E5E5E5;
  border-radius: 50%;
  position: absolute;
  top: 0;
}
  • width: 190rpx; height: 190rpx;：设置了一个 190rpx 的正方形，宽高一致，形状为圆形。
  • border: 5rpx solid #E5E5E5;：圆形外边框宽度为5rpx，颜色为淡灰色，表示未完成的进度部分。
  • border-radius: 50%;：设置为圆形。
  • position: absolute; top: 0;：将其定位在父容器的顶部。

内部圆形和文字 .inner

.inner {
  width: 180rpx;
  height: 180rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: absolute;
  top: 9.5rpx;
  left: 11.5rpx;
  background: #FE9D45;
  color: #FFFFFF;
  font-size: 26rpx;
}
  • width: 180rpx; height: 180rpx;：设置比外圆形小的内圆形，形成边框。
  • display: flex; flex-direction: column; align-items: center; justify-content: center;：使用 Flexbox 来居中内容，确保里面的文本或块元素都处于中央。
  • border-radius: 50%;：内圆形设置为圆形。
  • background: #FE9D45; color: #FFFFFF;：内圆背景颜色为橙色，文本颜色为白色。
  • font-size: 26rpx;：设置字体大小为26rpx。

进度条内小块 .block

.block {
  width: 30rpx;
  height: 30rpx;
  border-radius: 5rpx;
  background: #FFFFFF;
  margin-bottom: 12rpx;
}
  • width: 30rpx; height: 30rpx;：小块的尺寸为30rpx，形成圆角矩形。
  • border-radius: 5rpx;：边角圆滑。
  • background: #FFFFFF; margin-bottom: 12rpx;：背景为白色，并设置下边距为12rpx，用来分隔其他内容。

左右进度条 .rightcircle 和 .leftcircle

.rightcircle {
  right: 0;
}

.leftcircle {
  left: 0;
}
  • .rightcircle 和 .leftcircle 定位于圆形的左右两侧，作为进度条的动态部分。

动画效果 circleProgressLoad_right 和 circleProgressLoad_left

.rightcircle.animation {
  border-top: 5rpx solid #FE9D45;
  border-right: 5rpx solid #FE9D45;
  animation: circleProgressLoad_right 2s linear infinite;
}
.leftcircle.animation {
  border-bottom: 5rpx solid #FE9D45;
  border-left: 5rpx solid #FE9D45;
  animation: circleProgressLoad_left 2s linear infinite;
}
  • .rightcircle.animation 和 .leftcircle.animation：这两个类分别表示右半部分和左半部分的进度条，动画的核心是在这些类中实现的。
  • animation: circleProgressLoad_right 2s linear infinite;：为右半部分进度条添加了一个 2秒循环的动画，动画名称为 circleProgressLoad_right。
  • animation: circleProgressLoad_left 2s linear infinite;：左半部分的进度条同样添加了动画 circleProgressLoad_left。

关键帧动画 @keyframes

右半部分动画 circleProgressLoad_right

@keyframes circleProgressLoad_right {
  0% {
    border-top: 5rpx solid #FE9D45;
    border-right: 5rpx solid #FE9D45;
    -webkit-transform: rotate(45deg);
  }

  50% {
    border-top: 5rpx solid #FE9D45;
    border-right: 5rpx solid #FE9D45;
    border-left: 5rpx solid #E5E5E5;
    border-bottom: 5rpx solid #E5E5E5;
    -webkit-transform: rotate(225deg);
  }

  100% {
    border-left: 5rpx solid #E5E5E5;
    border-bottom: 5rpx solid #E5E5E5;
    -webkit-transform: rotate(225deg);
  }
}
  • 0%：设置右半部分的边框颜色为橙色，旋转45度。
  • 50%：过渡阶段，左侧和下方边框颜色变为灰色，旋转225度。
  • 100%：完成时，左侧和下方完全是灰色，表示进度已完成的一部分。

左半部分动画 circleProgressLoad_left

@keyframes circleProgressLoad_left {
  0% {
    border-bottom: 5rpx solid #FE9D45;
    border-left: 5rpx solid #FE9D45;
    -webkit-transform: rotate(45deg);
  }

  50% {
    border-bottom: 5rpx solid #FE9D45;
    border-left: 5rpx solid #FE9D45;
    border-top: 5rpx solid #E5E5E5;
    border-right: 5rpx solid #E5E5E5;
    -webkit-transform: rotate(45deg);
  }

  100% {
    border-top: 5rpx solid #E5E5E5;
    border-right: 5rpx solid #E5E5E5;
    -webkit-transform: rotate(225deg);
  }
}
  • 0%：设置左半部分的边框颜色为橙色，旋转45度。
  • 50%：过渡阶段，右侧和上方边框颜色变为灰色，旋转45度。
  • 100%：完成时，右侧和上方完全是灰色，表示进度已完成。

3. JavaScript部分

Component({
  /**
   * 组件的初始数据
   */
  data: {
    animation: false,
    timer: null as any
  },

  /**
   * 组件的方法列表
   */
  methods: {
    startCountDown() {
      const that = this
      this.setData({
        animation: true,
        timer: setTimeout(() => {
          that.triggerEvent('end')
          that.setData({
            animation: false
          })
        }, 2000)
      })
    },
    endCountDown() {
      clearTimeout(this.data.timer)
      this.setData({
        animation: false,
        timer: null
      })
    }
  }
})

startCountDown()

  • startCountDown() 是长按事件的处理函数。调用时会启动倒计时动画并设置一个 2 秒钟的延时：
  • this.setData({ animation: true })：开启动画，添加 animation 类。
  • this.setData({ timer: setTimeout(...) })：设置一个定时器，2 秒后执行结束逻辑，并触发 end 事件。

endCountDown()

  • endCountDown() 是触摸结束事件的处理函数，用于清除定时器并停止动画：
  • clearTimeout(this.data.timer)：清除之前的定时器。
  • this.setData({ animation: false, timer: null })：停止动画并重置定时器。

4. 总结

  • 这段代码通过使用 @keyframes 定义了两个旋转动画，分别给右半圆和左半圆应用不同的颜色变化，模拟进度条的加载效果。
  • 通过 position 和 flexbox 布局，整体进度条是一个嵌套的结构，外部有一个容器 .circleProgress_wrapper，内部是由多个部分组成的圆形进度条。
  • 最终的效果是一个不断旋转的进度条，右半部分和左半部分交替显示红色和灰色，模拟加载进度。
avatar
文章
阅读
粉丝