微信小程序领取积分-上浮动画！

微信小程序领取积分-上浮动画！

使用 wx animation API

this.animate(selector, keyframes, duration, callback)

属性	类型	默认值	必填	说明
selector	String		是	选择器（同 SelectorQuery.select 的选择器格式）
keyframes	Array		是	关键帧信息
duration	Number		是	动画持续时长（毫秒为单位）
callback	function		否	动画完成后的回调函数

Dom结构

<!--index.wxml-->
<view>
  <view id="totalContainer">
    <text class="total">{{total}}</text>
  </view>
  <view wx:for="{{points}}" wx:key="index">
    <view class="pointContainer">
      <!-- pointEffect 漂浮的number -->
      <view id="{{'pointEffect'+item}}" class="pointEffect {{extraClasses}}">+{{item}}</view>
      <!-- 点击按钮触发事件动画 -->
      <button data-point="{{item}}" bind:tap="toGetPoints">领取{{item}}分</button>
    </view>
  </view>
</view>

Javascript

Page({
  data: {
    total: 0, // 总数
    points: [ // 积分数据
      1, 3, 4, 5, 6
    ]
  },
  toGetPoints(e) {
    const offsetTop = e.detail.y //距离顶部的高度，
    // 如果要移动到top:50的位置那么移动距离就是 offsetTop - 50 这里需要向上移动所以沿着Y轴为负值！ => - offsetTop + 50

    // translateY 指定的相对当前位置的变化！其他也类似！
    console.log(`#pointEffect${e.target.dataset.point}`)
    this.animate(`#pointEffect${e.target.dataset.point}`, [
      { opacity: 0, translateY: 0, ease: "linear" }, // 初始位置
      { opacity: 1, translateY: -e.detail.y / 2, ease: "linear" }, // 中间完全opacity=>1,移动到目标位置一半
      { opacity: 0, translateY: -offsetTop + 50, ease: "linear" }, // 逐渐opcity => 0 移动到目标位置
    ], 1000, function () {
      // 动画完成后！改变total！
      this.setData(
        {
          total: this.data.total + e.target.dataset.point
        }
      )
      this.clearAnimation('#container', { translateY: true, opacity: true }, function () {
        console.log("清除了#container上的opacity和rotate属性")
      })
    }.bind(this))
  }
})

Css

.totalContainer {
  margin-bottom: 100px;
}

.total {
  display: inline-block;
  position: relative;
  left: 50%;
  margin-top: 100rpx;
  font-weight: bolder;
  font-size: 120rpx;
  transform: translateX(-50%);
}

.pointEffect {
  opacity: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 80rpx;
  color: rgb(92, 58, 7);
}

button {
  margin: 10px;
}