微信小程序开发之——CSS动画仿上传及完成

发表于 分类于 ， ， 阅读时长 ≈ 3 分钟

一 功能预览

加载中 加载完成 加载中，3s后完成

二 CSS动画-加载中

3.1 要选中的图形

3.2 CSS-keyframes 旋转动画

布局文件

1
2
3
4
5
6
<view class="container">
  <view class="box" bindtransitionend="transitionEnd" bindanimationstart="animationStart" bindanimationiteration="animationIteration">
    <image id="loading" class="{{extraClasses}}" src="/images/icon_loading.png"></image>
    <text>加载中...</text>
  </view>
</view>

样式文件(wxss)

1
2
3
4
5
6
7
8
9
10
11
.box image {

  width: 100rpx;
  height: 100rpx;
  animation: loading 3s infinite linear;
}
@keyframes loading {
  0% {transform: rotate(0deg);}
  50% {transform: rotate(180deg);}
  100% {transform: rotate(360deg);}
}

animation说明：

  • 其中loading是下面keyframes中的名字
  • 3s：3s转一圈(时间越短，转速越快)
  • linear：线性变化
  • infinite：永远播放

keyframes loading 说明：

  • 0%：执行刚开始旋转多少度
  • 50%：执行一半时旋转多少度
  • 100%：执行完成时旋转多少度

三 加载完成

3.1 布局文件

1
2
3
4
5
6
<view class="container">
  <view class="box" bindtransitionend="transitionEnd" bindanimationstart="animationStart" bindanimationiteration="animationIteration">
    <image id="loading" class="{{extraClasses}}" src="/images/icon_ok.png"></image>
    <text>上传完成</text>
  </view>
</view>

3.2 样式文件(wxss)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
page {
  background: gray;
}

.box {
  width: 400rpx;
  height: 300rpx;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 30rpx;
}

.box image {

  width: 100rpx;
  height: 100rpx;
  animation: loading 3s infinite linear;

}

.box text {
  margin-top: 20rpx;
  font-size: large;
  font-weight: bold;

}

/* @keyframes loading {
  0% {transform: rotate(0deg);}
  50% {transform: rotate(180deg);}
  100% {transform: rotate(360deg);}
} */

四 加载中，3秒后完成

4.1 说明

  • 逻辑文件中设置isLoading属性
  • 通过isLoading控制加载动画和完成动画及对应文字的显示
  • 先设置isLoading为true，倒计时3秒后，设置isLoading为false

4.2 功能

布局文件

1
2
3
4
5
6
<view class="container">
  <view class="box" bindtransitionend="transitionEnd" bindanimationstart="animationStart" bindanimationiteration="animationIteration">
    <image id="loading" class="{{isLoading?'imageloading':'imagefinished'}}" src="{{isLoading?'/images/icon_loading.png':'/images/icon_ok.png'}}"></image>
    <text>{{isLoading?'加载中...':'上传完成'}}</text>
  </view>
</view>

样式文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
page {
  background: gray;
}

.box {
  width: 400rpx;
  height: 300rpx;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 20rpx;
}

.imageloading {

  width: 100rpx;
  height: 100rpx;
  animation: loading 3s infinite linear;

}
.imagefinished {

  width: 100rpx;
  height: 100rpx;
  animation: none;

}

.box text {
  margin-top: 20rpx;
  font-size: large;
  font-weight: bold;

}

@keyframes loading {
  0% {transform: rotate(0deg);}
  50% {transform: rotate(180deg);}
  100% {transform: rotate(360deg);}
}

逻辑文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Page({
  /**
   * 页面的初始数据
   */
  data: {
    isLoading: true
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //倒计时结束后
    setTimeout(() => {
      this.setData({
        isLoading: false
      })
    }, 2000);
  },
})

4.3 补充

  • 通过这种方式设置可能因为嵌套导致底部的按钮无法点击
  • 可以通过将布局文件放到modal，进而控制页面的显示和隐藏

五 参考

  • CSDN下载-参考代码