JS 實現拋物線動畫

時間 2019-11-07

原文原文鏈接

author: 陳家賓
email: 617822642@qq.com
date: 2018/2/24

在作小程序的項目中，須要在添加購物車的時候，增長拋物線小球動畫。html

先給你們看下效果圖（其實已是實現後的效果了，順便給本身公司打廣告了哈哈）前端

分析

這種不固定起始位置的動畫，天然不能用 gif 圖，因此只能用原生代碼實現git

那咱們有什麼工具來實現動畫呢？github

小程序提供了 JS API createAnimation 來建立動畫
CSS transition

工具備了，咱們再看一下什麼是拋物線。小程序

這裏咱們只討論水平拋物線，水平拋物線從數學原理上來講就是【水平勻速、垂直加速的運動】，轉換成代碼層面就是在動畫效果 timingFunction 中，水平動畫採用 linear ，垂直動畫採用 ease-inapp

因此咱們須要把這個拋物線動畫分解成兩個同時進行但 不一樣動畫效果 的動畫。工具

實現

（一）小程序的實現

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>

translate 優化

據我所知，用 transform: translate() 來實現的動畫會比 top & left 性能更優，但實現下來卻沒那麼容易咯。動畫

研究來研究去，發現 translate 的作法比 top & left 的作法多了一步，就是須要將小球的 translate 位移還原（不然 translate 一直有值），才能保證下一次的位移從點擊的位置開始

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 部分不變

（二）H5 的實現

除了小程序以外，前端平常開發更多的固然仍是 H5，下面我將用 CSS3 transition 的方法來實現

<!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%;">
    <div id="ball"></div>
</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>

還有體驗連接哦，點我

至此，水平拋物線動畫的實現就介紹得差很少啦，嘻嘻！！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。