小程序拋物線動(dòng)畫
發(fā)布時(shí)間：2018-05-29 11:35 所屬欄目：小程序開發(fā)教程
|
由于最近小程序項(xiàng)目需要用到加入購(gòu)物車的動(dòng)畫，自己結(jié)合小程序官方文檔寫了一下加入購(gòu)物車動(dòng)畫demo, 有需要改進(jìn)的地方還請(qǐng)指出; 先來(lái)看一下demo的效果圖：
分析要實(shí)現(xiàn)拋物線動(dòng)畫，我當(dāng)時(shí)想到的是用插件的方式，網(wǎng)上有很多，但是要兼容小程序還是有點(diǎn)困難，況且小程序的主包有2M限制; 那么如何在小程序中實(shí)現(xiàn)這種效果呢? wx.createAnimation css3 transition 實(shí)現(xiàn)方式有了，我們?cè)賮?lái)看一下什么是拋物線，數(shù)學(xué)上定義拋物線的種類有很多，但就上圖的效果而言，需要 水平方向勻速運(yùn)動(dòng) & 垂直方向加速運(yùn)動(dòng) ; wx.createAnimation 提供 timingFunction , 即水平方向 linear , 垂直方向 ease-in 實(shí)現(xiàn)一. 小程序?qū)崿F(xiàn)本次實(shí)現(xiàn)基于 wepy框架 (非小程序原生)，所以 $apply ---> setData 就好了~ html
<view class="box">
<view>
<button bindtap="handleClick">點(diǎn)擊</button>
</view>
<view animation="{{animationY}}" style="position:fixed;top:{{ballY}}px;" hidden="{{!showBall}}">
<view class="ball" animation="{{animationX}}" style="position:fixed;left:{{ballX}}px;"></view>
</view>
</view>
JS
// 設(shè)置延遲時(shí)間
methods = {
handleClick: (e) => {
// x, y表示手指點(diǎn)擊橫縱坐標(biāo), 即小球的起始坐標(biāo)
let ballX = e.detail.x,
ballY = e.detail.y;
this.isLoading = true;
this.$apply();
this.createAnimation(ballX, ballY);
}
}
setDelayTime(sec) {
return new Promise((resolve, reject) => {
setTimeout(() => {resolve()}, sec)
});
}
// 創(chuàng)建動(dòng)畫
createAnimation(ballX, ballY) {
let that = this,
bottomX = that.$parent.globalData.windowWidth,
bottomY = that.$parent.globalData.windowHeight-50,
animationX = that.flyX(bottomX, ballX), // 創(chuàng)建小球水平動(dòng)畫
animationY = that.flyY(bottomY, ballY); // 創(chuàng)建小球垂直動(dòng)畫
that.ballX = ballX;
that.ballY = ballY;
that.showBall = true;
that.$apply();
that.setDelayTime(100).then(() => {
// 100ms延時(shí), 確保小球已經(jīng)顯示
that.animationX = animationX.export();
that.animationY = animationY.export();
that.$apply();
// 400ms延時(shí), 即小球的拋物線時(shí)長(zhǎng)
return that.setDelayTime(400);
}).then(() => {
that.animationX = this.flyX(0, 0, 0).export();
that.animationY = this.flyY(0, 0, 0).export();
that.showBall = false;
that.isLoading = false;
that.$apply();
})
}
// 水平動(dòng)畫
flyX(bottomX, ballX, duration) {
let animation = wx.createAnimation({
duration: duration || 400,
timingFunction: 'linear',
})
animation.translateX(bottomX-ballX).step();
return animation;
}
// 垂直動(dòng)畫
flyY(bottomY, ballY, duration) {
let animation = wx.createAnimation({
duration: duration || 400,
timingFunction: 'ease-in',
})
animation.translateY(bottomY-ballY).step();
return animation;
}
二. H5實(shí)現(xiàn)除了小程序以外， q前端日常開發(fā)更多的還是H5，下面用 css3 transition 來(lái)實(shí)現(xiàn);
<!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;
}
</style>
<title>CSS3 水平拋物線動(dòng)畫</title>
</head>
<body>
</body>
<script>
let body = document.documentElement;
body.addEventListener('click', (evt) => {
let ball = document.createElement('div');
let left = evt.pageX;
let top = evt.pageY;
ball.classList.add('ball');
ball.style.left = left+'px';
ball.style.top = top+'px';
body.append(ball);
setTimeout(() => {
ball.style.left = 0;
ball.style.top = window.innerHeight+'px';
ball.style.transition = 'left 200ms linear, top 200ms ease-in';
}, 20)
})
</script>
</html>
體驗(yàn)鏈接請(qǐng)點(diǎn)我 至此，js拋物線動(dòng)畫的實(shí)現(xiàn)就介紹的差不多了~哈哈 |
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
碼云倉(cāng)庫(kù):
本文地址：http://www.kknew.com.cn/wxmini/doc/course/24477.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢： 點(diǎn)擊咨詢
