微信小程序：公告字幕滚动播放（文字跑马灯效果）

一、需求

公告文字仅限200字
公告内容仅限一行文字显示
公告内容持续滚动

二、解决思路

使用动画API（Animation.translate），完成移动动画
使用定时器API（setInterval）,完成循环播放动画

注意：

微信小程序的动画APItranslate,只有动画效果还原后，才能进行第二次动画
根据第一条，需要两个定时器：
第一个定时器：用于循环复原动画效果
第二个定时器：用于循环播放动画效果
两个定时器的执行回调函数之间的时间间隔不能相同，否则会导致动画无法正常播放
优化上述两个步骤为只用一个定时器来循环两个动画，采用中间睡眠一段时间，错开两个动画的播放开始时间
因为动画的偏移距离由公告内容长度决定，造成了动画播放速度与公告内容相关。
（动画的duration: 1000：表示在该时间段内播放完整组动画）

三、实现效果

1.字幕第一次开始公告旁边（从右向左）滚动

2.字幕第二次从屏幕左边从右向左）滚动

三、实现代码

1.wxml

    <view class='width border-box f-pl30 f-pr30 f-mt30 f-mb30'><form report-submit="true" bindsubmit="bindOpenAnnouncement"><button class='btn-reset flex announcement order-box f-pl25 f-pr25' form-type="submit"><view class='f-pl25 f-font24 f-pr25'>公告</view><view class='f-font24 s-32 announcement-context'><view animation="{{animationData}}" class="f-font24 s-32 announcement-text f-text-left">{{announcementText}}</view></view></button></form></view>

2.wxss（此处只展示关键样式，其余为基本样式不做展示）

.announcement {color: #a0a0a0;background: #fff0e3;border-radius: 6rpx;line-height: 66rpx;height: 66rpx;
}
.announcement-context {width: 580rpx;/* 偏移出文本框的内容隐藏掉 */overflow: hidden;
}
.announcement-text {width: 570rpx;/* 文字内容只做一行显示 */white-space: nowrap;
}

3.js

   data: {animationData: {}, //公告动画announcementText: "营业时间从早上10点到晚上8点，支持预先下单，祝用餐愉快",//公告内容},onLoad: function(options) {var that = this;//创建动画实例var animation = wx.createAnimation({//此处以公告最长内容来设置动画持续时间（duration：决定整个动画播放的速度）duration: 90000,timingFunction: 'linear'});//偏移距离为公告内容的长度*字体大小（若字体大小使用rpx需要换算成px）animation.translate(-Number(this.data.announcementText.length * 12),0).step();this.setData({animationData: animation.export()});// 循环播放动画关键步骤（使用两个定时器）// 第一个定时器：将字幕恢复到字幕开始点（为屏幕左边）this.recoveraAnimation = setInterval(function() {animation.translate(255,0).step({duration:0});this.setData({animationData: animation.export()});}.bind(this), 90000);// 第二个定时器：重新开始移动动画this.restartAnimation = setInterval(function() {animation.translate(-Number(this.data.announcementText.length * 12),0).step();this.setData({animationData: animation.export()});}.bind(this), 90001);},onUnload: function(){//清除定时器clearInterval(this.recoveraAnimation);clearInterval(this.restartAnimation);},

优化后的js

/*** 开启公告字幕滚动动画* @param  {String} announcementText 公告内容* @return {[type]}                  [description]*/initAnimation: function(announcementText) {var that = this;//初始化动画var animation = wx.createAnimation({duration: 22500,timingFunction: 'linear'});animation.translate(-Number(announcementText.length * 12), 0).step();that.setData({animationData: animation.export()});/****************************优化部分*******************************/// 重新开始动画that.restartAnimation = setInterval(function() {animation.translate(255, 0).step({duration: 0});that.setData({animationData: animation.export()});// 延迟5再执行下个动画that.sleep(5);animation.translate(-Number(announcementText.length * 12), 0).step();that.setData({animationData: animation.export()});}.bind(this), 22500);},/*** 睡眠时间* @param  {Number} num 需要延迟的时间长度*/sleep: function(num){var nowTime = new Date();var exitTime = nowTime.getTime() + num;while(true){nowTime = new Date();if(nowTime.getTime() > exitTime)return;}},

微信小程序：公告字幕滚动播放（文字跑马灯效果）相关推荐

微信小程序公告滚动通知
微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 通过vertical属性(默认为false,实现默认左右滚动)设置为true来实现上下滚动 ...
c语言小程序跑马灯,微信小程序实现文字跑马灯效果
本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 wxml 1 显示完后再显示 Box"> 2 出现白边后即显示 Box"> {{tex ...
微信小程序教程：文字跑马灯效果
当你的微信小程序内容中出现文字跑马灯效果,会不会觉得很拉风,接下来大家详细讲解下如何操作实现这效果. 效果: wxml <view>1 显示完后再显示</view> <v ...
java实现音频播放小程序_微信小程序实现音频文件播放进度的实例代码
问题描述在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度,下面即用代码实现. 解决方案首先用.wxml与 .wmss 代码实现进度条的效果,再通过 .js 文件控制进度条的进 ...
微信小程序预览无法播放视频
微信小程序预览无法播放视频,但是用开发工具可以播放,真机调试也可以播放,是因为勾选了"不校验合法域名.web-view(业务域名).TLS 版本以及 HTTPS 证书"吗?
微信小程序页面上下滚动、左右滑动（二）
系列文章目录微信小程序页面上下滚动.左右滑动(一) 文章目录系列文章目录前言项目结构解决问题1 1.pretest页面 2.test页面解决问题2 总结参考前言在上一篇文章,讲解了再 ...
微信小程序页面竖向滚动逻辑
微信小程序页面竖向滚动逻辑 1.实现下面类似的数组注:下面这个生成的数组最好是整数,滑动的时候会失去精度的,要不然你永远会差一点,让你崩溃的.而且你永远不知道差在哪里. this.leftScrol ...
解决微信小程序ios端滚动卡顿的问题
解决微信小程序ios端滚动卡顿的问题参考文章: (1)解决微信小程序ios端滚动卡顿的问题 (2)https://www.cnblogs.com/goloving/p/10563472.html 备 ...
php小程序 100行左右,微信小程序左右分类滚动列表
今天需求个类似得到app分类的功能,效果如图: 左右分别滚动,互不干扰,先把简单的布局和样式搭好. 左侧分类右侧顶部分类右侧列表 .flex_row{display: flex;flex-dire ...
零基础也能学会的微信小程序制作横向滚动布局
零基础也能学会的微信小程序制作横向滚动布局准备工作: 微信开发者工具 APPID或测试号创建一个JavaScript基本框架(如下图) 动手做起来吧~ index.wxml 最终效果: <! ...

微信小程序：公告字幕滚动播放（文字跑马灯效果）

一、需求

二、解决思路

三、实现效果

三、实现代码

微信小程序：公告字幕滚动播放（文字跑马灯效果）相关推荐

最新文章

热门文章