SparkAR使用Javascript实现平面scale属性平滑过渡的问题求助

原有代码直接对scale属性赋值静态值，属性会瞬间更新到目标值，因此会出现跳变，可通过SparkAR内置的Animation模块实现属性的平滑缓动过渡，修改后的实现代码如下：

// 引入必要模块
const Scene = require('Scene');
const Random = require('Random');
const Time = require('Time');
const Diagnostics = require('Diagnostics');
const Reactive = require('Reactive');
const Animation = require('Animation');

(async function () {
  const [plane] = await Promise.all([Scene.root.findFirst('plane0')]);

  const intervalTime = 1000; // 两次缩放的触发间隔（毫秒）
  const transitionDuration = 800; // 单次缩放过渡的时长（毫秒）
  const planeTransform = plane.transform;
  const initialScaleX = planeTransform.scaleX.pinLastValue();
  let numTransform = 0;

  function randomScale() {
    let targetScale;
    if (numTransform < 5) {
      targetScale = Random.random() * 2;
      Diagnostics.log('触发随机缩放');
    } else {
      numTransform = 0;
      targetScale = initialScaleX;
      Diagnostics.log('触发缩放重置');
    }

    // 获取当前scaleX的实时值作为动画起点
    const currentScale = planeTransform.scaleX.pinLastValue();
    // 创建动态采样器，从当前值过渡到目标值，可替换缓动函数调整动效
    const dynamicSampler = Animation.samplers.easeInOutSine(currentScale, targetScale);
    // 创建动画驱动
    const driver = Animation.timeDriver({durationMilliseconds: transitionDuration});
    // 绑定动画到scaleX属性
    planeTransform.scaleX = Animation.animate(driver, dynamicSampler);
    // 启动动画
    driver.start();

    numTransform++;
  }

  // 定时触发缩放逻辑
  const intervalTimer = Time.setInterval(randomScale, intervalTime);
})();

调整说明 #

• 可自行修改transitionDuration参数调整过渡速度，注意该值不要超过intervalTime，避免动画未完成就触发下一次缩放
• 缓动函数可按需替换，SparkAR内置支持easeInQuad、easeOutBounce、linear等多种缓动效果，适配不同动效需求
• 若需要同时平滑修改scaleY、scaleZ，按相同逻辑绑定对应属性即可

内容的提问来源于stack exchange，提问作者Diego Oriani