angular-animations回调事件进阶用start/done轻松实现无限循环与动画链式衔接【免费下载链接】angular-animations:sparkles: Easy, Reusable Animation Utility library for Angular项目地址: https://gitcode.com/gh_mirrors/an/angular-animationsangular-animations 是面向 Angular 15 的轻量动画工具库内置了上百个开箱即用的动画。它的进阶玩法在于start / done 回调事件只要两个钩子你就能轻松实现无限循环动画、动画链式衔接、定时回放等高阶效果完全不需要手写 keyframes。一、start 与 done动画生命周期里的两个钩子每个 angular-animations 触发动画都会经历两个回调时机回调触发时机典型用途start动画开始瞬间打日志、加 loading、高亮提示done动画结束瞬间循环播放、衔接下一段动画在模板中用(锚点名.start)和(锚点名.done)就能绑定回调写法非常直观div [fadeIn]animationState (fadeIn.start)animStart($event) (fadeIn.done)animDone($event)/div回调会接收一个AnimationEvent对象包含fromState、toState、phaseNamestart 或 done、totalTime四个属性方便你精确判断动画走到了哪一步。 提示回调名中的锚点名就是你绑定动画时用的[锚点名]两者必须一致。二、无限循环动画done 回调自动重播这是 done 回调最经典的用法——动画播完立刻把状态再翻回去动画就自动重来一遍。以 attention-seekers 里的 bounce弹跳为例模板只需三行div [bounce]animState (bounce.done)animDone()/div组件里只需要维护一个布尔状态animState false; animDone() { this.animState !this.animState; }原理很简单bounce 默认监听0 1的双向状态切换可在 bounce.animation.ts 中看到direction参数默认为状态一变就播一次动画播完done回调再把状态翻回去于是形成无限循环。这个技巧同样适用于心跳、闪光、摇晃等所有 attention seeker 动画比如让 Logo 一直跳动吸引注意力。官方演示中就有现成示例demo-main.component.html 中的按钮用(hueButton.done)让按钮持续变换色相正是同一套思路。进阶循环 N 次后自动停止如果不想永远循环加一个计数器即可count 3; animDone() { if (this.count 0) { this.count--; this.animState !this.animState; } }也可以改成循环到用户点击按钮才停止只需在animDone里多加一个判断条件非常适合提示用户操作、引导视线等场景。三、动画链式衔接一个播完再播下一个很多界面需要先弹入再缩放最后闪烁这种连续动效。靠 done 回调串联就能让多个动画严格按顺序衔接而不是同时播放div [bounceIn]state1 (bounceIn.done)onBounceInDone() [zoomIn]state2 [flash]state3/divonBounceInDone() { // 第一段结束立即启动第二段 this.state2 true; }关键点两个动画使用不同的锚点bounceIn与zoomIn由第一个动画的done事件去触发第二个动画的状态从而实现前一段完成后后一段才开始。链式能力不止状态动画——OnEnter/OnLeave 类型同样可以串联。例如元素进入时先fadeInUpOnEnter淡入完成后再触发bounceOnEnter补一个弹跳出场时再用fadeOutOnLeave收场整条进出链路全部由回调驱动逻辑清晰且易于维护。链式 循环 更复杂的编排两种能力可以组合先链式播完 A→B→C再在 C 的done里把整个链条的状态重置实现整套动效无限循环。配合delay参数见 interfaces.ts 中IAnimationOptions的delay字段还能在衔接之间加入停顿节奏更自然。四、start 回调的实用场景start常被忽略但配合done能算出动效时长、做进度提示记录开始时间done时计算耗时用于调试动画节奏在start时给元素加动画中样式禁用点击、显示骨架屏done时移除结合totalTime属性做进度条同步。五、常见参数速查所有 angular-animations 动画都支持统一参数回调与参数可自由搭配参数说明默认值duration动画时长ms1000delay延迟启动ms0anchor自定义锚点名各动画默认名directionattention seeker 触发方向/循环和链式场景中duration直接决定循环周期delay则能在链式衔接的环节之间制造呼吸感。六、小结无限循环done回调里翻转触发状态一行代码即可实现链式衔接用第一个动画的done触发第二个动画的状态锚点独立互不干扰start 钩子适合日志、状态提示、耗时统计等辅助逻辑 配合duration、delay参数微调节奏即可编排出复杂的动效序列。相关文档与源码索引回调完整说明README.md循环/链式演示代码demo-main.component.ts动画触发器实现lib/attention-seekers/参数接口定义lib/common/interfaces.ts掌握了 start / done 这两个回调angular-animations 就从好用进化到了好玩你的界面动效编排基本不再受限于单段动画。【免费下载链接】angular-animations:sparkles: Easy, Reusable Animation Utility library for Angular项目地址: https://gitcode.com/gh_mirrors/an/angular-animations创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考