微信小程序飞入购物车动画_添加购物车飞入动画

wxml

<view class="container">
  <view wx:for='12345678901234567' class="item" bindtap="addshopcar" hover-class="hover">商品{{index}}</view>
</view>
<view class="dot" animation='{{ani}}' hidden="{{!showdot}}">+1</view>
<view class="count">{{count}}</view>
<view class="shopcar" id="shopcar">
  <image src="/image/car.png" class="shopcarimg"></image>
</view>

wxss

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
} 
 
.item {
  width: 720rpx;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: bold;
  padding-left: 30rpx;
  border-bottom: 1rpx solid #efeff4;
}
 
.hover {
  background: #d9d9db;
}
 
.dot {
  top: 0;
  left: 0;
  position: fixed;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background: #1dae01;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: white;
}
 
.shopcar {
  position: fixed;
  right: 40rpx;
  bottom: 60rpx;
}
 
.shopcarimg {
  width: 48rpx;
  height: 48rpx;
}
 
.count {
  color: red;
  position: fixed;
  font-weight: bold;
  right: 30rpx;
  bottom: 100rpx;
}

js

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    //购物车x坐标
    animationx: 0,
    //购物车y坐标
    animationy: 0,
    //是否显示飞行物，默认不显示
    showdot: false,
    //动画对象
    ani: {},
    //商品记数
    count: 0
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    var that = this
    //页面渲染完后获取购物车在页面中的坐标
    const query = wx.createSelectorQuery()
    query.select('#shopcar').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function(res) {
      let point = res[0]
      //坐标修正，让飞行物可以正好落在购物车正中心，20是飞行物宽度一半然后转化成px
      var xtemp = (point.left + point.right) / 2 - 20 / 750 * wx.getSystemInfoSync().windowWidth
      var ytemp = (point.top + point.bottom) / 2 - 20 / 750 * wx.getSystemInfoSync().windowWidth
      console.log('xtemp : ' + xtemp + ' ytemp : ' + ytemp)
      that.setData({
      	//获取修正后坐标
        animationx: xtemp,
        animationy: ytemp
      })
    })
  },
  addshopcar(e){
    var that = this
    if(that.data.showdot == true){
      return
    }
    //获取点击点坐标
    var touches = e.touches[0]
    //坐标修正，同上，这么做是为了让飞行点落到点击的中心
    let toptemp = touches.clientY - 20 / 750 * wx.getSystemInfoSync().windowWidth
    let lefttemp = touches.clientX - 20 / 750 * wx.getSystemInfoSync().windowWidth
    console.log('toptemp : ' + toptemp + ' lefttemp : ' + lefttemp)
    var animation1 = wx.createAnimation({
      duration: 1,
      timingFunction: 'ease'
    })
    //通过极短的时间让飞行点移动到手指点击位置，同时让飞行点显示出来
    animation1.left(lefttemp).top(toptemp).step()
    that.setData({
      ani: animation1.export(),
      showdot: true
    })
	
	//然后让飞行点飞行到购物车坐标处，形成添加效果
    setTimeout(function(){
      const animation = wx.createAnimation({
        duration: 1500,
        timingFunction: 'ease'
      })
      //通过Animation的left和top这两个API，将飞行点移动到购物车坐标处
      animation.left(that.data.animationx).top(that.data.animationy).step()
      that.setData({
        ani: animation.export()
      })
      setTimeout(function () {
        var counttemp = that.data.count + 1
        that.setData({
          showdot: false,
          ani: null,
          count: counttemp
        })
      }.bind(this), 1520)//这里也是要稍微延后，后隐藏飞行点，然后清除动画，增加购物计数器
    },15)//注意这里要稍微延后，保证前面移动到手指点击处的动画完成
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
 
  }
})