// 创建关键帧数组
const keyframes = [
  { opacity: 0, transform: 'translateY(-100px)' },
  { opacity: 1, transform: 'translateY(0)' }
];

// 配置时间选项
const options = {
  duration: 1000,        // 动画持续1秒
  easing: 'ease-out',    // 缓动函数
  iterations: Infinity,  // 无限循环
  direction: 'alternate' // 往返运动
};

// 创建并运行动画
const animation = element.animate(keyframes, options);

// 控制播放状态
animation.pause();     // 暂停
animation.play();      // 播放
animation.reverse();   // 反转播放方向
animation.cancel();    // 取消动画，移除所有效果
animation.finish();    // 立即完成动画

// 调整播放参数
animation.playbackRate = 2;    // 2倍速播放
animation.playbackRate = -1;   // 反向播放

// 使用Promise（推荐）
animation.finished.then(() => {
  console.log('动画完成！');
}).catch(() => {
  console.log('动画被取消！');
});

// 使用事件监听器
animation.addEventListener('finish', () => {
  console.log('动画完成事件触发');
});

animation.addEventListener('cancel', () => {
  console.log('动画取消事件触发');
});

// 获取和设置当前时间（毫秒）
const currentTime = animation.currentTime;
animation.currentTime = 500; // 跳转到500ms处

// 时间缩放（慢动作/快动作效果）
animation.playbackRate = 0.5; // 半速播放

// 组合动画：一个动画结束后开始另一个
animation.finished.then(() => {
  nextAnimation.play();
});

// 创建基于滚动的时间轴
const scrollTimeline = new ScrollTimeline({
  source: document.documentElement, // 滚动容器
  orientation: 'block',             // 滚动方向
  scrollOffsets: [                  // 滚动偏移量
    { target: element, edge: 'end', threshold: 0.5 },
    { target: element, edge: 'start', threshold: 0.5 }
  ]
});

// 将动画绑定到滚动时间轴
element.animate(keyframes, {
  timeline: scrollTimeline,
  duration: 1000 // 这里的duration对应完整的滚动距离
});

// 创建连续的动画序列
async function runAnimationSequence() {
  const fadeIn = element.animate(fadeKeyframes, fadeOptions);
  await fadeIn.finished;
  
  const move = element.animate(moveKeyframes, moveOptions);
  await move.finished;
  
  const scale = element.animate(scaleKeyframes, scaleOptions);
  return scale.finished;
}

// 根据用户输入动态调整动画
slider.addEventListener('input', (e) => {
  // 将滑块值映射到动画时间点
  const progress = e.target.value / 100;
  animation.currentTime = animation.effect.getTiming().duration * progress;
});

// 使用WAAPI实现高效粒子动画
function createParticleAnimation(particle) {
  // 使用合成线程运行动画，不阻塞主线程
  return particle.animate([
    { transform: 'scale(0)', opacity: 1 },
    { transform: 'scale(1)', opacity: 0 }
  ], {
    duration: 1000 + Math.random() * 500,
    easing: 'cubic-bezier(0.2, 0.8, 0.4, 1)'
  });
}

// 特征检测与降级
function createAnimation(element, keyframes, options) {
  if ('animate' in element) {
    return element.animate(keyframes, options);
  } else {
    // 降级到CSS动画或传统JavaScript动画
    return fallbackAnimation(element, keyframes, options);
  }
}