小程序?qū)崿F(xiàn)文字循環(huán)滾動動畫
更新時間:2021年06月14日 12:02:03 作者:編程改變?nèi)松?
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)文字循環(huán)滾動動畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文通過實例為大家分享了小程序?qū)崿F(xiàn)文字循環(huán)滾動的具體代碼,供大家參考,具體內(nèi)容如下
解決問題:
1、文字循環(huán)播放特效
2、小程序退出、隱藏后臺動畫停止(已解決)
效果:

代碼:
wxml
<view animation="{{animation}}" class="animation">
919測試使用——小程序循環(huán)播放~~~
</view>
wxss
.animation{
width: 100%;
transform: translateX(100%);
position: fixed;
top: 45%;
font-size: 16px;
font-weight: bold;
}
最后js
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
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(),
})
//設(shè)置循環(huán)動畫
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 () {
//解決小程序退出、隱藏后臺動畫停止
//重新觸發(fā)動畫方法即可
this.bindAnimation();
},
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js行號顯示的文本框?qū)崿F(xiàn)效果(兼容多種瀏覽器 )
本文主要介紹了javascript實現(xiàn)行號顯示的文本框效果,這樣就可以解決讀者很難迅速找到所在某一行的對應(yīng)代碼,感興趣的小伙伴們可以參考一下2015-10-10
JS實現(xiàn)選擇TextArea內(nèi)文本的方法
這篇文章主要介紹了JS實現(xiàn)選擇TextArea內(nèi)文本的方法,涉及javascript針對頁面TextArea元素焦點設(shè)置及文本獲取的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
HTML5之WebSocket入門3 -通信模型socket.io
socket.io能為程序員提供客戶端和服務(wù)端一致的編程體驗,socket.io支持任何的瀏覽器,任何的Mobile設(shè)備。下面通過本篇文章給大家講解HTML5之WebSocket入門3 -通信模型socket.io,需要的朋友可以參考下2015-08-08
再談querySelector和querySelectorAll的區(qū)別與聯(lián)系
先按W3C的規(guī)范來說這兩個方法應(yīng)該返回的內(nèi)容吧,大家先看下官方的解釋,然后根據(jù)需要選擇使用2012-04-04
JavaScript設(shè)計模式之模板方法模式原理與用法示例
這篇文章主要介紹了JavaScript設(shè)計模式之模板方法模式原理與用法,結(jié)合實例形式分析了JavaScript模板方法模式的概念、組成、定義、使用等相關(guān)操作技巧與注意事項,需要的朋友可以參考下2018-08-08

