wepy下引用连续动画

最新推荐文章于 2022-07-18 19:28:39 发布

带你吃饭就好

最新推荐文章于 2022-07-18 19:28:39 发布

阅读量107

点赞数

分类专栏：移动端动画小程序文章标签：小程序

本文链接：https://blog.csdn.net/weixin_43722571/article/details/116047792

版权

移动端同时被 3 个专栏收录

6 篇文章 2 订阅

订阅专栏

小程序

3 篇文章 0 订阅

订阅专栏

动画

1 篇文章 0 订阅

订阅专栏

本文介绍如何在Wepy框架下实现一个线条的连续上下滑动动画效果。原本尝试通过定义多个动画动作来实现，但发现动画仅执行一次。为解决此问题，改为在一个动画内设置无限循环动作，从而达到预期的连续滑动效果。代码示例包括template和script部分，最终成功实现了线条的持续动画。注意，这里的`this.animation`是在运行时动态创建并添加到data中的。

摘要由CSDN通过智能技术生成

想要在wepy中实现一根线条的上下滑动，想法如下图：
在这里插入图片描述

最开始我的想法是定义一个动画，每次给他不同动作，但是动画只执行了一次（后续代码部分在修改后里展示）如（知道原因的前辈在下方留言告知哦，感激~）：

var mark=true;
this.setintervalInstance=setInterval(
        function() {
          // animation.translateY(-60).step()
          if (mark) {
            this.animation.translateY(400).step();
          } else {
           this.animation.translateY(-400).step();
          }
          mark=!=mark
          this.animationData = this.animation.export();
        }.bind(this),
        2000
      );

然后总是只执行一次，最后选择就在一个动画里只做一个动作，只是这个动作一直在循环，也能达到一样的效果

修改后：
template中

<view class="scan-animation"animation="{{animationData}}"></view>

script中

wepy.page({
  data: {
    animationData: {},
    setintervalInstance: null,
  },
  onShow() {
    this.donghua();
  },
  onUnload(){
    clearInterval(this.setintervalInstance)//清除定时器
  },
  methods: {
    donghua() {
      var animation = wx.createAnimation({
        duration: 2000
      });
      this.animation = animation;
      this.animationData = animation.export();
      var n = 0;
      //连续动画需要添加定时器,所传参数每次变化就行
      this.setintervalInstance=setInterval(
        function() {
          // animation.translateY(-60).step()
          if (n < 400) {
            n = n + 400;
          } else {
            n = n - 400;
          }
          console.log(n);
          this.animation.translateY(n).step();
          this.animationData = this.animation.export();
        }.bind(this),
        2000
      );
    }
});

动画成功的上下滑动了。
PS： this.animation这个animation数据我没放在一开始的data中,使用this.animation就是创建一个animation到data里面