仿饿了么小球动画

饿了么下单时,点击➕会有一个小球跳跃进入购物车的动画,公司有个商城页面要求模仿这个效果,在网上搜了下.都需要借助框架,而且不是很灵活,位置必须相对固定.使用也不是很方便.因此决定借鉴思路,实现一个小球类.
完整代码

期望

使用new的方式获得实例:let ball = new Ball(ball)

调用实例方法: ball.drop({x: point.clientX, y: point.clientY, z: 0})

小球从传入的坐标处开始运行运动,执行抛物线落入购物车的动画

思路

仔细观察动画,不难发现,小球有个固定的落点,即购物车,那么我们可以将其作为小球真实dom的容器,也就是运动的终点.运动的起点则是鼠标点击的位置.则我们只需要在点击时,使用transform将小球移动到鼠标点击位置,然后再回到原点即可,期间加上恰当的transition即可形成移动动画(将抛物线分解为水平和竖直方向的移动,水平方向匀速平移,水平方向使用贝赛尔曲线过渡).

代码

我们来实现ball类,这个类应接受一个dom作为参数(这个dom应包含有一个子元素),这个类操作dom实现我们的动画.它应提供一个方法,这个方法接受一个坐标对象,该对象指示了小球的起点.当小球动画执行完毕,应通知外部.

class Ball {

  constructor(el) {

this.el = el

// 事件回调容器

this.taskMap = {}

// 获得元素位置

      this.position = el.getBoundingClientRect()

// 绑定事件回调this

this.dropOver = this.dropOver.bind(this)

}

    // 将小球移动到指定位置

    beforeDrop(pos) {

     let {x, y, z} = pos

      let {top, left} = this.position

      let offsetY = top - y

      let offsetX = left - x

      this.translate({x: -offsetX, y: -offsetY, z})

      this.el.style.visibility = 'visible'

// 等待浏览器重绘完成

      setTimeout(() => {

        this.startDrop()

      }, 20)

    }

// 添加transition,回到原点

    startDrop() {

      let styleKey = prefixStyle('transition')

// 内外层添加不同的transition

this.el.style[styleKey] = 'all .3s cubic-bezier(0.49, -0.29, 0.75, 0.41)'

this.el.children[0].style[styleKey] = 'all .3s linear'

this.translate()

this.el.addEventListener(prefixStyle('transitionEnd'), this.dropOver)

}

// 清除事件监听,通知外部

    dropOver() {

      let styleKey = prefixStyle('transition')

      this.el.removeEventListener(prefixStyle('transitionEnd'), this.dropOver)

      this.el.style[styleKey] = ''

      this.el.children[0].style[styleKey] = ''

      setTimeout(() => {

        this.el.style.visibility = 'hidden'

        this.fire('drop-over')

      })

}

// 移动小球

translate(pos = {}) {

let {x = 0, y = 0, z = 0} = pos

let el = this.el

let styleKey = 'transform'

let styleVal = `translate3d(0px,${y}px,${z}px)`

el.style[styleKey] = styleVal

el.children[0].style[styleKey] = `translate3d(${x}px,0px,${z}px)`

}

// 简单的事件回调

on(event, callback) {

this.taskMap[event] = callback

    }

fire(event) {

this.taskMap[event] && this.taskMap[event]()

}

}

至此,我们完成了一个可以呈抛物线跳跃的小球,这个小球可以从任意高于其真实dom所在的位置抛物线回落

但不难发现,我们一次只能执行一个小球动画.我们还需要一个队列用于管理小球,进行动画.

同样的,我们借助一个类来实现,这个类接受一个元素作为参数,该元素应包含有复数个符合小球类要求的元素.调用该类的实例方法,可以同时执行多个动画.

代码

小球队列类

class DropBall {

    constructor(el) {

this.el = el

this.createBallList()

}

createBallList() {

let el = this.el

let children = Array.from(el.children)

this.ballList = children.map(child =>new Ball(child))

}

drop(pos) {

let ball = this.ballList.shift()

if (!ball)

ball.beforeDrop(pos)

ball.on('drop-over', () => {

this.ballList.push(ball)

})

}

}

这个类非常简单,将传入的元素的子元素挨个生成Ball实例存入队列,提供一个drop方法,该方法每次从队列中取出一个实例执行动画,当实例动画执行完毕,将其推回队列中,供下次调用.小球动画执行时间约为320ms,一般ball实例只需要5个,就能保证够用(点击间隔不小于60ms,正常人抽不到这风)

完整代码