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

2024-10-20 20:17:27

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

解决问题：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

mpvue小程序循环动画开启暂停的实现方法

用小程序的 animation 属性实现循环动画的开启与暂停,并封装到组件. 实现一个字体图标组件的循环旋转动画开启/暂停用于点击图标,字体颜色变换,开始循环旋转动画,并刷新内容刷新结束,停止动画,并设置字体颜色为原来的主要利用 setInterval 定时器循环执行动画首先,组件写出来添加点击事件,动画属性, style 属性(用来动态修改样式) src/components/refresh.vue <template> <div> <div class=&quo
微信小程序开发之animation循环动画实现的让云朵飘效果

本文实例讲述了微信小程序开发之animation循环动画实现的让云朵飘效果.分享给大家供大家参考,具体如下: 微信小程序提供了实现动画的api--animation,但却不能循环播放,都是一次性的,动完就Over了,下面提供一个用微信小程序的animation来实现循环动画的玩具,抛砖引玉,希望大家能想出更好的方法来实现真正的循环.说是玩具是因为这个循环动画通过js脚本的setInterval来实现的,但'setInterval'在实际运行中会出现越来越严重的延迟,这是由于js的单线程运行模式所
微信小程序实现循环动画效果

在微信小程序的交互效果中,通常通过各种动画效果来增强用户体验,本文通过微信小程序原生API来实现小程序中控件的各种动画效果,先看下本文最终的效果: 上图中的"关注公众号"动画就是我们要实现的效果. 为了实现上文中的效果,我们首先来看一下微信小程序关于动画的官方API 微信官方API学习 wx.createAnimation(OBJECT) 说明:创建一个动画实例animation.调用动画操作方法后要调用 step() 来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画
小程序实现文字循环滚动动画

本文通过实例为大家分享了小程序实现文字循环滚动的具体代码,供大家参考,具体内容如下解决问题: 1.文字循环播放特效 2.小程序退出.隐藏后台动画停止(已解决) 效果: 代码: wxml <view animation="{{animation}}" class="animation"> 919测试使用--小程序循环播放~~~ </view> wxss .animation{ width: 100%; transform: translate
微信小程序scroll-view组件实现滚动动画

本文实例为大家分享了scroll-view组件实现索引列表滚动动画效果,供大家参考,具体内容如下效果图实现原理利用scroll-view的scroll-into-view属性进行定位: 利用scroll-view的scroll-with-animation属性实现滚动动画过度. WXML <view class="right-nav"> <view bindtap="getCurrentCode" class="{{chooseIn
微信小程序实现文字从右向左无限滚动

本文实例为大家分享了微信小程序实现文字无限滚动的具体代码,供大家参考,具体内容如下布局页面wxml <scroll-view class="container"> <view class="scrolltxt"> <view class="marquee_box"> <view class="marquee_text" style="transform: translate
微信小程序实现文字跑马灯效果

本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下效果 wxml <view>1 显示完后再显示</view> <view class="example"> <view class="marquee_box"> <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px
微信小程序实现文字滚动

本文实例为大家分享了微信小程序实现文字滚动的具体代码,供大家参考,具体内容如下 wxml: <view>显示完后再显示:</view> <view class="example"> <view class="box"> <view class="text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}
微信小程序scroll-view实现字幕滚动

本文实例为大家分享了微信小程序scroll-view实现字幕滚动的具体代码,供大家参考,具体内容如下需求: 实现框内的文字自下而上的自动循环滚动. 解决方案: demo:字幕滚动通过控制滑动条来完成字幕滚动,通过setinterval完成字幕循环滚动. wxml: <scroll-view class="container" scroll-y="true" bindscroll="scroll" scroll-top="{{s
微信小程序实现文字无限轮播效果

本文实例为大家分享了微信小程序实现文字无限轮播展示的具体代码,供大家参考,具体内容如下 .JS文件 onLoad中添加下列代码 var self = this; var width = wx.getSystemInfoSync().screenWidth; function carousel_num() { var animation = wx.createAnimation({ transformOrigin: "50% 50%", duration: 5000, timingFu
微信小程序实现给循环列表添加点击样式实例

微信小程序实现给循环列表添加点击样式实例微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: <view class="taga"> <view class="tag-title">标签</view> <view class="tag-box"> <vie
微信小程序之前台循环数据绑定

微信小程序之前台循环数据绑定微信小程序的循环数据绑定到wxml例: wxml里: <view wx:for="{{array}}"> {{item.message}} </view> 通过上面的wx.for可以绑定一个数组,数组是json类型的:默认的索引序号是item,所以用{{item.message}} 显示数据js里: data: { array: [ { "message": "foot", "txt
微信小程序loading组件显示载入动画用法示例【附源码下载】

本文实例讲述了微信小程序loading组件显示载入动画用法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <loading hidden="{{loadingHidden}}"> 加载中... </loading> <button type="default" bindtap="loadingTap">点击弹出loading</button> ② index

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

相关推荐

随机推荐