小程序文字循环滚动 小程序实现文字循环滚动动画
编程改变人生 人气:0想了解小程序实现文字循环滚动动画的相关内容吗，编程改变人生在本文为您仔细讲解小程序文字循环滚动的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：小程序文字循环滚动,小程序文字循环,小程序循环滚动，下面大家一起来学习吧。
本文通过实例为大家分享了小程序实现文字循环滚动的具体代码，供大家参考，具体内容如下
解决问题：
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();
},
加载全部内容