元件

播放控制器

播放、暫停與重播原生動畫。

暫停的時間軸

↗

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；視窗本身的播放與重播控制項會驅動文件時間軸。