手持弹幕字幕滚动小程序全屏显示

最新推荐文章于 2024-10-08 11:48:31 发布

嗨！番茄℡西红柿好吃吗?

最新推荐文章于 2024-10-08 11:48:31 发布

阅读量176

点赞数 2

文章标签：小程序 javascript 微信开放平台

本文链接：https://blog.csdn.net/qq_52600882/article/details/142516558

版权

标题## 手持弹幕字幕滚动小程序

小程序能做到真正的全屏显示

很早之前看到大家都在使用字幕滚动小程序，自己也做了一款。功能还比较简单，不过已经上线了。在这里插入图片描述小程序目前有功能为：
1、字幕全屏滚动；
2、改变文字大小颜色；
3、移动速度；
4、背景颜色。

字幕文本字体改变功能还没有实现，抽时间在做做。后续会增加一些模板样式，让字体、背景样式选择更多。

让字幕滚动的关键代码：

       data: {
    animationData: {}
  },

  onReady: function() {
    const query = wx.createSelectorQuery();
    query.select('.container').boundingClientRect();
    query.select('.scroll-content').boundingClientRect();
    query.exec((res) => {
      const containerWidth = res[0].width;    //字幕文本宽度
      const contentWidth = res[1].width;       //为放文字容器宽度
      this.createAnimation(containerWidth, contentWidth);
    });
  },

  createAnimation: function(containerWidth, contentWidth) {
    const animation = wx.createAnimation({
      duration: 10000, // 动画持续时间
      timingFunction: 'linear',
      delay: 0,
      transformOrigin: '0 0 0'
    });

    const resetAnimation = wx.createAnimation({
      duration: 0, // 重置动画持续时间为 0，瞬间完成
      timingFunction: 'linear',
      delay: 0,
      transformOrigin: '0 0 0'
    });

    const animate = () => {
      // 重置位置
      resetAnimation.translateX(containerWidth).step();
      this.setData({
        animationData: resetAnimation.export()
      });

      // 确保重置动画完成后再开始滚动动画
      setTimeout(() => {
        // 滚动动画
        animation.translateX(-contentWidth).step();
        this.setData({
          animationData: animation.export()
        });

        // 在滚动动画完成后再调用animate函数
        setTimeout(animate, 10000); // 每10秒重新开始动画
      }, 50); // 50毫秒后开始滚动动画
    };

    animate(); // 初次调用animate函数，启动动画循环
   
  }
});

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/ae60782607874702b10c6b8168b8a23b.jpeg#pic_center

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/1acc08e423e543ffb2c2a82032e23e89.jpeg#pic_center

在这里插入图片描述