JS implementation of parabolic animation case

I believe you have all seen the animation of adding products to shopping carts on many shopping websites. Today, we will write a simple parabolic animation by hand, starting with the case:

Insert image description here

1. Draw the page

We implement it simply here, with a button and a shopping cart icon. The style is skipped here. The final domstructure is:

<div class="container">
  <div class="append" id="add">添加</div>
  <footer>
    <div class="car" id="car">
      <img src="./static/image/car.png" alt="">
    </div>
  </footer>
</div>

Insert image description here

2. Core logic

The other steps are basically not difficult. The main thing is how to generate the radian here. We use the Bezier curve. Here we can see that based on the radian, we can roughly adjust the curvature of the curve.
Insert image description here

Next, we implement the logic step by step

1. Create a click event and generate an element that will jump. We use two to generate the jumping element here. Use the `dom`outer node to perform `x`axis movement, and use the inner node to perform `y`axis movement. They are executed at the same time, pulling each other, and the elements will move to 45°. When the angle is moved and `x`the transition effect is added to the axis, a curvature will be formed.

let btn = document.getElementById('add') // 添加按钮
let car = document.getElementById('car') // 小车
let delay = 0.3 // 整个过程持续的时间秒(s)为单位

btn.addEventListener('click', event => {
    
    
  // 生成要执行弧度的元素
  let el = createEl()
  // 按钮的位置信息
  let btn_rect = btn.getBoundingClientRect()
  // 小车的位置信息
  let car_rect = car.getBoundingClientRect()
  // 设置小球的位置，X: 添加按钮距离网页的左边距 + 添加按钮自身一半的宽度 - 小球自身宽度的一半， Y: 添加按钮距离网页的上边距 - 按钮紫自身的高度
  el.style.left = btn_rect.x + btn_rect.width / 2 - el.offsetWidth / 2 + 'px'
  el.style.top = btn_rect.y - btn_rect.height + 'px'
})

/**
 * @description 生成弧度的元素
 * @return {Object} dom 节点
 */
function createEl() {
    
    
  let warp = document.createElement('div')
  let slide = document.createElement('div')
  warp.style.position = 'fixed'
  warp.style.left = '0'
  warp.style.top = '0'
  warp.style.zIndex = 2000
  warp.style.borderRadius = '50%'
  warp.style.transition = `transform ${
      
      delay}s linear`
  slide.style.width = '30px'
  slide.style.height = '30px'
  slide.style.textAlign = 'center'
  slide.style.lineHeight = '26px'
  slide.style.backgroundColor = 'red'
  slide.innerHTML = '+'
  slide.style.fontSize = '20px'
  slide.style.color = '#fff'
  slide.style.borderRadius = '50%'
  slide.style.transition = `transform ${
      
      delay}s cubic-bezier(.62,-0.32,.9,.49)`
  document.body.appendChild(warp)
  warp.appendChild(slide)
  return warp
}

We can take a look at the effect and create an element that is about to jump:

Insert image description here

2. Here we let the outer elements of the ball move horizontally, and the inner elements move vertically, forming a pull, and calculate the position of the horizontal translation and the position of the vertical translation.

setTimeout(_ => {
    
    
  // 横向平移：点击按钮距离网页左边距 - 购物小车距离网页左边距 + 小车自身宽度的一半
  el.style.transform = `translateX(-${
      
      btn_rect.x - car_rect.x + car_rect.width / 2}px)`
  // 纵向平移：小车距离网页的上边距 - 点击按钮距离网页的上边距 + 小车自身高度的一半
  el.childNodes[0].style.transform = `translateY(${
      
      car_rect.y - btn_rect.y + car_rect.height / 2}px)`

  // 延迟动画结束后，删除生成的跳跃元素
  setTimeout(_ => {
    
    
    el.remove()
  }, delay * 1000)
}, 100)

At this point, we have implemented a simple shopping cart parabola animation

3. Others

Bezier curve