动画控制器继承的核心思路是通过构造函数+原型链或ES6 class实现方法复用与状态共享，优先推荐组合模式（如Timeline类解耦时序与渲染），并注意初始化顺序、super调用、this绑定及资源清理等细节。
动画控制器继承的核心思路
JavaScript 中没有原生的“类继承”语法（ES6 之前），但动画控制器这类功能模块，本质是对象行为的复用与扩展。实现继承的关键不是复制动画逻辑，而是让子控制器能调用父控制器的方法、共享状态管理机制，并可安全覆盖或增强播放、暂停、重置等行为。
用构造函数 + 原型链实现基础继承
这是最贴近传统面向对象继承的方式，适合需要实例隔离（如多个不同动画实例并行运行）的场景：
- 定义父类 AnimationController：封装通用能力，如
play()、pause()、currentTime、duration、onUpdate回调管理 - 子类（如 ScrollDrivenController 或 KeyframeSequenceController）在构造函数中调用
AnimationController.call(this, options)，确保初始化父类状态 - 通过
Child.prototype = Object.create(AnimationController.prototype)建立原型链，再补上constructor指向子类 - 子类可重写方法（如
play()），内部用AnimationController.prototype.play.call(this)调用父逻辑，再追加自定义行为（如绑定滚动事件）
ES6 class 语法更简洁清晰
现代项目推荐使用 class 和 extends，语义明确、可读性强：
- 父类声明为
class AnimationController { constructor(opts) { ... } play() { ... } } - 子类写成
class ParallaxController extends AnimationController { constructor(opts) { super(opts); this.parallaxFactor = opts.factor; } play() { super.play(); this.bindScrollEffect(); } } -
super()确保父构造器执行；super.play()复用并扩展现有逻辑，避免重复实现时间轴控制、事件派发等底层细节
组合优于继承：灵活适配复杂动画需求
当控制器职责交叉（比如既要驱动 CSS 动画，又要同步 Canvas 渲染），硬继承容易导致类膨胀。此时更推荐“组合”模式：
立即学习“Java免费学习笔记（深入）”；
- 把核心时序控制（如基于
requestAnimationFrame的 tick 管理、插值计算、生命周期状态）抽成独立的 Timeline 类 - 各类控制器（
CSSController、SVGController、WebGLController）内部持有一个this.timeline = new Timeline(opts) - 控制器只负责“如何渲染”，Timeline 负责“何时渲染、渲染到哪”，解耦清晰，复用率高，也便于单元测试
注意继承中的关键细节
无论用哪种方式，以下几点直接影响动画稳定性：
-
状态初始化顺序：子类构造器中必须先调用
super()（或Parent.call(this)），再设置子类专属属性，否则父类可能依赖未定义字段 -
方法重写安全：覆盖
play()时，若需保留父类自动恢复播放、更新状态机等逻辑，务必显式调用super.play() -
this 上下文一致性：避免直接传
this.update给requestAnimationFrame导致this丢失，建议用箭头函数或bind(this) -
资源清理：子类的
destroy()方法应先调用super.destroy()，再清理自身绑定的事件、定时器或 WebGL 资源
