评论

小程序横向滚动公告 无限循环播放动画

横向滚动公告 无限循环播放

第一次分享 给我一个赞吧

人帅话不多 直接上代码

html

<view class='announcement-text' id="announcement-text" bindtransitionend='animationend' style="padding-left: {{ScreenWidth}}px;" animation="{{animationData}}"> {{notice_content}}</view>

绑定动画结束事件
bindtransitionend='animationend’

js

创建动画

initNoticeAnimation() {
            let that = this;
            this.createSelectorQuery().select('#announcement-text').boundingClientRect(function (rect) {
                let width = rect.width;  //获取公告view容器的宽度
                let hasStrLen = Math.ceil(width); 
                //动画时长, 为啥是10,这个凭感觉,越大越慢,自己调试取合适的倍数
                let timeT = hasStrLen * 10; 
                //创建动画实例
                var animation = wx.createAnimation({
                    //此处以公告内容来设置动画持续时间(duration:决定整个动画播放的速度)
                    duration: timeT,
                    timingFunction: 'linear'
                });
                animation.translate(-Number(hasStrLen), 0).step();
                that.setData({
                    hasStrLen: hasStrLen,
                    timeT: timeT,
                    animationData: animation.export(),
                    animation: animation
                });
            }).exec();
            
        },

循环动画(关键)

animationend() {
            let that = this;
            //复位容器的位置,准备开始下一次动画
            that.data.animation.translate(0, 0).step({duration: 0}); 
            that.setData({
                animationData: that.data.animation.export()
            }, ()=>{
            	//开始新一轮动画
                let animation = wx.createAnimation({
                    //此处以公告最长内容来设置动画持续时间(duration:决定整个动画播放的速度)
                    duration: that.data.timeT,
                    timingFunction: 'linear'
                });
                animation.translate(-Number(that.data.hasStrLen), 0).step();
                that.setData({
                    animationData: animation.export()
                });
            });
            
        },
最后一次编辑于  08-21  
点赞 7
收藏
评论

2 个评论

  • 仙森ღ₅₂₀¹³¹⁴
    仙森ღ₅₂₀¹³¹⁴
    08-22

    老哥 一个 swiper解决的问题。。不过感谢贡献新思路。给你点赞啊~

    08-22
    赞同 2
    回复 3
    • CK
      CK
      08-25
      那我学习下 swiper
      08-25
      回复
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      08-26回复CK
      https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
      08-26
      回复
    • Magic_Wager
      Magic_Wager
      09-12回复仙森ღ₅₂₀¹³¹⁴
      但是如果要弄在原生组件上,必须得cover-view,而cover-view不能嵌套swiper
      09-12
      回复
  • 吴迪
    吴迪
    08-22

    暴躁老哥在线怼码

    08-22
    赞同
    回复 1
    • CK
      CK
      08-25
      啥意思 带哥
      08-25
      回复