评论

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

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

第一次分享 给我一个赞吧

人帅话不多 直接上代码

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()
                });
            });
            
        },
点赞 10
收藏
评论

3 个评论

  • Lv: Max Human
    Lv: Max Human
    2019-08-22

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

    2019-08-22
    赞同 3
    回复 7
    • 。吃饭第一名
      。吃饭第一名
      2019-08-25
      那我学习下 swiper
      2019-08-25
      回复
    • Lv: Max Human
      Lv: Max Human
      2019-08-26回复。吃饭第一名
      https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
      2019-08-26
      回复
    • Magic_Wager
      Magic_Wager
      2019-09-12回复Lv: Max Human
      但是如果要弄在原生组件上,必须得cover-view,而cover-view不能嵌套swiper
      2019-09-12
      回复
    • 忘川
      忘川
      04-25
      想问下如果用swiper确实可以解决滚动问题,但是如何让动画一开始就滚动而不等待呢?
      04-25
      回复
    • Lv: Max Human
      Lv: Max Human
      04-25回复忘川
      autoplay 自动播放 就好了啊
      04-25
      回复
    查看更多(2)
  • 吴迪
    吴迪
    2019-08-22

    暴躁老哥在线怼码

    2019-08-22
    赞同 1
    回复 1
  • 周星
    周星
    07-13

    如果内容长度没有超过父级滚动区域的宽度,那就没有办法做无缝衔接了

    07-13
    赞同
    回复
登录 后发表内容