转换

动画发生在元素的视觉属性随时间变换时。
让我们看看五种常见的元素转换方式。

已经熟悉如何在 React 中应用 CSS 转换了吗？跳过此页面。

5种基本转换

从左到右：不透明度、缩放、倾斜、平移、旋转

不透明度

不透明度确定元素的可见性。0 表示完全不可见，1 表示完全可见。介于两者之间的值将使元素半透明，底部元素将可见。

您可以使用 opacity 属性设置元素的不透明度。

MyComponent.tsx
tsx
<div
  style={{
    height: 100,
    width: 100,
    backgroundColor: "red",
    opacity: 0.5,
  }}
/>

MyComponent.tsx
tsx
<div
  style={{
    height: 100,
    width: 100,
    backgroundColor: "red",
    opacity: 0.5,
  }}
/>

"opacity": 1

opacity

1

接受小于 0 和大于 1 的值，但不会产生进一步效果。

缩放

缩放确定元素的大小。1 是自然大小，2 将使元素高度和宽度加倍。
小于 1 的值将使元素变小。0 使元素不可见。小于 0 的值被接受，将使元素再次变大，但是镜像。

您可以使用 transform 属性设置元素的缩放。

MyComponent.tsx
tsx
<div
  style={{
    height: 100,
    width: 100,
    backgroundColor: "red",
    transform: `scale(0.5)`,
  }}
/>

MyComponent.tsx
tsx
<div
  style={{
    height: 100,
    width: 100,
    backgroundColor: "red",
    transform: `scale(0.5)`,
  }}
/>

"transform": "scale(1)"

scale

1

与使用 height 和 width 改变元素大小的区别在于，使用 scale() 不会改变其他元素的布局。

倾斜

倾斜元素会导致元素外观扭曲，就好像元素的两个角已被拉伸。倾斜采用可以使用 rad（弧度）和 deg（度）指定的角度。

您可以使用transform属性设置元素的倾斜度。

查看下面的示例，了解倾斜如何影响元素。

MyComponent.tsx
tsx
<div
  style={{
    height: 100,
    width: 100,
    backgroundColor: "red",
    transform: `skew(20deg)`,
  }}
/>

MyComponent.tsx
tsx
<div
  style={{
    height: 100,
    width: 100,
    backgroundColor: "red",
    transform: `skew(20deg)`,
  }}
/>

"transform": "skew(0deg)"

skew

0

翻译

翻译元素意味着移动它。翻译可以在X、Y甚至Z轴上进行。变换可以用px来指定。

您可以使用transform属性设置元素的平移。

MyComponent.tsx
tsx
<div
  style={{
    height: 100,
    width: 100,
    backgroundColor: "red",
    transform: `translateX(100px)`,
  }}
/>

MyComponent.tsx
tsx
<div
  style={{
    height: 100,
    width: 100,
    backgroundColor: "red",
    transform: `translateX(100px)`,
  }}
/>

"transform": "translateX(0px) translateY(0px)"

translateX

0

translateY

0

与使用margin-top和margin-left改变元素位置不同，使用translate()不会改变其他元素的位置。

旋转

通过旋转元素，您可以使其看起来像是围绕其中心旋转。旋转可以用rad（弧度）或deg（度）来指定，您可以围绕Z轴（默认）旋转元素，也可以围绕X和Y轴旋转。

您可以使用transform属性设置元素的旋转。

MyComponent.tsx
tsx
<div
  style={{
    height: 100,
    width: 100,
    backgroundColor: "red",
    transform: `rotate(45deg)`, // the same as rotateZ(45deg)
  }}
/>

MyComponent.tsx
tsx
<div
  style={{
    height: 100,
    width: 100,
    backgroundColor: "red",
    transform: `rotate(45deg)`, // the same as rotateZ(45deg)
  }}
/>

"transform": "rotateZ(0deg)"

rotateZ

0

如果要围绕X或Y轴旋转元素，应该将perspective属性应用于父元素。

如果不想围绕中心旋转，可以使用transform-origin属性来更改旋转的原点。

请注意，当旋转SVG元素时，变换原点默认为左上角。您可以通过添加style={{transformBox: 'fill-box', transformOrigin: 'center center'}}来获得与其他元素相同的行为。

多重变换

通常，您希望组合多个变换。如果它们使用不同的CSS属性，如transform和opacity，只需在style对象中指定两个属性。

如果两个变换都使用transform属性，请使用空格分隔多个变换。

请注意顺序很重要。转换按照指定的顺序应用。

使用 `makeTransform()` 辅助函数

安装 @remotion/animation-utils 来获取一个类型安全的辅助函数来生成 transform 字符串。

tsx
import { makeTransform, rotate, translate } from "@remotion/animation-utils";
 
const transform = translate(50, 50);
// => "translate(50px, 50px)"
 
const multiTransform = makeTransform([rotate(45), translate(50, 50)]);
// => "rotate(45deg) translate(50px, 50px)"

tsx
import { makeTransform, rotate, translate } from "@remotion/animation-utils";
 
const transform = translate(50, 50);
// => "translate(50px, 50px)"
 
const multiTransform = makeTransform([rotate(45), translate(50, 50)]);
// => "rotate(45deg) translate(50px, 50px)"

5种基本转换​

不透明度​

缩放​

倾斜​

翻译​

旋转​

多重变换​

使用 makeTransform() 辅助函数​

更多对象转换方式​

5种基本转换

不透明度

缩放

倾斜

翻译

旋转

多重变换

使用 `makeTransform()` 辅助函数

更多对象转换方式