uni-app动画api怎么实现动画循环播放？

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app动画api怎么实现动画循环播放？

问题描述

let animation = uni.createAnimation({  
    timingFunction: "linear"  
})  
onShow(() => {  
    let timer = setInterval(() => {  
        animation.width("480rpx").height("480rpx").step({duration: 1000});  
        animation.width("360rpx").height("360rpx").step({duration: 0});  
        animationData.value = animation.export();  
    }, 1000)  
})

求助，这段代码为什么不能实现动画循环？


Harmonyos Next教程
2 回复

看代码没啥问题，setInterval可以无限执行，但是具体你要实现什么效果请提供完成的demo。


在uni-app中，你可以通过其动画API实现动画的循环播放。这通常涉及到创建动画实例、配置动画属性、应用动画，并通过animation.export()方法将其绑定到组件样式上。要实现动画循环播放，你可以利用animation.delay和animation.duration属性，结合JavaScript的定时器或递归函数来不断重新设置动画。

下面是一个简单的代码示例，演示如何在uni-app中实现动画的循环播放：

// 在页面的script部分
export default {
  data() {
    return {
      animationData: {}
    };
  },
  onLoad() {
    this.createAnimation();
  },
  methods: {
    createAnimation() {
      const animation = uni.createAnimation({
        duration: 1000, // 动画持续时间
        timingFunction: 'linear', // 动画缓动函数
      });

      animation.scale(1.5, 1.5).step(); // 动画步骤：放大到1.5倍
      animation.scale(1, 1).step({ duration: 1000, delay: 1000 }); // 动画步骤：缩回原大小，并在1秒后开始

      // 导出动画数据
      this.animationData = animation.export();

      // 递归调用实现循环播放
      setTimeout(() => {
        this.createAnimation();
      }, 2000); // 动画总时长为2秒，因此2秒后重新创建动画
    }
  }
};

<!-- 在页面的template部分 -->
<view class="container">
  <image class="animated-image" :style="animationData" src="/static/your-image.png"></image>
</view>

/* 在页面的style部分 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.animated-image {
  width: 100px;
  height: 100px;
}

在这个例子中，我们创建了一个简单的缩放动画，动画分为两步：首先放大到1.5倍，然后在1秒后缩回原大小。通过setTimeout递归调用createAnimation方法，我们可以在动画结束后立即重新开始，从而实现动画的循环播放。

注意，这种方法虽然简单直观，但对于复杂的动画或需要精确控制的场景，可能需要更精细的时间管理和动画状态管理。在实际应用中，你可能还需要根据动画的复杂度和性能需求来调整动画的持续时间、延迟和缓动函数等参数。

回到顶部