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

Posted 2023-04-05 Li_Ning21

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

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

上代码：

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

此html样式，会在每次点击加入购物车时，动态写入style后触发，将img掉入购物车位置
注意这里的变量animationElStatus，使用模板字符串连接时，不能折行，不能忘记分号隔开样式
this.animationElStatus = top: $endPoint.toppx; left: $endPoint.leftpx; 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.ypx; left: $position.xpx;`

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

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

Vue实现购物小球抛物线的方法实例

这篇文章主要给大家介绍了Vue实现购物小球抛物线的方法实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧！

本文介绍的是利用Vue实现购物小球抛物线的相关内容，下面话不多说了，来一起看看详细的介绍吧！

css片段

 1  .shop{
 2   position: fixed;
 3   top: 300px;
 4   left: 40px;
 5  }
 6  .ball{
 7   position: fixed;
 8   left: 32px;
 9   bottom: 22px;
10   z-index: 200;
11   transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41); /*贝塞尔曲线*/
12  }
13  .inner{
14   width: 16px;
15   height: 16px;
16   border-radius: 50%;
17   background-color: rgb(0,160,220);
18   transition: all 0.4s linear;
19  }
20  .cart{
21   position: fixed;
22   bottom: 22px;
23   left: 32px;
24   width: 30px;
25   height: 30px;
26   background-color: rgb(0,160,220);
27   color: rgb(255,255,255);
28  }

html片段

 1 <div id="app">
 2   <ul class="shop">
 3    <li v-for="item in items">
 4     <span>{{item.text}}</span>
 5     <span>{{item.price}}</span>
 6     <button @click="additem">添加</button>
 7    </li>
 8   </ul>
 9  <div class="cart" style="">{{count}}</div>
10   <div class="ball-container"><!--小球-->
11    <div v-for="ball in balls">
12     <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
13      <div class="ball" v-show="ball.show">
14       <div class="inner inner-hook"></div>
15      </div>
16     </transition>
17    </div>
18   </div>
19  </div>

js片段

 1 <script>
 2   new Vue({
 3    el:"#app",
 4    data:{
 5     count: 0,
 6     items:[
 7      {
 8       text: "苹果",
 9       price: 15
10      },
11      {
12       text: "香蕉",
13       price: 15
14      }
15     ],
16     balls: [ //小球 设为3个
17      {
18       show: false
19      },
20      {
21       show: false
22      },
23      {
24       show: false
25      },
26     ],
27     dropBalls:[],
28    },
29    methods:{
30     additem(event){
31     this.drop(event.target);
32     this.count ++;
33     },
34     drop(el){ //抛物
35      for(let i=0;i<this.balls.length;i++){
36       let ball= this.balls[i];
37       if(!ball.show){
38        ball.show = true;
39        ball.el=el;
40        this.dropBalls.push(ball);
41        return;
42       }
43      }
44     },
45     beforeDrop(el) {/* 购物车小球动画实现 */
46      let count = this.balls.length;
47      while (count--) {
48       let ball = this.balls[count];
49       if (ball.show) {
50        let rect = ball.el.getBoundingClientRect(); //元素相对于视口的位置
51        let x = rect.left - 32;
52        let y = -(window.innerHeight - rect.top - 22); //获取y
53        el.style.display = ‘‘;
54        el.style.webkitTransform = ‘translateY(‘+y+‘px)‘; //translateY
55        el.style.transform = ‘translateY(‘+y+‘px)‘;
56        let inner = el.getElementsByClassName(‘inner-hook‘)[0];
57        inner.style.webkitTransform = ‘translateX(‘+x+‘px)‘;
58        inner.style.transform = ‘translateX(‘+x+‘px)‘;
59       }
60      }
61    },
62     dropping(el, done) { /*重置小球数量 样式重置*/
63      let rf = el.offsetHeight;
64      el.style.webkitTransform = ‘translate3d(0,0,0)‘;
65      el.style.transform = ‘translate3d(0,0,0)‘;
66      let inner = el.getElementsByClassName(‘inner-hook‘)[0];
67      inner.style.webkitTransform = ‘translate3d(0,0,0)‘;
68      inner.style.transform = ‘translate3d(0,0,0)‘;
69      el.addEventListener(‘transitionend‘, done);
70    },
71     afterDrop(el) { /*初始化小球*/
72      let ball = this.dropBalls.shift();
73      if (ball) {
74      ball.show=false;
75      el.style.display = ‘none‘;
76     }
77    }
78   }
79  })
80  </script>