目 录CONTENT

文章目录

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

Hello!你好!我是村望~!
2023-11-30 / 0 评论 / 0 点赞 / 279 阅读 / 475 字
温馨提示:
我不想探寻任何东西的意义,我只享受当下思考的快乐~

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

使用 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;
}
0

评论区