目的： 看到京东app点击加入购物车按钮动画效果不错，在我们自己的小程序怎么实现呢？ 商品图片中间出现一个预览图的缩小版运动到购物车，效果看下图

gif.gif

分析

1. 一个定位在屏幕中上部的图片
2. 运动到大概左下部即可
3. 运动过程中缩小
4. 运动后购物车抖一抖，数字增加（如果购物车已有，数字不增加）

实现

网上有用贝塞尔曲线的方式，计时器赋值的实现方式。我就不写了。实践过后比较卡顿，我不喜欢。大致代码长这样 传送门

html部分

  <view
  class='arrow'
  animation="{{animationY}}"
  style="top:{{ballY}}px;left:{{ballX}}px;"
  hidden="{{!showBall}}"
>
  <image src='{{url}}' animation="{{animationX}}" class="img" />
</view>

css部分

 .arrow {
  position: fixed;
  transform: translateX(-50%);
  z-index: 99;
  border-radius: 50%;
  padding: 5rpx;
}
.arrow .img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}

js部分

// function delay(wait) {
//  return new Promise(resolve => {
 //   setTimeout(() => {
//      resolve()
//    }, wait)
//  })
//}
import { delay } from '../../../common/utils/helper'

Component({
  properties: {
    url: String   //   不同的商品自然是传不同的图片
  },

  data: {
    animationY: {},
    animationX: {},
    ballY: 150，    //  在屏幕上的初始值
    ballX: 200，
    showBall: false,
  },

  lifetimes: {
    attached() {
//   购物车小篮子动画初始化
      this.animationCart = wx.createAnimation({
        duration: 40,
        timingFunction: 'ease'
      })
    }
  },

  methods: {
//  外部调用执行
    _start(fn) {
      this.setData({
        showBall: true
      })
      this.createAnimation(fn)
    },
    // 创建动画
    createAnimation(fn) {
      const { ballX, ballY } = this.data
    //   这里的windowWidth, windowHeight  是全局  wx.getSystemInfoSync()来的
    //  修改bottomX  bottomY  的值调整到自己想要的位置
      const bottomX = global.deviceWidth - 60
      const bottomY = global.deviceHeight - 300
      const animationX = this.flyX(bottomX, ballX) // 创建小球水平动画
      const animationY = this.flyY(bottomY, ballY) // 创建小球垂直动画

      delay(100)
        .then(() => {
          // 100ms延时,  确保小球已经显示
          this.setData({
            animationX: animationX.export(),
            animationY: animationY.export()
          })
          // 400ms延时, 即小球的抛物线时长

          return delay(400)
        })
        .then(() => {
      // 还原
          this.setData({
            animationX: this.flyX(0, 0, 0).export(),
            animationY: this.flyY(0, 0, 0).export(),
            showBall: false
          })
          // 购物车抖动动画
          this.animationCart
            .rotate(30)
            .step()
            .rotate(-5)
            .step()
            .rotate(5)
            .step()
            .rotate(-2)
            .step()
            .rotate(2)
            .step()
            .rotate(0)
            .step()
          fn && fn(this.animationCart)
        })
    },
    // 水平动画
    flyX(bottomX, ballX, duration) {
      const animation = wx.createAnimation({
        duration: duration || 400,
        timingFunction: 'linear'
      })
//  缩小后自然要还原
      const scale = duration === 0 ? 1 : 0.1
// translateX 控制运动方向
      animation
        .translateX(ballX - bottomX)
        .scale(scale)
        .step()

      return animation
    },
    // 垂直动画
    flyY(bottomY, ballY, duration) {
      const animation = wx.createAnimation({
        duration: duration || 400,
        timingFunction: 'ease-in'
      })

      animation.translateY(bottomY - ballY).step()

      return animation
    }
  }
})

页面调用

 this.selectComponent('#fly')._start(animationCart => {
            this.setData({
              animationCart: animationCart.export()
            })
          })

以上就是全部内容，直接复制代码去感受效果。
想要往上运动，往左边动 或者从点击处出发。只要更改初始位置，和 translateX translateY的方向就可以了 。就是这么简单

补：使用hidden有些问题，重复加入同一规格商品动画失效，使用wx: if
之前也遇到过测试用模拟器测试hidden无法隐藏的问题，所以不建议使用这个鸡肋

加入购物车功能将在下个版本上线到惠出发

硬核广告：更多小程序功能体验，请 搜索 “惠出发” 小程序，买最便宜的货，订最便宜的酒店。

5cfcf161b83259a93446139415135c7.jpg

看更多wepy实现和h5实现点击链接 传送门