JS 實現拋物線動畫

henry_chen發表於2018-02-24
JS動畫
author: 陳家賓
email: 617822642@qq.com
date: 2018/2/24
複製程式碼

JS 實現拋物線動畫

在做無人便利小程式的專案中，某一天產品說要像某產商產品學習，給新增購物車增加拋物線小球動畫。好吧，產品你最大，做！

先給大家看下效果圖（其實已經是實現後的效果了，順便給自己公司打廣告了哈哈）

JS 實現拋物線動畫

分析

這種不固定起始位置的動畫，自然不能用 gif 圖，所以只能用原生程式碼實現

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

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

工具有了，我們再看一下什麼是拋物線。

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

所以我們需要把這個拋物線動畫分解成 兩個 同時 進行但 不同動畫效果 的動畫。

實現

一、小程式的實現

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>
複製程式碼
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>
複製程式碼

還有體驗連結哦，點我

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

相關文章