一、css動(dòng)畫
動(dòng)畫過程中，可以使用 bindtransitionend bindanimationstart bindanimationiteration bindanimationend 來監(jiān)聽動(dòng)畫事件。
| 事件名 | 含義 |
|---|---|
| transitionend | CSS 漸變結(jié)束或 wx.createAnimation 結(jié)束一個(gè)階段 |
| animationstart | CSS 動(dòng)畫開始 |
| animationiteration | CSS 動(dòng)畫結(jié)束一個(gè)階段 |
| animationend | CSS 動(dòng)畫結(jié)束 |
<view class="box {{extraClasses}}"
bindtransitionend="transitionEnd" // CSS 漸變結(jié)束或 [wx.createAnimation]調(diào)用
bindanimationstart="animationStart"
bindanimationiteration="animationIteration"/>
二、關(guān)鍵幀動(dòng)畫
從小程序基礎(chǔ)庫 2.9.0 支持this.animate更友好的動(dòng)畫創(chuàng)建代替舊的 wx.createAnimation ,它具有更好的性能和更可控的接口
官方api
1、小程序動(dòng)畫api - this.animate
2、小程序動(dòng)畫api - wx.createAnimation
參考:
1、css3與api實(shí)現(xiàn)方式
2、【小程序動(dòng)畫合集】10種小程序動(dòng)畫效果實(shí)現(xiàn)方法
小程序的動(dòng)畫和css的動(dòng)畫區(qū)別:
還原時(shí)需要手動(dòng)清除動(dòng)畫過程添加的參數(shù)
1、過渡動(dòng)畫
wx.createAnimation 新版小程序基礎(chǔ)庫中推薦使用this.animate接口代替,使用方式和this.animate相似
通過該接口,只能使用這些提供好的屬性,不能使用額外的css屬性！
this.animate('選擇器',[{
offset:0, 當(dāng)前動(dòng)畫的占比,0-1
offset
ease linear
transformOrigin
backgroundColor
bottom:Number|String
height
left
width
opacity
right
top
matrix
matrix3d
rotate
rotate3d
rotateX
rotateY
rotateZ
scale:[x方向縮放,y方向縮放]
scale3d
scaleX
scaleY
scaleZ
skew
skewX
skewY
translate
translate3d
translateX
translateY
translateZ
},{
offset:0.5 當(dāng)前動(dòng)畫的占比時(shí)間
...可設(shè)置多個(gè)動(dòng)畫幀
}],過渡時(shí)間,function(){
動(dòng)畫結(jié)束回調(diào),回調(diào)中注意綁定this
}.bind(this))
2、滾動(dòng)過程動(dòng)畫
滾動(dòng)過程和this.animate不同,滾動(dòng)過程設(shè)置的屬性可以是this.animate提供的屬性以外的css屬性,使用駝峰命名
this.animate('選擇器,只支持選擇scroll-view中的元素',[{
除了支持this.animate中的配置外,還支持駝峰命名的其他css屬性
borderRadius: '25%',
borderColor: 'blue',
transform: 'scale(.65) translateY(-20px)',
},{...}], 動(dòng)畫時(shí)間, {
scrollSource 指定滾動(dòng)元素的選擇器(只支持scroll-view),該元素滾動(dòng)時(shí)會(huì)驅(qū)動(dòng)動(dòng)畫的進(jìn)度
orientation 指定滾動(dòng)的方向,效值為"horizontal"|"vertical"
startScrollOffset n,指定開始驅(qū)動(dòng)動(dòng)畫進(jìn)度的滾動(dòng)偏移量,單位px
endScrollOffset n,指定停止驅(qū)動(dòng)動(dòng)畫進(jìn)度的滾動(dòng)偏移量,單位px
timeRange 起始和結(jié)束的滾動(dòng)范圍映射的時(shí)間長(zhǎng)度,該時(shí)間可用于與關(guān)鍵幀動(dòng)畫里的時(shí)間(duration)相匹配,單位ms
當(dāng)設(shè)置了滾動(dòng)動(dòng)畫后,duration等已經(jīng)失效,動(dòng)畫只和滾動(dòng)距離有關(guān)
當(dāng)timeRange=動(dòng)畫時(shí)間,則抵達(dá)endScrollOffset時(shí)結(jié)束動(dòng)畫
當(dāng)timeRange>動(dòng)畫時(shí)間,則抵達(dá)endScrollOffset之前結(jié)束動(dòng)畫
當(dāng)timeRange<動(dòng)畫時(shí)間,則抵達(dá)endScrollOffset之后也不會(huì)到動(dòng)畫的最后一幀
})
3、css方式
通過css來設(shè)置動(dòng)畫,如果setData過多,會(huì)造成小程序僵死
優(yōu)化:通過wxs來綁定事件等產(chǎn)生動(dòng)畫,在視圖層處理,避免與邏輯層交互
4、監(jiān)聽動(dòng)畫
transitionend CSS 漸變結(jié)束或wx.createAnimation結(jié)束一個(gè)階段
animationstart CSS 動(dòng)畫開始
animationiteration CSS 動(dòng)畫結(jié)束一個(gè)階段
animationend CSS 動(dòng)畫結(jié)束
這幾個(gè)事件都不是冒泡事件,需要綁定在真正發(fā)生了動(dòng)畫的節(jié)點(diǎn)上才會(huì)生效。
使用時(shí):bindtransitionend
5、清除動(dòng)畫
調(diào)用animate API后會(huì)在節(jié)點(diǎn)上新增一些樣式屬性覆蓋掉原有的對(duì)應(yīng)樣式。
如果需要清除這些樣式,可在該節(jié)點(diǎn)上的動(dòng)畫全部執(zhí)行完畢后使用this.clearAnimation清除這些屬性。
this.clearAnimation('選擇器',{
要清除的屬性,不寫全部清除
opacity: true,
rotate: true,
...
}, function(){
清除完成后的回調(diào)函數(shù)
})
————————————————
版權(quán)聲明：本文為CSDN博主「神奇大叔」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43294560/article/details/120971317
demo
一、使用wx.createAnimation
<view class="animation_ll">
<view class="animation_view" animation="{{animationData}}"></view>
</view>
<button class="btn" bindtap="rotateAndScaleThenTranslate">先旋轉(zhuǎn)同時(shí)放大，然后平移</button>
<button class="btn" bindtap="rotateAndScale">旋轉(zhuǎn)同時(shí)放大</button>
<button class="btn" bindtap="rotateThenScale">先旋轉(zhuǎn)后放大</button>
<button class="btn" bindtap="reset">還原</button>
Page({
onShow() {
this.animation = wx.createAnimation({
duration: 1000, // 動(dòng)畫持續(xù)時(shí)間，單位 ms
timingFunction: 'linear', // 動(dòng)畫的效果, linear動(dòng)畫從頭到尾的速度是相同的
delay: 0, // 動(dòng)畫延遲時(shí)間，單位 ms
});
},
/**
* 先旋轉(zhuǎn)同時(shí)放大，然后平移
*/
rotateAndScaleThenTranslate() {
// 先旋轉(zhuǎn)同時(shí)放大，然后平移
this.animation.rotate(45).scale(2, 2).step();
this.animation.translate(100, 100).step({ duration: 1000 });
this.setData({
animationData: this.animation.export()
});
},
/**
* 旋轉(zhuǎn)同時(shí)放大
*/
rotateAndScale() {
this.animation.rotate(45).scale(2, 2).step();
this.setData({
animationData: this.animation.export()
});
},
/**
* 先旋轉(zhuǎn)后放大
*/
rotateThenScale() {
this.animation.rotate(45).step();
this.animation.scale(2, 2).step();
this.setData({
animationData: this.animation.export()
});
},
/**
* 重置
*/
reset() {
this.animation.rotate(0, 0)
.scale(1)
.translate(0, 0)
.skew(0, 0)
.step({ duration: 0 });
this.setData({
animationData: this.animation.export()
});
}
});
.animation_ll {
display: flex;
justify-content: center;
align-items: center;
margin: 250rpx 0;
}
.animation_view {
width: 200rpx;
height: 200rpx;
background-color: #1AAD19;
}
.btn {
background: deepskyblue;
color: #ffffff;
height: 80rpx;
width: 500rpx;
padding: 0 20rpx;
font-size: 30rpx;
line-height: 80rpx;
margin-top: 30rpx;
}
二、使用this.animate
Page({
clickAnimate() {
this.animate('#container', [
{ opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },
{ opacity: 0.5, rotate: 45, backgroundColor: '#00FF00' },
{ opacity: 0.1, rotate: 80, backgroundColor: '#007dff' },
], 2000, function () {
this.clearAnimation('#container', { opacity: true, rotate: true }, function () {
console.log('清除了#container上的 opacity 和rotate屬性');
});
}.bind(this));
},
/**
* 重置
*/
reset() {
this.animation.rotate(0, 0)
.scale(1)
.translate(0, 0)
.skew(0, 0)
.step({ duration: 0 });
this.setData({
animationData: this.animation.export()
});
}
});
