小程序实现css3动画

最新推荐文章于 2024-05-09 16:37:31 发布

閉丄眼聆厛倖輻

最新推荐文章于 2024-05-09 16:37:31 发布

阅读量382

点赞数

分类专栏： uni-app 文章标签： css3 动画 css

本文链接：https://blog.csdn.net/weixin_52005030/article/details/121851201

版权

uni-app 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

    loadAnimation() {
      //如果文字超出盒子，就滚动播放
      this.linner = true;
      this.animationObj = uni.createAnimation({
        timingFunction: "linear",
      }); //创建一个动画实例 animation
      this.startAnimation();
    },

    startAnimation() {
      //执行动画函数
      let height = this.records.length * 33;
      let that = this;
      let duration = 10000; //滚动的持续时间
      if (this.linner) {
        this.animationObj.translateY(-height).step({ duration }); //.step执行动画,duration参数为持续时间
        this.animation = this.animationObj.export(); //export 方法导出动画数据传递给组件的 animation 属性,执行完export会清除上一次动画
        this.$nextTick(() => {
          //等dom更新完成后再执行，dom渲染的过程是异步的
          this.linner = !this.linner;
          setTimeout(() => {
            //等动画执行完再进行下一次动画
            that.animationObj = uni.createAnimation({
              timingFunction: "step-start",
            });
            that.startAnimation();
          }, duration);
        });
      } else {
        let data = 1;
        this.animationObj.translateY(0).step({ data }); //.step执行动画,duration参数为持续时间
        this.animation = this.animationObj.export(); //export 方法导出动画数据传递给组件的 animation 属性,执行完export会清除上一次动画
        this.$nextTick(() => {
          //等dom更新完成后再执行，dom渲染的过程是异步的
          this.linner = !this.linner;
          //等动画执行完再进行下一次动画
          setTimeout(() => {
            //等动画执行完再进行下一次动画
            that.animationObj = uni.createAnimation({
              timingFunction: "linear",
            });
            that.startAnimation();
          }, 3000);
        });
      }
    },