（十二）小球动画实现

偏执的太偏执、 2022-05-25 00:53 135阅读 0赞

在商品页面，当我们添加商品的时候，即点击“+”按钮，会有一个小球做抛物线的动作降到左下角的购物车里面的动作，现在就讲讲如何实现小球做抛物线的动作。

![2018050509172677][]

小球的动作解析：外层做纵轴方向的抛物线动作；内层做水平方向的线性的动作

难点：是在底部的shopCart.vue中获取到小球下落的位置，也就是对应的点击的"+"的位置，然后再shopCart.vue中描写小球下落的动作。

大概思路是：有3个.vue文件，父组件goods.vue，子组件cartControl.vue和子组件shopCart.vue。首先小球的下降的时机（也就是小球下落的位置）是在点击cartControl.vue中的“+”按钮触发的，那么需要将这个触发的对象从cartControl中传到父组件goods.vue中，那么需要在cartControl.vue中的触发“+”的函数中，书写this.$emit(add，event.target)，然后在goods.vue中调用cartControl组件的地方绑定该函数，从而让父组件拿到子组件中被点击的对象，如

在cartControl.vue中的methods属性中定义的函数addCart(event)添加this.$emit('add',event.target)语句，其中add是在父组件goods.vue中的调用子组件cartControl.vue组件地方，通过@add绑定的监听事件属性，event.target是被点击的对象

//点击food右边的“+”
              addCart(event){
                if( !event._constructed ){
                  //不是自己开发的函数，则返回，避免在pc端触发两次
                  return
                }
                if( !this.food.count ){
                //  如果this.foo.count的值为undefined，表示food对象中还没有count这个属性
                //   this.food.count = 1;
                //  set(对象，属性，属性值），让手动添加的属性，被浏览器识别监听
                  Vue.set(this.food,'count',1);
                }else{
                  this.food.count++;
                }
                //添加一个商品时，通过$emit(event,[...args])，将DOM对象传给父组件
                this.$emit('add', event.target);
              }

在goods.vue中调用子组件cart-control的地方绑定监听事件add，其中addFood(target)是在父组件goods.vue中的methods定义的方法

<cart-control  @add="addFood" :food="food"></cart-control>

拿到的点击的对象，就是小球要下落的位置，然后再父组件goods.vue中的methods属性中定义函数addFood()，这个函数主要负责把子组件cartControl.vue中传过来的点击的对象传给父组件，然后父组件在将其点击的对象传给子组件shopCart.vue中定义的函数，这样在shopCart.vue中就可以描写小球下落的动作了

//监听右侧添加食品的动作事件,把cartControl.vue中点击的对象通过target
            //传到父组件goods.vue文件里面
            addFood(target){
              //然后在goods.vue中拿到子对象，从而可以编写下落的函数
              this._drop(target);
            }

其中，函数\_drop(target)也是在父组件goods.vue中的methods属性中定义的函数，他主要负责获取到子组件shopCart.vue子组件对象，然后调用该对象里面定义的方法drop(el)，将获取到的target传递给el，其中drop(el)是在shopCart.vue中定义的方法

//小球下落的动作
            _drop(target){
              //体验优化，异步执行下落动作
              this.$nextTick(()=>{
                //调用 shopcart,给这个组件定义一个小球下落的函数
                //然后在shopCart.vue文件里面定义drop()函数，描写一个小球下落的动作
                //通过this.$refs.shopcart拿到子组件，然后就可以调用子组件里面定义的方法
                this.$refs.shopcart.drop(target);  //调用子组件shopCart.vue中定义的方法
              });
            }

下面看一下shopCart.vue 中的书写

下面这张图是在shopCart.vue中定义小球的html

![20180505095820605][]

完整的<template>如下所示

<template>
        <div class="shopCart">
          <div class="content">
            <div class="content-left">
              <div class="logo-wrapper">
                
                
                <div class="logo" :class="{'highlight':totalCount>0}">
                  <span class="icon-shopping_cart" :class="{'highlight':totalCount>0}"></span>
                </div>
                
                <div class="num" v-show="totalCount>0">{
       {totalCount}}</div>
              </div>
              
              <div class="price" :class="{'highlight':totalPrice>0}">￥{
       {totalPrice}}</div>
              <div class="desc">另需配送费￥{
       {deliveryPrice}}元</div>
            </div>
            <div class="content-right">
              
              <div class="pay" :class="payClass">
                {
       {payDesc}}
              </div>
            </div>
          </div>
          
          <div class="ball-container">
            <div v-for="ball in balls">
              <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
                <div class="ball" v-show="ball.show">
                  
                  <div class="inner inner-hook"></div>
                </div>
              </transition>
            </div>
          </div>
        </div>
    </template>

这里用到了vue中的内置组件<transition>，用来描述缓动动画的

在<script>标签的里面的data()需要定义个数组balls表示存放的每一个小球的状态，这里存放的是5个小球的状态，然后还需要定义一个存放下落小球的数组dropBalls，如下所示

data(){
            return {
              //维护每个小球的状态,因为transition只对v-if  v-show  v-for有过渡效果
              //所以这里定义了show，在<template>中采用v-show指令
              balls:[
                {
                  show: false
                },
                {
                  show:false
                },
                {
                  show:false
                },
                {
                  show:false
                },
                {
                  show:false
                }
              ],
              dropBalls:[]  //存放下落的小球
            };
          }

然后，需要在methods属性里面定义函数drop(el)，主要负责对存放小球状态的数组进行遍历，将show为false的小球的状态改为true，并将它放进dropBalls数组中

drop(el){
              //对球进行遍历
              let len = this.balls.length;
              for( let i=0;i<len;i++ ){
                let ball = this.balls[i];
                if( !ball.show ){
                  ball.show = true;
                  ball.el = el;
                  this.dropBalls.push(ball); //将下落的小球放进来
                  return;
                }
              }
            }

然后利用<transition>组件的事件before-enter、enter、after-enter，去描写小球下落的状态，绑定的事件是在methods中定义的

<div class="ball-container">
            <div v-for="ball in balls">
              <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
                <div class="ball" v-show="ball.show">
                  
                  <div class="inner inner-hook"></div>
                </div>
              </transition>
            </div>
          </div>

beforeDrop(el){
               //将所有设为true的小球找到
              // 遍历所有的小球
              let count = this.balls.length;
              while(count--){
                let ball = this.balls[count];
                if(ball.show){
                  //返回元素的大小及其相对于视口的位置的对象
                  let rect = ball.el.getBoundingClientRect();
                  //水平和竖直方向的偏移量
                  let x = rect.left - 32; //左下角购物车和右侧点击的“+”的水平距离
                  let y = -(window.innerHeight - rect.top -22);//竖直方向的距离差
                  //外层做一个纵向的变化
                  el.style.display = '';
                  el.style.webkitTransform = `translate3d(0,${y}px,0)`;
                  el.style.transform = `translate3d(0,${y}px,0)`;
                  //内层做一个横向的变化
                  let inner = el.getElementsByClassName('inner-hook')[0];//取到的是一个数组，所以要取第一个元素
                  inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
                  inner.style.transform = `translate3d(${x}px,0,0)`;
                }
              }
            },
            dropping(el,done){
              let rf = el.offsetHeight;
              this.$nextTick(()=>{
                //当下降的时候，重写外部和内部的translate3d()
                el.style.webkitTransform = 'translate3d(0,0,0)';
                el.style.transform = 'translate3d(0,0,0)';
                let inner = el.getElementsByClassName('inner-hook')[0];//取到的是一个数组，所以要取第一个元素
                inner.style.webkitTransform = 'translate3d(0,0,0)';
                inner.style.transform = 'translate3d(0,0,0)';
                el.addEventListener('transitionend',done)
              });
            },
            afterDrop(el){
              //当降落完一个ball，就将该ball从balls数组中取出来
              let ball = this.dropBalls.shift();
              if(ball){
                //又可以利用该ball
                ball.show = false;
                el.style.display = 'none';
              }
            }

shopCart.vue中的<style>中的代码如下

以上大概就是实现小球做抛物线的动作的过程

[2018050509172677]: /images/20220525/bc868113ca5d471ab22685f1ae0b9266.png
[20180505095820605]: /images/20220525/c90bd90fa2dd482f82cbaeede9b45c9f.png