当前位置 博文首页 > tongtongsong的博客：小程序文字循环滚动动画（完美解决）
解决问题：
? ? 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();
},?
cs