亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

JS 實(shí)現(xiàn)拋物線動(dòng)畫

zollero / 2659人閱讀

摘要：陳家賓在做小程序的項(xiàng)目中，需要在添加購(gòu)物車的時(shí)候，增加拋物線小球動(dòng)畫。

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

在做小程序的項(xiàng)目中，需要在添加購(gòu)物車的時(shí)候，增加拋物線小球動(dòng)畫。

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

分析

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

那我們有什么工具來(lái)實(shí)現(xiàn)動(dòng)畫呢？

小程序提供了 JS API createAnimation 來(lái)創(chuàng)建動(dòng)畫

CSS transition

工具有了，我們?cè)倏匆幌率裁词菕佄锞€。

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

所以我們需要把這個(gè)拋物線動(dòng)畫分解成 兩個(gè) 同時(shí) 進(jìn)行但 不同動(dòng)畫效果 的動(dòng)畫。

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

JS：

cartAnimation(x, y) { // x y 為手指點(diǎn)擊的坐標(biāo)，即球的起始坐標(biāo)
    let self = this,
        cartY = app.globalData.winHeight - 50, // 結(jié)束位置（購(gòu)物車圖片）縱坐標(biāo)
        cartX = 50, // 結(jié)束位置（購(gòu)物車圖片）的橫坐標(biāo)
        animationX = flyX(cartX, x), // 創(chuàng)建球的橫向動(dòng)畫
        animationY = flyY(cartY, y) // 創(chuàng)建球的縱向動(dòng)畫
    this.setData({
          ballX: x,
          ballY: y,
          showBall: true
    })
    setTimeoutES6(100).then(() => { // 100 ms 延時(shí)，確保球已經(jīng)到位并顯示
        self.setData({
            animationX: animationX.export(),
            animationY: animationY.export(),
        })
        return setTimeoutES6(400) // 400 ms 是球的拋物線動(dòng)畫時(shí)長(zhǎng)
    }).then(() => { // 400 ms 延時(shí)后隱藏球
        this.setData({
            showBall: false,
        })
    })
}

function setTimeoutES6(sec) { // Promise 化 setTimeout
    return new Promise((resolve, reject) => {
        setTimeout(() => {resolve()}, sec)
    })
}

function flyX(cartX, oriX) { // 水平動(dòng)畫
    let animation = wx.createAnimation({
        duration: 400,
        timingFunction: "linear",
    })
    animation.left(cartX).step()
    return animation
}

function flyY(cartY, oriY) { // 垂直動(dòng)畫
    let animation = wx.createAnimation({
        duration: 400,
        timingFunction: "ease-in",
    })
    animation.top(cartY).step()
    return animation
}

HTML:

translate 優(yōu)化

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

研究來(lái)研究去，發(fā)現(xiàn) translate 的做法比 top & left 的做法多了一步，就是需要將小球的 translate 位移還原（否則 translate 一直有值），才能保證下一次的位移從點(diǎn)擊的位置開始

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ù)默認(rèn)值
            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 的實(shí)現(xiàn)

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




    
    
    
    CSS3 水平拋物線動(dòng)畫

還有體驗(yàn)鏈接哦，點(diǎn)我

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/110119.html

相關(guān)文章

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

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

    KunMinX 評(píng)論0 收藏0

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

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

    chanthuang 評(píng)論0 收藏0

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

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

    RdouTyping 評(píng)論0 收藏0

  • velocity實(shí)現(xiàn)拋物線動(dòng)畫

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

    nicercode 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<