Skip to main content

转换

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

已经熟悉如何在 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

接受小于 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)"
A

与使用 heightwidth 改变元素大小的区别在于,使用 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)"

翻译

翻译元素意味着移动它。翻译可以在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)"

与使用margin-topmargin-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)"
A

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

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

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

多重变换

通常,您希望组合多个变换。如果它们使用不同的CSS属性,如transformopacity,只需在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)"

更多对象转换方式

这只是一些基本转换。以下是一些可能的更多转换方式:

  • <div> 的高度和宽度
  • 使用 border-radius 设置元素的圆角
  • 使用 box-shadow 设置元素的阴影
  • 使用 colorinterpolateColors() 改变某物的颜色
  • 使用 evolvePath() 改变 SVG 路径的演变
  • 动态字体的粗细和倾斜
  • linear-gradient 的停止点
  • CSS filter() 的值