So erstellen Sie eine JS-Parabelanimation (ausführliches Tutorial)

Dieser Artikel bietet Ihnen eine detaillierte Analyse des Produktionsprozesses für parabolische JS-Animationen und die Weitergabe zugehöriger Codebeispiele. Interessierte Freunde können darauf verweisen.

Während ich an einem kleinen Programm für unbemannte Benutzerfreundlichkeit arbeitete, sagte das Produkt eines Tages, dass es vom Produkt eines bestimmten Herstellers lernen und eine Parabolball-Animation in den Warenkorb legen würde. Nun, du bist der Größte, tu es!

Lassen Sie mich Ihnen zuerst die Renderings zeigen

Analyse

Diese Art von nicht fixiertem Start Natürlich kann die Positionsanimation keine GIF-Bilder verwenden, daher kann sie nur mit nativem Code implementiert werden

Welche Tools haben wir also, um Animationen zu implementieren?

Das Applet stellt die JS-API createAnimation zum Erstellen von Animationen bereit

CSS-Animation

Da das Tool nun verfügbar ist, können wir es tun Schauen Sie mal, was eine Parabel ist.

Hier diskutieren wir nur die horizontale Parabel. Die horizontale Parabel ist [Bewegung mit konstanter horizontaler Geschwindigkeit und vertikaler Beschleunigung] in der Animationseffekt-Timing-Funktion verwendet lineare und die vertikale Animation verwendet Easy-in

Daher müssen wir diese parabolische Animation in zwei Animationen zerlegen, die gleichzeitig, aber mit unterschiedlichen Animationseffekten ausgeführt werden.

Umsetzung

Umsetzung des Miniprogramms

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>

Soweit ich weiß, wird die mit transform: transform() erzielte Animation besser als top sein & links Die Leistung ist besser, aber nachdem ich es ausprobiert habe, habe ich festgestellt, dass es nicht den idealen interaktiven Effekt erzielen kann. Ich freue mich auf die weitere Forschung

H5-Implementierung

// todo

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Beispiele für Mobiltelefonnummer, regelmäßige E-Mail-Verifizierung und Senden eines Bestätigungscodes in 60s in Vue

NodeJS-Elternteil Das Prinzip und die Implementierungsmethode der Ressourcenfreigabe zwischen Prozessen und Unterprozessen

Vue implementiert die aktive Klickschaltmethode

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine JS-Parabelanimation (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!