JS parabolic animation operation example sharing

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. This article mainly gives you a detailed analysis of the JS parabolic animation production process and the sharing of related code examples. Friends who are interested can refer to 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 with transform: transform() will have better performance than top & left, but try I found that the ideal interaction effect cannot be achieved, and I look forward to continuing to study it

H5 implementation

// todo

Related recommendations:

Based on the jquery fly plug-in to implement the parabolic animation effect of adding to the shopping cart_jquery

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