⼩程序实现⼀个循环的⽂本跑马灯2（animate）
接上个博客的，⽂本跑马灯的animate实现
上个版本是根据setinterval定时器修改位置实现动画效果，体验还⾏，但是太耗资源，如果想体验流畅那么频率就很⼩，步长也不能太长，但是会很慢，由于频率⾼，⼀秒钟执⾏三四⼗次，太耗费资源，于是我这边就使⽤⼩程序的animate做了另⼀种实现
主要思路：根据⽂本的长度设定过渡时间，动画结束后再次滚动即可，直接看代码
wxml
<view class='marquee_container'>
<view id="marquee_wrap"class='marquee_text'animation="{{ani}}"bindtransitionend="animationend" style='{{ orientation }}:{{ marqueeDistance }}px;fon t-size: {{size}}px;'>
<view class="item"for="{{text}}"for-index="key"for-item="item"key="{{index}}">
{{AwardsUser}}抽中{{item.name}}
</view>
</view>
</view>
js
Component({
/**
* 组件的属性列表
*/
properties:{
text:{
type: Array,
value:[],
observer(newVal, oldVal){
if(newVal){
this.dynamicLength()
setTimeout(()=>{
this.startAni()
},2500);
}
}
}
},
/
**
* 组件的初始数据
*/
data:{
orientation:'left',
windowWidth:750,
length:0,
ani:''
},
created:function(){},
/**
* 组件的⽅法列表
*/
methods:{
startAni:function(){
let{ length }=this.data
// console.log("length", length)
let duration = und(length)*7+5000
var animation = wx.createAnimation({
duration: duration,
timingFunction:'linear',
delay:0
});
// anslateX(375).step()    //有初始化默认位置，这个可以不要
// anslateX(375).step()    //有初始化默认位置，这个可以不要      wx.nextTick(()=>{
this.setData({
ani:  port()
})
})
},
animationend(){
// console.log("")
var animation = wx.createAnimation({
duration:0,
timingFunction:'linear',
delay:0
});
this.setData({
ani:  port()
})
this.startAni()
},
dynamicLength(){
var _this =this
//选择器
const query = wx.createSelectorQuery().in(this)
query.select('#marquee_wrap').boundingClientRect(function(rect){
console.log("rect", rect)
_this.setData({
length:rect.width
})
}).exec();
}
}
})
wxss
.marquee_container{
position: relative;
width: 100%;
/* margin-top: 80rpx; */
marquee marquee}
.marquee_text{
position: absolute;
white-space: nowrap;
}
.item{
display: inline;
margin-left:22rpx;
margin-right:22rpx;
padding: 14rpx 40rpx;
line-height: 52rpx;
/* opacity: 0.43; */
/* background: #E1D3C2; */
background:rgba(241, 211, 194, 0.43);
color: #E83C00;
border-radius: 52rpx;
}
.item:first-child{
margin-left:0;
}
.item:last-child{
margin-right:0;
}
整体实现思路和执⾏顺序就是：每次初始化先获取⽂本你的实际长度，再进⾏动画过渡，过渡时间根据你⾃⼰的算法来，监听动画执⾏结束后，直接调⽤执⾏动画即可
ps：动画结束触发⽅法是bindtransitionend，不是transitionend

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。