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