小编给大家分享一下小程序中怎么实现文字循环滚动动画,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
本文通过实例为大家分享了小程序实现文字循环滚动的具体代码,供大家参考,具体内容如下
解决问题:
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(); },
以上是“小程序中怎么实现文字循环滚动动画”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。