Dieses Mal bringe ich Ihnen JS, um eine einheitliche Parabelanimation zu erstellen Was sind die Vorsichtsmaßnahmen für die Erstellung einer einheitlichen Parabelanimation mit JS? Schauen Sie einmal vorbei.
Während der Arbeit an einem kleinen Programm für unbemannte Benutzerfreundlichkeit 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 Animation ohne feste Startposition Natürlich können Sie keine GIF-Bilder verwenden, daher können Sie nur nativen Code verwenden, um dies zu erreichen. Welche Tools haben wir also, um Animationen zu implementieren? Das Applet stellt die JS-API createAnimation zum Erstellen von Animationen bereit.CSS-Animation
Mit dem Tool in der Hand schauen wir uns an, was eine Parabel ist 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-inWir müssen diese parabolische Animation also in zwei Animationen zerlegen, die gleichzeitig, aber mit unterschiedlichen Animationseffekten ausgeführt werden. ImplementierungImplementierung des MiniprogrammsJS:
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>// todo
Was tun, wenn das Schieben dynamisch geladener Daten immer fehlschlägt?
D3.js zeichnet einen dynamischen Fortschrittsbalken
Das obige ist der detaillierte Inhalt vonJS erstellt eine einheitliche parabolische Animation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
