我不会AE,但是我会Code

阿珏

《别当欧尼酱了！》绪山真寻 CSS Animation




精美动画展示
我的私房照
好听的音乐
日常生活的小片段


项目地址:https://github.com/iAJue/Mahiro

[JavaScript] 纯文本查看 复制代码

/**
 * 动画序列管理器
 * 用于管理多个动画组件的顺序执行
 */
export class AnimationManager {
  constructor(options = {}) {
    this.sequence = options.sequence || []
    this.currentIndex = -1
    this.isPlaying = false
    this.isPaused = false
    this.callbacks = {
      onStart: options.onStart || (() => {}),
      onComplete: options.onComplete || (() => {}),
      onAnimationStart: options.onAnimationStart || (() => {}),
      onAnimationComplete: options.onAnimationComplete || (() => {}),
      onPause: options.onPause || (() => {}),
      onResume: options.onResume || (() => {})
    }
    this.autoStart = options.autoStart || false
  }


  /**
   * 设置动画序列
   */
  setSequence(sequence) {
    this.sequence = sequence
    return this
  }


  /**
   * 添加动画到序列
   */
  addAnimation(animationName) {
    this.sequence.push(animationName)
    return this
  }


  /**
   * 开始动画序列
   */
  start() {
    if (this.isPlaying && !this.isPaused) return this
    
    console.log('动画序列开始')
    this.isPlaying = true
    this.isPaused = false
    this.currentIndex = -1
    this.callbacks.onStart()
    this.next()
    return this
  }


  /**
   * 播放下一个动画
   */
  next() {
    if (this.isPaused) return this


    if (this.currentIndex < this.sequence.length - 1) {
      this.currentIndex++
      const animationName = this.sequence[this.currentIndex]
      console.log(`准备播放动画: ${animationName}`)
      if (!this.isPaused) {
        this.callbacks.onAnimationStart(animationName, this.currentIndex)
      }
    } else {
      this.complete()
    }
    return this
  }


  /**
   * 动画完成回调
   */
  onAnimationComplete(animationName) {
    if (!this.isPlaying) return
    
    console.log(`动画 ${animationName} 完成`)
    this.callbacks.onAnimationComplete(animationName, this.currentIndex)
    
    // 继续下一个动画
    this.next()
  }


  /**
   * 完成所有动画
   */
  complete() {
    console.log('所有动画播放完成')
    this.isPlaying = false
    this.isPaused = false
    this.callbacks.onComplete()
  }


  /**
   * 暂停动画序列
   */
  pause() {
    if (!this.isPlaying || this.isPaused) return this
    
    console.log('动画序列暂停')
    this.isPaused = true
    this.callbacks.onPause()
    return this
  }


  /**
   * 恢复动画序列
   */
  resume() {
    if (!this.isPlaying || !this.isPaused) return this
    
    console.log('动画序列恢复')
    this.isPaused = false
    this.callbacks.onResume()
    return this
  }


  /**
   * 停止动画序列
   */
  stop() {
    console.log('动画序列停止')
    this.isPlaying = false
    this.isPaused = false
    this.currentIndex = -1
    return this
  }


  /**
   * 重置动画序列
   */
  reset() {
    this.stop()
    console.log('动画序列重置')
    return this
  }


  /**
   * 跳转到指定动画
   */
  jumpTo(animationName) {
    const index = this.sequence.indexOf(animationName)
    if (index !== -1) {
      this.currentIndex = index - 1
      this.next()
    }
    return this
  }


  /**
   * 获取当前动画名称
   */
  getCurrentAnimation() {
    return this.currentIndex >= 0 ? this.sequence[this.currentIndex] : null
  }


  /**
   * 获取当前进度
   */
  getProgress() {
    return {
      current: this.currentIndex + 1,
      total: this.sequence.length,
      percentage: this.sequence.length > 0 ? ((this.currentIndex + 1) / this.sequence.length) * 100 : 0
    }
  }


  /**
   * 是否正在播放
   */
  isRunning() {
    return this.isPlaying && !this.isPaused
  }
}


/**
 * 创建动画管理器实例的工厂函数
 */
export function createAnimationManager(options) {
  return new AnimationManager(options)
}

截图

阿珏