国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS 實現(xiàn)拋物線動畫

zollero / 2587人閱讀

摘要：陳家賓在做小程序的項目中，需要在添加購物車的時候，增加拋物線小球動畫。

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

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

先給大家看下效果圖（其實已經(jīng)是實現(xiàn)后的效果了，順便給自己公司打廣告了哈哈）

分析

這種不固定起始位置的動畫，自然不能用 gif 圖，所以只能用原生代碼實現(xiàn)

那我們有什么工具來實現(xiàn)動畫呢？

小程序提供了 JS API createAnimation 來創(chuàng)建動畫

CSS transition

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

這里我們只討論水平拋物線，水平拋物線從數(shù)學(xué)原理上來說就是【水平勻速、垂直加速的運動】，轉(zhuǎn)換成代碼層面就是在動畫效果 timingFunction 中，水平動畫采用 linear ，垂直動畫采用 ease-in

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

實現(xiàn) （一）小程序的實現(xiàn)

JS：

cartAnimation(x, y) { // x y 為手指點擊的坐標(biāo)，即球的起始坐標(biāo)
    let self = this,
        cartY = app.globalData.winHeight - 50, // 結(jié)束位置（購物車圖片）縱坐標(biāo)
        cartX = 50, // 結(jié)束位置（購物車圖片）的橫坐標(biāo)
        animationX = flyX(cartX, x), // 創(chuàng)建球的橫向動畫
        animationY = flyY(cartY, y) // 創(chuàng)建球的縱向動畫
    this.setData({
          ballX: x,
          ballY: y,
          showBall: true
    })
    setTimeoutES6(100).then(() => { // 100 ms 延時，確保球已經(jīng)到位并顯示
        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:

translate 優(yōu)化

據(jù)我所知，用 transform: translate() 來實現(xiàn)的動畫會比 top & left 性能更優(yōu)，但實現(xiàn)下來卻沒那么容易咯。

研究來研究去，發(fā)現(xiàn) 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 恢復(fù)默認值
            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 的實現(xiàn)

除了小程序之外，前端日常開發(fā)更多的當(dāng)然還是 H5，下面我將用 CSS3 transition 的方法來實現(xiàn)




    
    
    
    CSS3 水平拋物線動畫

還有體驗鏈接哦，點我

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/110119.html

相關(guān)文章

  • 原生JS實現(xiàn)DOM粒子爆炸效果

    摘要：爆炸動效分享前言此次分享是一次自我組件開發(fā)的總結(jié)，還是有很多不足之處，望各位大大多提寶貴意見，互相學(xué)習(xí)交流。粒子實現(xiàn)實現(xiàn)思路希望在粒子管控組件時，使用的方式創(chuàng)建粒子，每個粒子存在自己的動畫開始方法，動畫結(jié)束回調(diào)。 爆炸動效分享 前言 此次分享是一次自我組件開發(fā)的總結(jié)，還是有很多不足之處，望各位大大多提寶貴意見，互相學(xué)習(xí)交流。 分享內(nèi)容介紹 通過原生js代碼，實現(xiàn)粒子爆炸效果組件組件開發(fā)...

    KunMinX 評論0 收藏0

  • 原生JS實現(xiàn)DOM粒子爆炸效果

    摘要：爆炸動效分享前言此次分享是一次自我組件開發(fā)的總結(jié)，還是有很多不足之處，望各位大大多提寶貴意見，互相學(xué)習(xí)交流。粒子實現(xiàn)實現(xiàn)思路希望在粒子管控組件時，使用的方式創(chuàng)建粒子，每個粒子存在自己的動畫開始方法，動畫結(jié)束回調(diào)。 爆炸動效分享 前言 此次分享是一次自我組件開發(fā)的總結(jié)，還是有很多不足之處，望各位大大多提寶貴意見，互相學(xué)習(xí)交流。 分享內(nèi)容介紹 通過原生js代碼，實現(xiàn)粒子爆炸效果組件組件開發(fā)...

    chanthuang 評論0 收藏0

  • 原生JS實現(xiàn)DOM粒子爆炸效果

    摘要：爆炸動效分享前言此次分享是一次自我組件開發(fā)的總結(jié)，還是有很多不足之處，望各位大大多提寶貴意見，互相學(xué)習(xí)交流。粒子實現(xiàn)實現(xiàn)思路希望在粒子管控組件時，使用的方式創(chuàng)建粒子，每個粒子存在自己的動畫開始方法，動畫結(jié)束回調(diào)。 爆炸動效分享 前言 此次分享是一次自我組件開發(fā)的總結(jié)，還是有很多不足之處，望各位大大多提寶貴意見，互相學(xué)習(xí)交流。 分享內(nèi)容介紹 通過原生js代碼，實現(xiàn)粒子爆炸效果組件組件開發(fā)...

    RdouTyping 評論0 收藏0

  • velocity實現(xiàn)拋物線動畫

    摘要：昨天看到了鏈接描述寫的小程序中的拋物線動畫，當(dāng)時作者還沒發(fā)的版本，因此我就嘗試自己去做一個。同時正好練習(xí)一下使用，所以就用了來實現(xiàn)。第一次發(fā)文章和代碼還望大家指點 昨天看到了henry_chen 鏈接描述 寫的小程序中的拋物線動畫，當(dāng)時作者還沒發(fā)H5的版本，因此我就嘗試自己去做一個。同時正好練習(xí)一下使用Velocity，所以就用了Velocity.js來實現(xiàn)。第一次發(fā)文章和代碼還望大...

    nicercode 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<