小程序可滑动弧形进度条
小程序实现文字循环滚动动画本文通过实例为大家分享了小程序实现文字循环滚动的具体代码，供大家参考，具体内容如下
解决问题：
1、文字循环播放特效
2、小程序退出、隐藏后台动画停止（已解决）
效果：
代码：
wxml
<view animation="{{animation}}" class="animation">
919测试使用——小程序循环播放~~~
</view>
wxss
.animation{
width: 100%;
transform: translateX(100%);
position: fixed;
top: 45%;
font-size: 16px;
font-weight: bold;
}
最后js
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
this.bindAnimation();
},
bindAnimation(){
var this_ = this;
var animation = wx.createAnimation({
duration: 5000,
timingFunction: 'linear',
transformOrigin:"100% 0 0"
})
animation.translateX('-100%').step();
this.setData({
animation:animation.export(),
})
//设置循环动画
this.animation = animation;
setInterval(function(){
//第二个动画 文字位置初始化
this.Animation2();
//延迟播放滚动动画（效果会更好点）
setTimeout(function(){
this.animation.translateX('-100%').step();
this.setData({
animation: animation.export(),
})
}.bind(this),200);
}.bind(this),5000);
},
/**
* 第二个动画 文字位置初始化
*/
Animation2(){
var this_ = this;
var animation2 = wx.createAnimation({
duration: 0,
timingFunction: 'linear',
transformOrigin:"100% 0 0"
})
animation2.translateX('100%').step();
this_.setData({
animation:animation2.export(),
})
},
/**
* 解决小程序退出、隐藏后台动画停止
*/
onHide: function () {
//解决小程序退出、隐藏后台动画停止
//重新触发动画方法即可
this.bindAnimation();
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持开心学习网。