JS makes uniform parabolic animation

This time I will bring you JS to make a uniform parabolaAnimation, what are the precautions for making a uniform parabola animation with JS, the following is a practical case, let’s take a look one time.

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 animation with no fixed starting position , naturally you cannot use gif images, so you can only use native code to achieve

So what tools do we have to implement animation?

The applet provides the JS API createAnimation to create animations

CSS animation

Now that we have the tool, let’s take a look at what a parabola is.

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 have better performance than top & left, but after trying it, I found that it cannot achieve the ideal interactive effect. I look forward to further research

H5 Implementation

// todo

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

What to do if the dynamically loaded data slide always fails

D3.js Drawing Dynamic Progress Bar

The above is the detailed content of JS makes uniform parabolic animation. For more information, please follow other related articles on the PHP Chinese website!