Skip to main content

<AnimatedImage>v4.0.246

呈现动画 GIF、PNG、AVIF 或 WebP 图片，并将其与 Remotion 的时间轴同步。 依赖 ImageDecoder Web API，这意味着截至目前，它仅在 Google Chrome 和 Firefox 中可用。

🌐 Renders an animated GIF, PNG, AVIF or WebP image and syncs it with Remotion's timeline.
Relies on the ImageDecoder Web API, meaning it only works in Google Chrome and Firefox as of writing.

Loading a remote animated image
import {AnimatedImage} from 'remotion';

export const WebpAnimatedImage = () => {
  return <AnimatedImage src="https://mathiasbynens.be/demo/animated-webp-supported.webp" />;
};
Loading a local animated image
import {AnimatedImage, staticFile} from 'remotion';

export const GifAnimatedImage = () => {
  return <AnimatedImage src={staticFile('giphy.gif')} />;
};

属性​

🌐 Props

src​

动画图片的 URL。可以是远程 URL 或本地文件路径。

🌐 The URL of the animated image. Can be a remote URL or a local file path.

note

远程图片需要支持 CORS。

更多信息

width?​

显示宽度。

🌐 The display width.

height?​

显示高度。

🌐 The display height.

fit?​

必须是以下这些值之一：

🌐 Must be one of these values:

  • 'fill'：图片将完全填充容器，如果有必要会被拉伸。（默认）
  • 'contain'：图片被缩放以适应框，同时保持宽高比。
  • 'cover'：图片完全填充容器并保持其纵横比。如有必要，将被裁剪。

style?​

允许传入自定义 CSS 样式。你不能传入 width 和 height，而应该使用属性 width 和 height 来设置图片的大小。

🌐 Allows to pass in custom CSS styles. You may not pass width and height, instead use the props width and height to set the size of the image.

loopBehavior?​

动画图片的循环行为。可以是以下这些值之一：

🌐 The looping behavior of the animated image. Can be one of these values:

  • 'loop'：动画图片将无限循环。(默认)
  • 'pause-after-finish'：动画图片将播放一次，然后显示最后一帧。
  • 'clear-after-finish'：动画图片将播放一次，然后清除画布。

playbackRate?​

动画图片的播放速度。默认值为 1。例如，2 将以两倍速度播放动画，0.5 将以半速播放。

🌐 The playback rate of the animated image. Defaults to 1. For example, 2 will play the animation twice as fast, 0.5 will play it at half speed.

ref?v3.3.88​

你可以向 <AnimatedImage /> 添加一个 React ref。如果你使用 TypeScript，你需要用 HTMLCanvasElement 来定义类型。

🌐 You can add a React ref to <AnimatedImage />. If you use TypeScript, you need to type it with HTMLCanvasElement.

与 <Gif> 的差异​

🌐 Differences to <Gif>

  • <AnimatedImage> 还支持 AVIF、APNG 和 WebP 图片。
  • <AnimatedImage> 使用 ImageDecoder Web API，该 API 的浏览器支持有限。
  • <AnimatedImage> 不支持 onLoad 属性。

兼容性​

🌐 Compatibility

BrowsersEnvironments
Chrome
Firefox
Safari

另请参阅​

🌐 See also

Last updated on