微信小程序align_微信小程序跃动方块

效果展示

Demo代码

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]
  },
  onLoad: function () {
    var self = this;
    var _index = 0;
    var _alpha = self.data.alpha;
    var _speed = 300;
    var timer = setInterval(function () {
      var an_show = wx.createAnimation({});
      var an_hide = wx.createAnimation({});
      an_show.opacity(1).step({ duration: _speed });
      an_hide.opacity(0).step({ duration: _speed });
      _alpha[_index] = an_show;
      _alpha[_index == 0 ? 4 : _index - 1] = an_hide;
      self.setData({
        alpha: _alpha
      })
      _index = _index == 4 ? 0 : _index + 1;
    }, _speed);
  }
})

效果展示

Demo代码

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: {
    alpha: [1, 1, 1, 1, 1]
  },
  onLoad: function () {
    var self = this;
    var _index = 0;
    var _alpha = self.data.alpha;
    var _speed = 300;
    var timer = setInterval(function () {
      var an_show = wx.createAnimation({});
      var an_hide = wx.createAnimation({});
      an_show.opacity(1).step({ duration: _speed });
      an_hide.opacity(0).step({ duration: _speed });
      _alpha[_index] = an_show;
      _alpha[_index == 0 ? 4 : _index - 1] = an_hide;
      self.setData({
        alpha: _alpha
      })
      _index = _index == 4 ? 0 : _index + 1;
    }, _speed);
  }
})

说明

Demo代码已同步至小程序

写留言｜查看留言