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


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 相关文章推荐
js正确获取元素样式详解
Aug 07 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
JS hashMap实例详解
May 26 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
深入理解vue中的$set
Jun 01 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
JavaScript中的类型检查
Feb 03 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/04/22 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
PHP安全下载文件的方法
2016/04/07 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
Python代码块批量添加Tab缩进的方法
2018/06/25 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
浅谈python写入大量文件的问题
2018/11/09 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
营销与策划个人求职信
2013/09/22 职场文书
个人实用简单的自我评价
2013/10/19 职场文书
大四自我鉴定
2014/02/08 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
优秀员工自荐书
2015/03/06 职场文书
品德与社会教学反思
2016/02/24 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS
php双向队列实例讲解
2021/11/17 PHP