Exemple de code pour implémenter une animation parabolique en JS

Dans un petit projet de programme, vous devez ajouter une animation de boule parabolique lors de l'ajout d'un panier.

Analyse

Ce type d'animation sans position de départ fixe ne peut naturellement pas utiliser d'images gif, elle ne peut donc être implémentée qu'avec du code natif

Alors de quels outils disposons-nous pour mettre en œuvre une animation ?

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

• Transition CSS

L'outil a Voyons maintenant ce qu'est 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 en même temps mais avec des effets d'animation différents.

Implémentation

(1) Implémentation 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 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>

optimisation de la traduction

Pour autant que je sache, l'animation implémentée à l'aide de transform: translate() aura de meilleures performances que top & left, mais ce n'est pas si simple à implémenter.

Après des recherches et des recherches, j'ai découvert que la méthode de traduction est une étape de plus que la méthode haut et gauche, c'est-à-dire que le déplacement de translation de la balle doit être restauré (sinon la traduction aura toujours une valeur) pour s'assurer que le prochain déplacement changera à partir du clic La position de départ

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
}

La partie HTML reste inchangée

(2) Implémentation de H5

En plus des petits programmes, le développement front-end le plus quotidien est bien sûr H5. Ci-dessous, j'utiliserai la méthode de transition CSS3 pour implémenter

<!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>

Recommandations associées :

Opération d'animation parabolique JS. exemple de partage

Partage de conseils sur le mouvement parabolique des images en HTML5

Exemples de code de mouvement parabolique d'animation d'énergie potentielle élastique en JavaScript

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!