uni-app animation在不同安卓环境中，scale放大缩小速度不一样

uni-app animation在不同安卓环境中，scale放大缩小速度不一样

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

操作步骤：

const animation = uni.requireNativePlugin('animation');
animation.transition(this.$refs.kaka55[this.old.index], {
styles: {
transform: 'scale(1)',
transformOrigin: 'center center'
},
duration: 300, //ms
timingFunction: 'ease'
}, () => {});

预期结果：

  • 缩小放大效果一致

实际结果：

  • 雷电3.0环境和夜神模拟器环境放大缩小效果不一样

bug描述：

const animation = uni.requireNativePlugin('animation');
animation.transition(this.$refs.test, {
styles: {
transform: 'scale(1)',
transformOrigin: 'center center'
},
duration: 300, //ms
timingFunction: 'ease'
}, () => {});

上述代码在有些安卓环境中的放大缩小的效果不一样，雷电3.0模拟器的安卓环境就很慢，夜神模拟器的就很正常

更多关于uni-app animation在不同安卓环境中，scale放大缩小速度不一样的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

来人啊

更多关于uni-app animation在不同安卓环境中，scale放大缩小速度不一样的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 Uni-app 中，使用 animation 实现 scale 放大缩小效果时，可能会遇到在不同安卓设备上动画速度不一致的问题。这通常是由于不同设备的硬件性能、系统版本、浏览器渲染引擎差异等原因导致的。以下是一些可能的原因和解决方法：

可能原因

  1. 设备性能差异
    低端设备的 CPU 和 GPU 性能较弱，可能导致动画渲染速度变慢。

  2. 系统版本差异
    不同安卓系统版本对 CSS 动画的支持和优化程度不同，可能导致动画速度不一致。

  3. 浏览器渲染引擎差异
    Uni-app 在安卓端通常使用 WebView 渲染，不同设备的 WebView 版本和实现可能不同，导致动画表现不一致。

  4. 动画帧率不一致
    不同设备的屏幕刷新率（如 60Hz、90Hz、120Hz）可能导致动画速度差异。

解决方法

  1. 统一动画时间
    确保在 animation 中明确指定动画的持续时间（duration），例如：

    .scale-animation {
  animation: scale 1s infinite;
}
[@keyframes](/user/keyframes) scale {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

    这样可以确保动画在不同设备上的持续时间一致。

  2. 使用 requestAnimationFrame
    如果需要更精确的控制动画，可以使用 JavaScript 的 requestAnimationFrame 手动控制动画帧率：

    let scale = 1;
function animate() {
  scale = 1 + Math.sin(Date.now() / 500) * 0.2; // 控制缩放范围
  element.style.transform = `scale(${scale})`;
  requestAnimationFrame(animate);
}
animate();

  3. 适配高刷新率屏幕
    对于高刷新率屏幕（如 90Hz、120Hz），可以通过检测设备的刷新率来调整动画速度：

    const frameRate = window.screen.refreshRate || 60; // 获取设备刷新率
const duration = 1000 / frameRate; // 根据刷新率调整动画时间

  4. 使用硬件加速
    确保动画使用 GPU 加速，可以通过 transform 和 opacity 属性实现：

    .scale-animation {
  transform: translateZ(0); /* 触发硬件加速 */
  animation: scale 1s infinite;
}
回到顶部