vueは簡単に放物線の小球の特効(平投げ運動)を実現して、気泡はショッピングカートにジャンプします

実現原理は、まず開始座標と目標座標(本稿ではマウスクリックの場所を起点とし、カートのDOM要素の位置を終点とする)を指定し、次にボールを作成し、物理的な平投げ運動に基づいて水平初速度を計算し、加速度を制定し、タイミングタスクを設定し、数ミリ秒おきに次の時刻位置に移動し、終点に達した後にボールを破棄することである.

<template>
    <div class="balling">
       <div
        v-for="(ball, index) in balls"
        v-if="ball.show"
        :data-id="ball.id"
        :style="ballclass(ball)">div>
    div>
template>

<script>
export default {
  data() {
    return {
      size: 15,
      balls: [],
      //         
      speed: 10,
    };
  },
  props: ["baldic"],
  watch: {
    baldic: {
      handler() {
        console.log(this.baldic);
        this.init();
        this.move();
      }
    }
  },
  created() {},
  methods: {
    init() {
      this.balls = [];
      this.sx = this.baldic.sx;
      this.sy = this.baldic.sy;
      this.tx = this.baldic.tx + this.size / 2;
      this.ty = this.baldic.ty + this.size / 2;
      this.t = 0;
      this.a = 0.4;
      this.tt = Math.pow(Math.abs(this.ty - this.sy) / this.a, 0.5);
      console.log(this.tt);
      if (this.ty - this.sy < 0) this.a = -this.a;
      this.speed = Math.abs(this.tx - this.sx) / this.tt;

      this.balls.push({
        show: true,
        x: this.sx + this.speed * this.t,
        y: this.sy + this.t * this.t * this.a,
        id: 110
      });
      this.t++;
    },
    ballclass(ball) {
      return {
        position: "fixed",
        left: -this.size / 2 + "px", //            ，      
        top: -this.size / 2 + "px",
        width: this.size + "px",
        height: this.size + "px",
        "border-radius": "50%",
        "background-color": "skyblue",
        transform: `translate3d(${ball.x}px, ${ball.y}px, 0)`, //      
        "z-index": 10,
        "background-color": "red"
      };
    },

    move() {
      for (let i in this.balls) {
        this.balls[i].show = false;
      }
      if (Math.abs(this.t) < Math.abs(this.tt)) {
        this.balls.push({
          show: true,
          x: this.sx + this.speed * this.t,
          y: this.sy + this.t * this.t * this.a,
          id: 110
        });
        this.t++;
        setTimeout(this.move, 10);
      } else {
        console.log(this.balls);
        this.balls = [];
      }
    }
  }
};
script>

<style scoped lang="less">
.balling {
  width: 0;
  height: 0;
}
style>

親コンポーネント呼び出しの例

<template>
<div style="width:100%;height:100%" @click="demo">
<balling :baldic="baldic">balling>
<img src="shoping_car.png" style="position:absolute;buttom:30px;left:40px;" id="shoping_car">
    div>
template>
<script>
import balling from "@/components/balling";

export default {
  components: {
    balling
  },
  methods:{
    flyball(e) {
      e = e || this.event;
      let slsctor ="#shoping_car";
      var aat = document.querySelector(slsctor);
      let domrect = aat.getBoundingClientRect();
      this.baldic = {
        sx: e.clientX, //   x  
        sy: e.clientY, //
        tx: domrect.x,
        ty: domrect.y
      };
    },
    demo(){
        this.flyball(event);
    }
  }
}
script>