CSS抛物线组件

Cubic-bezier 曲线

<template>
  <view>
    <view v-if="cart_icon_data != null && (cart_icon_data.status || 0) == 1" class="cart-para-curve-container" :style="cart_icon_data.style">
<!--      <image v-if="(cart_icon_data.icon || null) != null" class="cart-para-curve-icon" :src="cart_icon_data.icon"></image>-->
      <view  class="cart-para-curve-icon cart-para-curve-icon-text"></view>
    </view>
  </view>
</template>
<script>
const app = getApp();
export default {
  data() {
    return {
      cart_icon_data: null
    };
  },
  components: {},
  props: {
    propBtnHeight: {
      type: Number,
      default: 10
    },
    propBtnWidth: {
      type: Number,
      default: 10
    },
    propCart: {
      type: String,
      default: ''
    },
  },
  methods: {
    // 初始（购物车对象、当前点击对象、图标）
    init(cart, pos, icon = '') {
      if((pos || null) != null) {
        var self = this;
        var btn_size = this.propBtnHeight;
        var btn_width = this.propBtnWidth;
        // 未指定购物车对象则读取tabbar数据自动计算购物车位置
        if((cart || null) == null || (cart[0] || null) == null) {
          var info = uni.getSystemInfoSync();
          var tabbar = app.data.tabbar_pages;
          // 无购物车菜单则结束执行
          var tabbar_cart_pos = tabbar.indexOf('/pages/cart/cart');
          if(tabbar_cart_pos == -1) {
            return false;
          }
          // 计算购物车菜单位置
          var tabbar_count = tabbar.length;
          var cart_top = info.screenHeight;
          var cart_width = info.screenWidth/tabbar_count;
          var cart_left = cart_width*tabbar_cart_pos;
        } else {
          var temp = cart[0];
          var cart_width = temp.width;
          var cart_left = temp.left+10;
          var cart_top = temp.top;
        }
        var left = pos.changedTouches[0].clientX + btn_width/2 - btn_size/2-10;
        var top = pos.changedTouches[0].clientY - btn_size;
        var x = cart_left + cart_width/2 - btn_size/2 - left;
        var y = cart_top - btn_size - top;
        if(self.cart_icon_data == null || (self.cart_icon_data.status || 0) == 0) {
          self.cart_icon_data = {
            status: 1,
            style: `--left:${left}px;--top:${top}px;--x:${x}px;--y:${y}px;`,
            icon: icon,
          };
          setTimeout(function(){
            self.cart_icon_data = {status: 0};
          }, 495);
        }
      }
    }
  }
};
</script>
<style>
@keyframes moveY {
  from{
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translateY(var(--y));
  }
}
@keyframes moveX {
  to {
    transform: translateX(var(--x));
  }
}
.cart-para-curve-container {
  position: fixed;
  width: 60rpx;
  height: 60rpx;
  z-index: 10;
  left: var(--left);
  top: var(--top);
  --duration: 0.4s;
  opacity: 0;
  animation: moveY var(--duration) cubic-bezier(0.5, -0.25, 1, 1);
}
.cart-para-curve-container .cart-para-curve-icon {
  max-width: 100%;
  max-height: 100%;
  animation: moveX var(--duration) linear;
  border-radius: 50px;
  border: 1px solid #eee;
}
.cart-para-curve-icon-text {
  background-color: #f20014;
  display: inline-block;
  padding: 20rpx;
}
</style>

    cartParaCurveEvent(e) {
        let self = this;
        let icon = e.currentTarget.dataset.icon || '';
        uni.createSelectorQuery().select('#cartId').boundingClientRect().exec(function(res) {
          self.$refs.parabolaRef.init(res, e, icon);
        });
    },

<view @click="cartParaCurveEvent"></view>