小程序实现文字循环滚动动画


Posted in Javascript onJune 14, 2021

本文通过实例为大家分享了小程序实现文字循环滚动的具体代码,供大家参考,具体内容如下

解决问题:

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();
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
js漂浮广告实现代码
Aug 15 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
vue实现文字加密功能
Sep 27 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
React 高阶组件HOC用法归纳
Jun 13 #Javascript
React forwardRef的使用方法及注意点
原生Javascript+HTML5一步步实现拖拽排序
JS代码编译器Monaco使用方法
React中的Context应用场景分析
Jun 11 #Javascript
详解JVM系列之内存模型
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
You might like
Web程序工作原理详解
2014/12/25 PHP
php中define用法实例
2015/07/30 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
简明json介绍
2008/09/28 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
在Django中实现添加user到group并查看
2019/11/18 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
Python 忽略文件名编码的方法
2020/08/01 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
校园文化建设方案
2014/02/03 职场文书
初中班级口号
2014/06/09 职场文书
党建工作汇报材料
2014/12/24 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis