面试题：React组件中如何使用GSAP实现复杂动画序列

Question

使用GSAP库在React组件中创建一个复杂动画序列，包括元素的缩放、旋转和位移，并且要求动画在组件挂载时开始，循环播放三次，每次播放结束有短暂停顿。请编写完整的React组件代码来实现此功能。

Answer 1

import React, { useEffect } from 'react';
import gsap from 'gsap';

const ComplexAnimationComponent = () => {
  useEffect(() => {
    const target = document.getElementById('animation-target');
    if (target) {
      const tl = gsap.timeline({
        repeat: 2,
        yoyo: true,
        onRepeat: () => {
          gsap.delayedCall(1, () => {
            // 每次播放结束停顿1秒
          });
        }
      });

      tl.to(target, {
        scale: 1.5,
        rotation: 360,
        x: 200,
        duration: 2,
        ease: 'power2.out'
      })
      .to(target, {
        scale: 1,
        rotation: 0,
        x: 0,
        duration: 2,
        ease: 'power2.in'
      });

      return () => {
        tl.kill();
      };
    }
  }, []);

  return <div id="animation-target" style={{ width: '100px', height: '100px', backgroundColor: 'blue' }}></div>;
};

export default ComplexAnimationComponent;