JS 實現拋物線動畫

時間 2019-11-29

原文原文鏈接

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

JS 實現拋物線動畫

在作無人便利小程序的項目中，某一天產品說要像某產商產品學習，給添加購物車增長拋物線小球動畫。好吧，產品你最大，作！javascript

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

分析

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

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

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

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

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

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

實現

1、小程序的實現

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:bash

<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 性能更優，但實現下來卻沒那麼容易咯。app

研究來研究去，發現 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>
複製代碼

還有體驗連接哦，點我

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

相關標籤/搜索

每日一句

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