uni-app 动画渲染到微信开发工具只执行一次

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

uni-app 动画渲染到微信开发工具只执行一次

开发环境 版本号 项目创建方式
Windows Windows 10 专业版 HBuilderX

示例代码：

//创建闪烁动画  
createBlinkAnimation(totalDuration) {  
    let that = this;  
    // 创建动画实例  
    let animation = uni.createAnimation({  
        duration: totalDuration,  
        timingFunction: 'step-start',  
    });  
    setInterval(() => {  
        animation.opacity(0).step({  
            duration: 200  
        });  
        animation.opacity(1).step();  
        that.animationData = animation.export();  
    }, totalDuration);  
},

操作步骤：

<view class="blink flex1" :animation="animationData">  
    <view class="flex-column-center" v-for="(item,index) in getContent()" :key="index"  
        v-if="index == 0">  
        <view v-for="(vo,voIndex) in item" :key="voIndex">{{vo}}</view>  
    </view>  
</view>

预期结果：

渲染到微信开发工具后和内置浏览器表现一致

实际结果：

hbuilder内置浏览器中会一直闪烁，渲染到微信开发工具后只闪烁一次

bug描述：

动画代码渲染到微信开发工具中，表现和hbuilder内置浏览器不一致。


Harmonyos Next教程
1 回复

在 uni-app 中，动画渲染在微信开发工具中只执行一次的问题，通常是由于动画配置或代码逻辑不当引起的。以下是一些常见的场景和对应的代码案例，你可以根据这些案例检查和修改你的代码。

场景一：动画配置问题

确保动画配置正确，并且在动画结束后有正确的重置或重复触发逻辑。

// 在页面的 data 中定义动画数据
data() {
  return {
    animationData: {}
  };
},

// 在 onLoad 或其他生命周期方法中初始化动画
onLoad() {
  this.animation = uni.createAnimation({
    duration: 1000,
    timingFunction: 'ease'
  });
},

// 触发动画的方法
triggerAnimation() {
  this.animationData = this.animation.translateX(300).step();
  this.$forceUpdate(); // 强制重新渲染
},

// 在页面的 onReady 方法中绑定事件监听器（如按钮点击）
onReady() {
  const query = uni.createSelectorQuery().in(this);
  query.select('#myButton').boundingClientRect(data => {
    // 监听器逻辑，例如重置动画状态
    this.button = data;
    this.triggerAnimation();
  }).exec();

  // 如果需要重复触发，可以在动画结束时重置状态
  setTimeout(() => {
    this.triggerAnimation(); // 这里只是示例，通常你会根据实际需求触发
  }, 1500); // 延迟时间应大于动画持续时间
}

场景二：微信开发工具缓存问题

有时微信开发工具可能存在缓存问题，导致动画无法重复执行。尝试以下步骤：

  1. 清除微信开发工具缓存（在“设置” -> “清除缓存” -> “清除所有缓存”）。
  2. 重启微信开发工具。
  3. 重新编译并运行项目。

场景三：事件绑定问题

确保事件绑定正确，且事件处理函数能够正确调用动画触发方法。

<!-- 在模板中绑定事件 -->
<button id="myButton" @click="triggerAnimation">点击我</button>

场景四：使用 requestAnimationFrame 替代 setTimeout

在某些复杂动画场景中，使用 requestAnimationFrame 替代 setTimeout 可以获得更平滑的动画效果。

function animate() {
  // 动画逻辑
  this.triggerAnimation();
  requestAnimationFrame(this.animate.bind(this)); // 递归调用
}

// 在 onReady 或其他合适的地方启动动画
this.animate();

通过上述方法，你应该能够解决 uni-app 在微信开发工具中动画只执行一次的问题。如果问题依旧存在，建议检查动画触发条件和逻辑，确保每次触发时动画状态能够正确重置或更新。

回到顶部