| 微信小程序：公告字幕滚动播放（文字跑马灯效果） | 您所在的位置：网站首页 › 怎么加载字幕效果图 › 微信小程序：公告字幕滚动播放（文字跑马灯效果） |
微信小程序：公告字幕滚动播放（文字跑马灯效果）
|
一、需求
公告文字仅限200字公告内容仅限一行文字显示公告内容持续滚动
二、解决思路
使用动画API（Animation.translate），完成移动动画使用定时器API（setInterval）,完成循环播放动画
注意： 微信小程序的动画APItranslate,只有动画效果还原后，才能进行第二次动画根据第一条，需要两个定时器： 第一个定时器：用于循环复原动画效果 第二个定时器：用于循环播放动画效果两个定时器的执行回调函数之间的时间间隔不能相同，否则会导致动画无法正常播放优化上述两个步骤为只用一个定时器来循环两个动画，采用中间睡眠一段时间，错开两个动画的播放开始时间因为动画的偏移距离由公告内容长度决定，造成了动画播放速度与公告内容相关。 （动画的duration: 1000：表示在该时间段内播放完整组动画） 三、实现效果1.字幕第一次开始公告旁边（从右向左）滚动 1.wxml 公告 |
2.字幕第二次从屏幕左边从右向左）滚动 
【本文地址】
公司简介
联系我们