Comment réaliser une animation de parabole JS (tutoriel détaillé)

Cet article vous propose une analyse détaillée du processus de production d'animation parabolique JS et le partage d'exemples de code associés. Les amis intéressés peuvent s'y référer.

Alors qu'il travaillait sur un petit programme de commodité sans pilote, un jour, le produit a déclaré qu'il apprendrait du produit d'un certain fabricant et ajouterait une animation de balle parabolique au panier. Eh bien, produit, vous êtes le plus grand, faites-le !

Laissez-moi d'abord vous montrer les rendus

Analyse

Ce genre de non-fixe start Naturellement, l'animation de position ne peut pas utiliser d'images GIF, elle ne peut donc être implémentée qu'en utilisant du code natif

Alors, de quels outils disposons-nous pour implémenter l'animation ?

L'applet fournit l'API JS createAnimation pour créer des animations

Animation CSS

Maintenant que l'outil est disponible, passons jetez un oeil Qu'est-ce qu'une parabole.

Ici, nous discutons uniquement de la parabole horizontale. D'après le principe mathématique, la parabole horizontale est [mouvement avec une vitesse horizontale constante et une accélération verticale]. La conversion au niveau du code se fait dans la fonction de synchronisation de l'effet d'animation. utilise linéaire et l'animation verticale utilise easy-in

Nous devons donc décomposer cette animation parabolique en deux animations qui sont exécutées simultanément mais avec des effets d'animation différents.

Mise en œuvre

Mise en œuvre du mini programme

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>

Pour autant que je sache, les animations implémentées à l'aide de transform: transform() le feront a de meilleures performances que top & left, mais après l'avoir essayé, j'ai découvert qu'il ne pouvait pas obtenir l'effet interactif idéal. J'attends avec impatience des recherches plus approfondies

implémentation H5

// todo

.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Exemples de numéro de téléphone portable, vérification régulière par email et envoi du code de vérification en 60s en vue

Parent NodeJS Le principe et la méthode de mise en œuvre du partage de ressources entre processus et sous-processus

Vue implémente la méthode de commutation active par clic

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!