JS拋物線動畫實例制作

來源：懂視網責編：小采時間：2020-11-27 22:18:45

JS拋物線動畫實例制作

JS拋物線動畫實例制作:在做無人便利小程序的項目中，某一天產品說要像某產商產品學習，給添加購物車增加拋物線小球動畫。好吧，產品你最大，做！先給大家看下效果圖分析這種不固定起始位置的動畫，自然不能用 gif 圖，所以只能用原生代碼實現那我們有什么工具來實現動畫呢？

推薦度：

點擊下載本文 文檔為doc格式

導讀JS拋物線動畫實例制作:在做無人便利小程序的項目中，某一天產品說要像某產商產品學習，給添加購物車增加拋物線小球動畫。好吧，產品你最大，做！先給大家看下效果圖分析這種不固定起始位置的動畫，自然不能用 gif 圖，所以只能用原生代碼實現那我們有什么工具來實現動畫呢？

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

先給大家看下效果圖

分析

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

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

小程序提供了 JS API createAnimation 來創建動畫

CSS animation

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

這里我們只討論水平拋物線，水平拋物線從數學原理上來說就是【水平勻速、垂直加速的運動】，轉換成代碼層面就是在動畫效果 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>

據我所知，用 transform: transtate() 來實現的動畫會比 top & left 性能更優，但嘗試下來發現并不能做到理想的交互效果，期待后續繼續研究吧

H5 的實現