需求是醬紫的：
頁面頂部的喇叭通知，內(nèi)容不固定，寬度不固定，就是做走馬燈（輪播）效果，從左到右的走馬燈（輪播），每播放一遍暫停 1500ms ～ 2000ms
剛開始想的是 css 的 position: relative + animation，如果寬度固定還好說，寬度不固定，用百分比的話，想象很美好，現(xiàn)實很骨感，百分比相對的是父元素寬度…，所以 pass 掉
又想到動態(tài)生成 keyframes ，這樣動態(tài)獲取子元素寬度，再動態(tài)生成 keyframes ，動態(tài)傳入 偏移量，這樣就好了，可是這是小程序…，如果web端倒是可以動態(tài)操作 cssRule，小程序端，我真不會
然后從小程序文檔直接搜索 animation ，還真找到了
Animation API
于是就理所當然的用上啦
看結(jié)果
不嘮叨，直接點擊查看代碼片段：https://developers.weixin.qq.com/s/Ju3T3amk7oKc
思路：
頁面結(jié)構(gòu)
<view class="integral-notice common-flex-between">
<view class="integral-notice-left">
<image class="integral-notice-left-icon" src="icon-horn.png" mode="aspectFill"></image>
</view>
<view class="integral-notice-right common-flex-start">
<view class="integral-notice-right-item notice_1" animation="{{animationData}}">各位憧橙會員大家好，積分商城發(fā)貨周期為一個月2次，每個月15號和30號發(fā)貨，有問題請聯(lián)系客服，謝謝！</view>
<!-- 這里之所以放兩個一樣的，是為了無縫銜接的滾動 -->
<view class="integral-notice-right-item notice_1" animation="{{animationData}}">各位憧橙會員大家好，積分商城發(fā)貨周期為一個月2次，每個月15號和30號發(fā)貨，有問題請聯(lián)系客服，謝謝！</view>
</view>
</view>
樣式代碼
/*通用flex水平方向垂直居中布局*/
.common-flex-between {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
}
.common-flex-around {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: nowrap;
}
.common-flex-center {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
}
.common-flex-start {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
}
.integral-notice{
position: fixed;
left: 0;
top: 0;
background: #FEF6F0;
width: 750rpx;
height: 98rpx;
box-sizing: border-box;
padding-left: 24rpx;
padding-right: 24rpx;
}
.integral-notice-left{
box-sizing: border-box;
padding-right: 20rpx;
}
.integral-notice-left-icon{
display: block;
width: 38rpx;
height: 34rpx;
}
.integral-notice-right{
overflow: hidden;
}
.integral-notice-right-item{
white-space: nowrap;
color: #141418;
font-size: 28rpx;
letter-spacing: 2rpx;
height: 32rpx;
line-height: 34rpx;
position: relative;
left: 0;
top: 0;
}
第一步： 讓它動起來
js代碼
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
animationData: {},
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
const query = wx.createSelectorQuery()
query.selectAll('.notice_1').boundingClientRect((res)=>{
let noticeWidth = res[0].width
this.startAnimation(noticeWidth)
})
query.exec()
},
startAnimation(left, duration = 10000) {
this.animation = wx.createAnimation()
let offset = -left
this.animation.left(offset).step({
duration,
timingFunction: 'linear'
})
this.setData({
animationData: this.animation.export()
})
},
備注：這里你會發(fā)現(xiàn)，是動起來了，就執(zhí)行了一次
木事，改代碼，讓它執(zhí)行完的時候回到起點
startAnimation(left, duration = 10000) {
this.animation = wx.createAnimation()
let offset = -left
this.animation.left(offset).step({
duration,
timingFunction: 'linear'
})
this.setData({
animationData: this.animation.export()
})
// 這里，讓它回去起點，便于后邊無限循環(huán)
setTimeout(() => {
this.animation.left(0).step({
duration: 0, // 時間為 0
timingFunction: 'step-start' // 這個是 動畫第一幀就跳至結(jié)束狀態(tài)直到結(jié)束
})
this.setData({
animationData: this.animation.export()
})
}, duration)
},
看到這里，無限循環(huán)播放的動畫就知道怎么做了吧，做個遞歸不就好啦？不信咱試試？
startAnimation(left, duration = 10000) {
this.animation = wx.createAnimation()
let offset = -left
this.animation.left(offset).step({
duration,
timingFunction: 'linear'
})
this.setData({
animationData: this.animation.export()
})
setTimeout(() => {
this.animation.left(0).step({
duration: 0,
timingFunction: 'step-start'
})
this.setData({
animationData: this.animation.export()
})
// 遞歸，無限循環(huán)播放
this.startAnimation(left, duration)
}, duration)
},
注意：你會發(fā)現(xiàn)時好時壞，沒事，加延遲，加異步，因為雖然是同步執(zhí)行的代碼，代碼執(zhí)行+運行也要時間啊，1ms、5ms、10ms 也是時間文章來源：http://www.zghlxwxcb.cn/news/detail-643892.html
startAnimation(left, duration = 10000, wait = 2000) {
this.animation = wx.createAnimation()
let offset = -left
this.animation.left(offset).step({
duration,
timingFunction: 'linear'
})
this.setData({
animationData: this.animation.export()
})
setTimeout(() => {
this.animation.left(0).step({
duration: 0,
timingFunction: 'step-start'
})
this.setData({
animationData: this.animation.export()
})
// 加上延遲，加上需求上的等待時間 wait
let minWait = 12 // 之所以給了個 minWait，是防止 bug，就是那個代碼執(zhí)行/運行時間，經(jīng)測試，我這里 12ms 的延遲比較合適
setTimeout(() => {
this.startAnimation(left, duration, wait)
}, wait < minWait ? minWait : wait)
}, duration)
},
歐啦，大功告成，
文章來源地址http://www.zghlxwxcb.cn/news/detail-643892.html
到了這里，關(guān)于微信小程序animation動畫，微信小程序animation動畫無限循環(huán)播放的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
