Skip to main content

变换

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

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

🌐 Already familiar with how to apply CSS transforms in React? Skip this page.

5个基本变换​

🌐 The 5 basic transformations

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

不透明度​

🌐 Opacity

不透明度决定了元素的可见性。0表示完全不可见，1表示完全可见。介于两者之间的数值会使元素半透明，并且下面的元素将可见。

🌐 The opacity determines how visible the element is. 0 means fully invisible, 1 means fully visible. Values inbetween will make the element semi-transparent, and elements underneath will be visible.

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

🌐 You can set the opacity of an element using the opacity property.

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

0以下和1以上的值是可以接受的，但没有进一步的效果。

🌐 Values below 0 and above 1 are accepted, but have no further effect.

刻度​

🌐 Scale

比例决定了元素的大小。1 是自然大小，2 会使元素的高度和宽度加倍。 小于 1 的数值会使元素变小。0 会使元素不可见。小于 0 的数值是被接受的，并且会再次使元素变大，但会镜像显示。

🌐 The scale determines how big an element is. 1 is the natural size, 2 will make the element twice as tall and wide.
Values below 1 will make the element smaller. 0 makes the element invisible. Values below 0 are accepted and will make the element bigger again, but mirrored.

你可以使用 scale 属性来设置元素的缩放。

🌐 You can set the scale of an element using the scale property.

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

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

🌐 The difference to changing the size of the element using height and width is that using scale() will not change the layout of the other elements.

倾斜​

🌐 Skew

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

🌐 Skewing an element will lead to a distorted appearance as if the the element has been stretched on two corners of the element. Skew takes an angle that can be specified using rad (radians) and deg (degrees).

你可以使用 transform 属性来设置元素的倾斜。

🌐 You can set the skew of an element using the transform property.

请查看下面的探索器，了解倾斜如何影响一个元素。

🌐 See the explorer below to see how skewing affects an element.

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

翻译​

🌐 Translate

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

🌐 Translating an element means moving it. A translation can be done on the X, Y or even Z axis. The transformation can be specified in px.

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

🌐 You can set the translation of an element using the transform property.

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

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

🌐 As opposed to changing the position of an element using margin-top and margin-left, using translate() will not change the position of the other elements.

旋转​

🌐 Rotate

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

🌐 By rotating an element, you can make it appear as if it has been turned around its center. The rotation can be specified in rad (radians) or deg (degrees) and you can rotate an element around the Z axis (the default) but also around the X and Y axis.

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

🌐 You can set the translation of an element using the transform property.

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

如果你想围绕 X 或 Y 轴旋转一个元素，你应该将 perspective 属性应用到父元素上。

🌐 If you want to rotate an element around the X or Y axis, you should apply the perspective property to the parent element.

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

🌐 If you don't want to rotate around the center, you can use the transform-origin property to change the origin of the rotation.

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

🌐 Note that when rotating SVG elements, the transform origin is the top left corner by default. You can get the same behavior as for the other elements by adding style={{transformBox: 'fill-box', transformOrigin: 'center center'}}.

多重转变​

🌐 Multiple transformations

很多时候，你会想要组合多个变换。如果它们使用不同的 CSS 属性，比如 transform 和 opacity，只需在 style 对象中同时指定这两个属性即可。

🌐 Oftentimes, you want to combine multiple transformations. If they use different CSS properties like transform and opacity, simply specify both properties in the style object.

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

🌐 If both transformations use the transform property, specify multiple transformations separated by a space.

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

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

🌐 Note that the order matters. The transformations are applied in the order they are specified.

使用 makeTransform() 辅助工具​

🌐 Using the makeTransform() helper

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

🌐 Install @remotion/animation-utils to get a type-safe helper function to generate transform strings.

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)"

更多转换对象的方法​

🌐 More ways to transform objects

这些只是一些基本的变换。这里还有一些可能的变换：

🌐 These are just some of the basic transformations. Here are some more transformations that are possible:

  • <div> 的高度和宽度
  • 使用 border-radius 的元素的圆角
  • 使用 box-shadow 的元素的阴影
  • 使用 color 和 interpolateColors() 的某物颜色
  • 使用 evolvePath() 的 SVG 路径演变
  • 动态字体 的粗细和倾斜度
  • linear-gradient 的音位
  • CSS filter() 的取值
Last updated on