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


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 相关文章推荐
web页面数据展示新想法(json)
Jun 08 Javascript
javascript forEach通用循环遍历方法
Oct 11 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
JavaScript实现点击图片换背景
Nov 20 Javascript
React 高阶组件HOC用法归纳
Jun 13 #Javascript
React forwardRef的使用方法及注意点
原生Javascript+HTML5一步步实现拖拽排序
JS代码编译器Monaco使用方法
React中的Context应用场景分析
Jun 11 #Javascript
详解JVM系列之内存模型
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
You might like
一些php技巧与注意事项分析
2011/02/03 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
Prototype Number对象 学习
2009/07/19 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
python实现随机梯度下降(SGD)
2020/03/24 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Python super()函数使用及多重继承
2020/05/06 Python
Python同时迭代多个序列的方法
2020/07/28 Python
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
生物技术专业研究生自荐信
2013/09/22 职场文书
绩效专员岗位职责
2013/12/02 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang