微信小程序实现公告文字滚动

微信小程序通过Animation动画对象实现文字滚动效果

1、 效果图：

2、wxml代码

  <!-- 公告轮播效果 -->
  <view class='notice' wx:if="{
    {isOpen}}">
    <!-- 公告的喇叭图片 -->
    <view class="left" bindtap="goNoticesList">
 <image src="../../icons/suona.png" mode="aspectFit"></image>
 </view>
  
   <!-- 中间：公告内容 -->
   <view class='content-box'>
     <view class='content-text' animation="{
    {animationData}}" bindtransitionend='animationend'>
     <text id="text">{
  {text}}</text>
    </view>
    </view>

<!-- 右边：详情-->
 <view class="right" bindtap="goNotice">
  <text class="more">详情>></text>
 </view>
 <!-- 右边：关闭公告滚动-->
 <view class="close" bindtap="closeNotices"