How to make a JS parabola animation (detailed tutorial)

This article gives you a detailed analysis of the JS parabolic animation production process and related code examples. Friends who are interested can refer to it.

In the project of making an unmanned convenience applet, one day the product said that it would learn from a certain manufacturer's product and add a parabolic ball animation to the shopping cart. Well, product you are the biggest, do it!

Let me show you the renderings first

Analysis

This kind of non-fixed start Of course, position animation cannot use GIF images, so it can only be implemented using native code

So what tools do we have to implement animation?

The applet provides the JS API createAnimation to create animations

CSS animation

Now that the tool is available, let’s take a look What is a parabola.

Here we only discuss the horizontal parabola. From the mathematical principle, the horizontal parabola is [movement with constant horizontal speed and vertical acceleration]. The conversion to the code level is in the animation effect timingFunction. The horizontal animation uses linear and the vertical animation uses ease-in

So we need to decompose this parabolic animation into two animations that are performed simultaneously but with different animation effects.

Implementation

Implementation of small program

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: false,
    })
  })
}

function setTimeoutES6(sec) { // Promise 化 setTimeout
  return new Promise((resolve, reject) => {
    setTimeout(() => {resolve()}, sec)
  })
}

function flyX(cartX, oriX) { // 水平动画
  let animation = wx.createAnimation({
    duration: 400,
    timingFunction: 'linear',
  })
  animation.left(cartX).step()
  return animation
}

function flyY(cartY, oriY) { // 垂直动画
  let animation = wx.createAnimation({
    duration: 400,
    timingFunction: 'ease-in',
  })
  animation.top(cartY).step()
  return animation
}

HTML:

<view animation="{{animationY}}" style="position:fixed;top:{{ballY}}px;" hidden="{{!showBall}}">
  <view class="ball" animation="{{animationX}}" style="position:fixed;left:{{ballX}}px;"></view>
</view>

As far as I know, the animation implemented using transform: transform() will be better than top & left The performance is better, but after trying it, I found that it cannot achieve the ideal interactive effect. I look forward to continuing to study it

H5 implementation

// todo

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Instances of mobile phone number, email regular verification and 60s sending verification code in vue

##NodeJS parent The principle and implementation method of resource sharing between processes and sub-processes

Vue implements active click switching method

The above is the detailed content of How to make a JS parabola animation (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!