组件

播放控制器

播放、暂停和重播原生动画。

暂停的时间轴

↗

The player reads the actual animation state.

在参考示例中

运行动画

原生复选框和编写的选择器控制子元素的 CSS 播放状态。暂停会保留当前播放位置。启用减少动态效果时保持暂停；打印时则移除动画。

使用于主题指南.

用法与接口

DemoMotion 包裹带有动画的子元素，并添加 div.ui-player，提供播放／暂停、重播和当前状态。动画最初处于暂停状态（启用交互前也由 data-playback="paused" 保持暂停），减少动态效果的偏好变更时，会再次暂停。

<DemoMotion>  <DemoItem tone="blue" className="(animation-name:rotate) (animation-duration:2s) (animation-iteration-count:infinite)">↗</DemoItem></DemoMotion>

<div class="ui-player" role="group" aria-label="Animation controls" data-state="paused">  <button type="button" class="ui-button" data-size="sm">Play</button>  <button type="button" class="ui-button" data-size="sm" data-variant="quiet">Replay</button>  <span class="ui-player-time"><output>Paused</output></span></div>

iframe 文档改用 DemoViewport motion；视口自身的播放和重播控件会驱动文档时间轴。