JavaScript animate()关键帧composite不叠加问题及React实现咨询

原生JavaScript解决方案 #

你遇到的位移重置问题，核心原因是每次调用animate()时，transform: translate(100px,20px)是基于元素的初始状态计算，而非当前动画后的状态。要实现位移累加，需要手动跟踪当前的偏移量，每次点击时更新这个值并生成新的关键帧；颜色混合则可以通过composite: "accumulate"直接实现，该属性会将新的颜色值与当前颜色叠加（比如红+绿会得到黄色）。

修正后的代码 #

// 初始化变量跟踪当前位移
let currentX = 0;
let currentY = 0;

space.addEventListener("click", ()=>{
  // 更新累积位移
  currentX += 100;
  currentY += 20;

  const keyframes = [        
    {
      transform: `translate(${currentX}px, ${currentY}px)`,
      backgroundColor: "red",
    }
  ];

  const keyframes1 = [
    {backgroundColor: "green"}
  ];

  const timing1 = {
    duration: 1000,
    iterations: 1,
    fill: "forwards",
    composite: "accumulate",
  };

  mov.animate(keyframes, timing1);
  cube.animate(keyframes1, timing1);
});

原理说明 #

• 用currentX和currentY记录元素当前的偏移量，每次点击时累加目标位移值，确保动画目标是累积后的位置。
• composite: "accumulate"会让颜色属性的值叠加（RGB通道分别相加，超过255则取255），实现颜色混合效果。
• fill: "forwards"保证动画结束后元素保持最终状态。

React 实现方案 #

在React中，我们可以用useState跟踪位移的累积值，用useRef获取DOM元素，再调用原生animate()方法实现相同效果，逻辑和原生JS一致。

组件示例 #

import { useState, useRef } from 'react';

export default function AnimatedElements() {
  // 用状态跟踪累积位移
  const [currentX, setCurrentX] = useState(0);
  const [currentY, setCurrentY] = useState(0);
  // 获取DOM元素引用
  const movRef = useRef(null);
  const cubeRef = useRef(null);

  const handleClick = () => {
    const newX = currentX + 100;
    const newY = currentY + 20;
    setCurrentX(newX);
    setCurrentY(newY);

    const moveKeyframes = [
      {
        transform: `translate(${newX}px, ${newY}px)`,
        backgroundColor: "red"
      }
    ];

    const colorKeyframes = [
      { backgroundColor: "green" }
    ];

    const timing = {
      duration: 1000,
      iterations: 1,
      fill: "forwards",
      composite: "accumulate"
    };

    // 执行动画
    movRef.current?.animate(moveKeyframes, timing);
    cubeRef.current?.animate(colorKeyframes, timing);
  };

  return (
    <div onClick={handleClick} style={{ padding: '2rem', background: '#f0f0f0' }}>
      <div 
        ref={movRef} 
        style={{ width: '50px', height: '50px', background: '#ccc', marginBottom: '1rem' }}
      />
      <div 
        ref={cubeRef} 
        style={{ width: '50px', height: '50px', background: '#ccc' }}
      />
    </div>
  );
}

补充说明 #

• 用useState管理位移状态，确保组件重新渲染时能获取最新的累积值。
• useRef用于获取真实DOM节点，以便调用原生animate()方法。
• 可选优化：如果需要避免重复创建关键帧对象，可以把关键帧和时序配置抽离到组件外部，提升性能。

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