JS 实现抛物线动画

author: 陈家宾
email: 617822642@qq.com
date: 2018/2/24

在做小程序的项目中，需要在添加购物车的时候，增加抛物线小球动画。

先给大家看下效果图（其实已经是实现后的效果了，顺便给自己公司打广告了哈哈）

分析

这种不固定起始位置的动画，自然不能用 gif 图，所以只能用原生代码实现

那我们有什么工具来实现动画呢？

• 小程序提供了 JS API createAnimation 来创建动画
• CSS transition

工具有了，我们再看一下什么是抛物线。

这里我们只讨论水平抛物线，水平抛物线从数学原理上来说就是【水平匀速、垂直加速的运动】，转换成代码层面就是在动画效果 timingFunction 中，水平动画采用 linear ，垂直动画采用 ease-in

所以我们需要把这个抛物线动画分解成 两个 同时 进行但 不同动画效果 的动画。

实现

（一）小程序的实现

JS：

cartAnimation(x, y) { // x y 为手指点击的坐标，即球的起始坐标
    let self = this,
        cartY = app.globalData.winHeight - 50, // 结束位置（购物车图片）纵坐标
        cartX = 50, // 结束位置（购物车图片）的横坐标
        animationX = flyX(cartX, x), // 创建球的横向动画
        animationY = flyY(cartY, y) // 创建球的纵向动画
    this.setData({
        ballX: x,
        ballY: y,
        showBall: true
    })
    setTimeoutES6(100).then(() => { // 100 秒延时，确保球已经到位并显示
        self.setData({
            animationX: animationX.export(),
            animationY: animationY.export(),
        })
        return setTimeoutES6(400) // 400 是球的抛物线动画时长
    }).then(() => { // 400 秒延时后隐藏球
        this.setData({
            showBall: f