小程序可滑动弧形进度条(小程序实现文字循环滚动动画)
类别:编程学习 浏览量:1264
时间:2022-01-14 02:32:14 小程序可滑动弧形进度条
小程序实现文字循环滚动动画本文通过实例为大家分享了小程序实现文字循环滚动的具体代码,供大家参考,具体内容如下
解决问题:
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(); },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- ih5如何点击按钮跳转至网页(HTML5跳转小程序wx-open-launch-weapp的示例代码)
- 微信小程序数学公式(微信小程序计算器实例详解)
- 微信小程序开发如何实现自动保存(微信小程序开发实用技巧之数据传递和存储)
- 微信小程序日期选择器有星期天(微信小程序 滚动选择器时间日期详解及实例代码)
- 微信小程序获取时间(微信小程序wxs日期时间处理的实现示例)
- 苹果微信小程序页面空白(iPhoneX安全区域Safe Area底部小黑条在微信小程序和H5的屏幕适配)
- php开发微信小程序后台步骤流程(基于PHP实现微信小程序客服消息功能)
- css浮动小例子教程(使用css transition属性实现一个带动画显隐的微信小程序部件)
- 微信小程序计算器怎么用(用微信小程序实现计算器功能)
- 小程序详细步骤使用方法(小程序的基本使用知识点非常全面,推荐!)
- 怎么编写计算小程序(微信小程序实现简易计算器)
- 能自动点赞的小程序(python实现QQ空间自动点赞功能)
- dedecms织梦小程序插件(批量删除织梦dedecms文档搜索关键词的方法)
- 微信小程序抽签如何抽中(JavaScript实现班级抽签小程序)
- 微信小程序canvas 动画(微信小程序使用canvas绘制钟表)
- 微信小程序即时聊天功能怎么实现(微信小程序实现聊天室功能)
- 参考文献里期刊名称的写法,你知道吗(参考文献里期刊名称的写法)
- 硕博期刊 SCI SSCI CSSCI分不清 一文带你看懂主流期刊分类(硕博期刊SCISSCI)
- 辱华品牌新百伦官宣新代言人IU,个别粉丝希望get爱豆同款(辱华品牌新百伦官宣新代言人IU)
- 巅峰时期被爆床照,曾被选国民最讨厌女星,IU不为人知的黑历史(巅峰时期被爆床照)
- 每天1万吨牛奶倒进下水道,美国大萧条一幕重现(每天1万吨牛奶倒进下水道)
- 如何看待美国数十万加仑牛奶倒下水道 历史又重演了(如何看待美国数十万加仑牛奶倒下水道)
热门推荐
- 删除有外键约束的数据
- dede执行查询语句(dede调用指定栏目下相关文章的实现方法)
- videojs播放流媒体(video.js支持m3u8格式直播的实现示例)
- 云服务器传统服务器配置(云服务器、高防服务器的不同之处体现在哪里?)
- dedecms怎么设置翻页(DEDECMS中获取无限栏目子分类的方法)
- js中push和join
- js中encodeURIComponent与C#中HttpUtility.UrlEncode
- 网络连接云主机(如何远程连接云主机?)
- laravel 框架关键技术解析(在laravel框架中实现封装公共方法全局调用)
- dedecms标签路径修改问题(解决织梦DEDE5.7 tags系列bug图解步骤)