Skip to main content

从 Figma 导入

打开 Figma 设计

我们将使用 Streamline 的矢量插图 的一个副本。

缩略图

在 Figma 中对矢量元素进行分组

如果尚未完成,请将要导出的项目分组或在 Figma 中对其进行框架化。

figma-grouping

组将在 SVG 中表示为 <g> 元素,如果您想要一起动画多个项目,则将它们分组可能会很有用。

导出为 SVG

您可以通过将其复制为 SVG 标记来导出任何设计 — 您可以通过右键单击设计本身并选择 复制/粘贴为 选项来执行此操作。

导出为 SVG

接下来,您需要将 SVG 转换为 React 组件。通常,您只需将 SVG 粘贴到 React 标记中,它就会起作用。

或者,使用 SVGR playground 可以可靠地将 SVG 转换为 React 组件。

在 Remotion 中导入 SVG

将组件粘贴到 Remotion 项目中并注册一个 <Composition>
可以在此存储库中找到示例。

动画 SVG 标记

找到要动画的元素并向其添加样式属性。 在这种情况下,让我们动画包含火箭的 <g> 元素。

tsx
import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
 
export const Rocket: React.FC = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
 
return (
<AbsoluteFill
style={{
backgroundColor: "pink",
justifyContent: "center",
alignItems: "center",
}}
>
<svg
width="800"
height="800"
viewBox="0 0 394 394"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g
id="vehicle"
style={{
transformOrigin: "center center",
transformBox: "fill-box",
}}
>
// vehicle's paths
</g>
</svg>
</AbsoluteFill>
);
};
tsx
import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion";
 
export const Rocket: React.FC = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
 
return (
<AbsoluteFill
style={{
backgroundColor: "pink",
justifyContent: "center",
alignItems: "center",
}}
>
<svg
width="800"
height="800"
viewBox="0 0 394 394"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g
id="vehicle"
style={{
transformOrigin: "center center",
transformBox: "fill-box",
}}
>
// vehicle's paths
</g>
</svg>
</AbsoluteFill>
);
};

添加 {transformOrigin: "center center", transformBox: "fill-box"} 将确保变换的中心是它自己的中心。

让我们创建两个弹簧动画,一个用于缩放,一个用于变换:

tsx
const up = spring({
fps,
frame: frame - 20,
config: {
damping: 20,
mass: 15,
},
});
 
const scale = spring({
fps,
frame,
config: {
stiffness: 200,
},
});
 
const launch = `translateY(${interpolate(up, [0, 1], [0, -3000])}px)`;
tsx
const up = spring({
fps,
frame: frame - 20,
config: {
damping: 20,
mass: 15,
},
});
 
const scale = spring({
fps,
frame,
config: {
stiffness: 200,
},
});
 
const launch = `translateY(${interpolate(up, [0, 1], [0, -3000])}px)`;

scale 将从 0 到 1,launch0 动画到 -3000px。将这些样式应用于元素:

tsx
<g
id="vehicle"
style={{
transform: `scale(${scale}) ${launch}`,
transformOrigin: "center center",
transformBox: "fill-box",
}}
>
{/* ... */}
</g>
tsx
<g
id="vehicle"
style={{
transform: `scale(${scale}) ${launch}`,
transformOrigin: "center center",
transformBox: "fill-box",
}}
>
{/* ... */}
</g>

火箭 svg

您已经制作了一个动画火箭! 🚀

另请参阅