uni-app 小程序实现添加购物车抛物线掉入效果

Li_Ning21

3143人浏览 · 2022-09-14 19:15:06

Li_Ning21 · 2022-09-14 19:15:06 发布

总体思路其实跟H5的无差；

获取当前抛物线起始位置的坐标
获取购物车图标的坐标
通过创建一个图标从起始坐标点到终止坐标点的动画效果（延时一秒），这样就造成一个抛物线的假象了。

上代码：

其中 animationElStatus 是需要动态计算起始及终止坐标点位置后的动态样式。

此html样式，会在每次点击加入购物车时，动态写入style后触发，将img掉入购物车位置
注意这里的变量animationElStatus，使用模板字符串连接时，不能折行，不能忘记分号隔开样式
this.animationElStatus = top: ${endPoint.top}px; left: ${endPoint.left}px; transition: all 1s; transform: rotate(-720deg);

 <view
   id="animation-el"
   v-show="animationElStatus"
   :style="animationElStatus"
 >
   <img :src="`${cdnImageUrl}/privateMall/icon/icon_add.png`" />
 </view>

endPoint记录当前终点坐标位置
uni.createSelectorQuery().select(‘#animation-end’).boundingClientRect 形如：document.getElementById()

let endPoint = null; // 动画截止点
mounted() {
  // 提前获取最下方购物车位置
  if (!endPoint) {
    uni.createSelectorQuery().select('#animation-end').boundingClientRect((res) => {
      endPoint = res
    }).exec()
  }
},

点击商品触发下列方法，通过传入当前起始坐标点
click传入的点击事件坐标，在detail中。

   // 通过click事件记录起始点位置 子组件
   toggleCheck(ev) {
      const { x, y } = ev.detail
      this.$emit('animationAddCart', {
        x,
        y
      })
    }
    
    /**
     * 商品掉入动画方法 父组件
     */
    animationAddCart(position) {
      if (!endPoint) return

      this.animationElStatus = `top: ${position.y}px; left: ${position.x}px;`

      setTimeout(() => {
        this.animationElStatus = `top: ${endPoint.top}px; left: ${endPoint.left}px; transition: all 1s; transform: rotate(-720deg);`
      }, 20);

      setTimeout(() => {
        this.animationElStatus = ''
      }, 1000);
    },