Codebeispiel für die Implementierung einer parabolischen Animation in JS

In einem kleinen Programmprojekt müssen Sie beim Hinzufügen eines Warenkorbs eine Parabolball-Animation hinzufügen.

Analyse

Diese Art von Animation ohne feste Startposition kann natürlich keine GIF-Bilder verwenden und kann daher nur mit nativem Code implementiert werden

Welche Tools müssen wir dann verwenden? Animation umsetzen?

• Das Applet bietet die JS-API createAnimation zum Erstellen von Animationen

• CSS-Übergang

Das Tool verfügt über Schauen wir uns nun an, was eine Parabel ist.

Hier diskutieren wir nur die horizontale Parabel. Aus mathematischer Sicht ist die horizontale Parabel [eine Bewegung mit konstanter horizontaler Geschwindigkeit und vertikaler Beschleunigung. Die Umwandlung in die Codeebene erfolgt in der Funktion „Timing“. Die horizontale Animation verwendet linear und die vertikale Animation verwendet Easy-in.

Daher müssen wir diese parabolische Animation in zwei Animationen zerlegen, die gleichzeitig ausgeführt werden, jedoch unterschiedliche Animationseffekte haben.

Implementierung

(1) Implementierung 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 ms 延时，确保球已经到位并显示
        self.setData({            animationX: animationX.export(),            animationY: animationY.export(),
        })        return setTimeoutES6(400) // 400 ms 是球的抛物线动画时长
    }).then(() => { // 400 ms 延时后隐藏球
        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>

Übersetzungsoptimierung

Soweit ich weiß, hat eine mit transform: translator() implementierte Animation eine bessere Leistung als top & left, ist aber nicht so einfach zu implementieren.

Nachdem ich recherchiert und recherchiert habe, habe ich festgestellt, dass die Übersetzungsmethode einen Schritt weiter ist als die Methode von oben und links, das heißt, die Übersetzungsverschiebung des Balls muss wiederhergestellt werden (andernfalls hat die Übersetzung immer einen Wert). um sicherzustellen, dass sich die nächste Verschiebung vom Klicken an ändert. Die Startposition

cartAnimation(x, y) {    let self = this,
        cartY = app.globalData.winHeight - 50,
        cartX = 50,
        animationX = flyX(cartX, x),
        animationY = flyY(cartY, y)    this.setData({        leftNum: x,        topNum: y,        showBall: true
    })
    setTimeoutES6(100).then(() => {
        self.setData({            animationDataX: animationX.export(),            animationDataY: animationY.export(),
        })        return setTimeoutES6(400)
    }).then(() => {        this.setData({            showBall: false,            animationX: flyX(0, 0, 0).export(), // 还原小球位置，即 translate 恢复默认值
            animationY: flyY(0, 0, 0).export(),
        })
    })
}function flyX(cartX,oriX,duration) {    let animation = wx.createAnimation({        duration: duration||400,        timingFunction: 'linear',
    })
    animation.translateX(cartX-oriX).step()    return animation
}function flyY(cartY,oriY,duration) {    let animation = wx.createAnimation({        duration: duration||400,        timingFunction: 'ease-in',
    })
    animation.translateY(cartY-oriY).step()    return animation
}

HTML-Teil bleibt unverändert

(2) Implementierung von H5

Zusätzlich zu kleinen Programmen, Natürlich wird H5 häufiger für die tägliche Front-End-Entwicklung verwendet. Im Folgenden werde ich die CSS3-Übergangsmethode verwenden, um

<!DOCTYPE html><html lang="en" style="width:100%;height:100%;"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <style>
        * {            padding: 0;            margin: 0;
        }        #ball {            width:12px;            height:12px;            background: #5EA345;            border-radius: 50%;            position: fixed;            transition: left 1s linear, top 1s ease-in;
        }    </style>
    <title>CSS3 水平抛物线动画</title></head><body style="width:100%;height:100%;">
    <p id="ball"></p></body><script>
    var $ball = document.getElementById('ball');    document.body.onclick = function (evt) {        console.log(evt.pageX,evt.pageY)
        $ball.style.top = evt.pageY+'px';
        $ball.style.left = evt.pageX+'px';
        $ball.style.transition = 'left 0s, top 0s';
        setTimeout(()=>{
            $ball.style.top = window.innerHeight+'px';
            $ball.style.left = '0px';
            $ball.style.transition = 'left 1s linear, top 1s ease-in';
        }, 20)
    }</script></html>

Verwandte Empfehlungen zu implementieren:

JS Teilen von Beispielen für parabolische Animationsvorgänge

Tipps zum Teilen von parabolischen Bewegungen von Bildern in HTML5

Codebeispiele für parabolische Bewegungen der Animation elastischer potentieller Energie in JavaScript

Das obige ist der detaillierte Inhalt vonCodebeispiel für die Implementierung einer parabolischen Animation in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!