mpvue 使用css3动画实现添加购物车抛物线动画

实现抛物线的方式有两种，一是css3动画，二是贝塞尔曲线

1.原生小程序使用css3动画实现添加购物车抛物线动画

小程序代码片段

2.mpvue实现的放方式

html布局

          <div class="add-cart">
              <img src="../../assets/img/icon/gouwuche.png" alt="" @click='addCart($event,item)'>
            </div>


    <div id="ball" :style="ballAnimation">
      <img v-if="animationImg" :src="animationImg" style="width:100%;height:100%;">
    </div>

css

#ball {
  width: 170rpx;
  height: 170rpx;
  border-radius: 50%;
  position: fixed;
  transition: left 1s linear, top 1s ease-in;
  z-index: 9999;
  display: none;
  border-radius: 50%;
  overflow: hidden;
  transform: translateZ(0);
}

js

export default {
  data() {
    return {
      ballAnimation: '',
      systemInfo: {},
      animationImg: ''
    };
  },
  onShow() {
    this.systemInfo = wx.getSystemInfoSync();
  },
  methods: {
    addCart(e, goods) {
      this.createAnimation(e, goods.goodsImage);
    },
    createAnimation(e, imgUrl) {
      console.log('createAnimation', e)
      let self = this,
        speed = 1000, //速度
        //点击的起点
        startY = e.touches["0"].clientY - 80,
        startX = e.touches["0"].clientX - 250,
        //购物车坐标
        endX = 420,
        endY = self.systemInfo.windowHeight / self.systemInfo.windowWidth * 750;
      // 获取当前点击的商品图片
      self.animationImg = imgUrl;
      //计算不同位置的动画执行时间
      let m = Math.sqrt((Math.abs(startX - endX) ** 2) + (Math.abs(startY - endY) ** 2));
      let animationTime = (m * speed) / 1000;
      //给小球起点位置
      self.ballAnimation = `top:${startY}px;left:${startX}px;transition:all 0s;display:block;transform: scale(1);`
      console.log('startX = ' + startX, ',startY = ' + startY, ',endY = ' + endY, ',animationTime:' + animationTime)
      let s = setTimeout(() => {
        //给小球终点坐标，并执行动画
        self.ballAnimation = `top:${endY}px;left:${endX}rpx;transition:all ${animationTime/1000}s ease-in,left ${animationTime/1000}s linear;display:block;transform: scale(0.4);`;
        console.log('setTimeout -  startY = ' + self.systemInfo.windowHeight)
        setTimeout(() => {
          //动画完成之后，重置
          self.animationImg = '';
          self.ballAnimation = `left:0;right:0;transition:all 0s;display:none;transform: scale(1);`;
          clearTimeout(s);
        }, animationTime);
      }, 50)
    },
  }
}

显示效果

e22e9f2ca9290e710dad1db8bc78b9a2.gif

贝塞尔曲线实现方式参考

https://blog.csdn.net/rolan1993/article/details/78338853