微信小程序--跃动方块

效果展示

Demo代码

wxml

<!-- loading.wxml -->
<view class="loading">
  <view class="dot" animation="{{alpha[0]}}"></view>
  <view class="dot" animation="{{alpha[1]}}"></view>
  <view class="dot" animation="{{alpha[2]}}"></view>
  <view class="dot" animation="{{alpha[3]}}"></view>
  <view class="dot" animation="{{alpha[4]}}"></view>
</view>

wxss

page{
 background-size: cover;
 background-color: black;
}

/** loading.wxss **/
.loading {
 width: 100%;
 position: absolute;
 bottom: 50%;
 justify-content: center;
 text-align: center;
}

.loading .dot{
 background-color:orange;
 display: inline-block;
 /**圆点大小在这里设置，高宽一致，圆角值为高宽的一半**/
 width: 48rpx;
 height: 48rpx;
 border-radius: 8rpx;
 margin: 0 10rpx;
 opacity: 0;
}

js

/* loading.js */
Page({
  data: {
    alpha: [1, 1, 1, 1, 1]
 .
 .
 .
 .
 .
 .
 完整代码获取见文末

效果展示

Demo代码

wxml

<!-- loading.wxml -->
<view class="loading">
  <view class="dot" animation="{{alpha[0]}}"></view>
  <view class="dot" animation="{{alpha[1]}}"></view>
  <view class="dot" animation="{{alpha[2]}}"></view>
  <view class="dot" animation="{{alpha[3]}}"></view>
  <view class="dot" animation="{{alpha[4]}}"></view>
</view>

wxss

page{
 background-size: cover;
 background-color: black;
}

/** loading.wxss **/
.loading {
 width: 100%;
 position: absolute;
 bottom: 50%;
 justify-content: center;
 text-align: center;
}

.loading .dot{
 background-color:white;
 display: inline-block;
 /**圆点大小在这里设置，高宽一致，圆角值为高宽的一半**/
 width: 48rpx;
 height: 48rpx;
 border-radius: 24rpx;
 margin: 0 10rpx;
 opacity: 0;
}

js

/* loading.js */
Page({
  data: {
 .
 .
 .
 .
 .
 .
 完整源码获取途径
见文末引言