转换
动画发生在元素的视觉属性随时间变换时。
让我们看看五种常见的元素转换方式。
已经熟悉如何在 React 中应用 CSS 转换了吗?跳过此页面。
5种基本转换
从左到右:不透明度、缩放、倾斜、平移、旋转
不透明度
不透明度确定元素的可见性。0
表示完全不可见,1
表示完全可见。介于两者之间的值将使元素半透明,底部元素将可见。
您可以使用 opacity
属性设置元素的不透明度。
MyComponent.tsxtsx
<div style ={{height : 100,width : 100,backgroundColor : "red",opacity : 0.5,}}/>
MyComponent.tsxtsx
<div style ={{height : 100,width : 100,backgroundColor : "red",opacity : 0.5,}}/>
接受小于 0
和大于 1
的值,但不会产生进一步效果。
缩放
缩放确定元素的大小。1
是自然大小,2
将使元素高度和宽度加倍。
小于 1
的值将使元素变小。0
使元素不可见。小于 0
的值被接受,将使元素再次变大,但是镜像。
您可以使用 transform
属性设置元素的缩放。
MyComponent.tsxtsx
<div style ={{height : 100,width : 100,backgroundColor : "red",transform : `scale(0.5)`,}}/>
MyComponent.tsxtsx
<div style ={{height : 100,width : 100,backgroundColor : "red",transform : `scale(0.5)`,}}/>
与使用 height
和 width
改变元素大小的区别在于,使用 scale()
不会改变其他元素的布局。
倾斜
倾斜元素会导致元素外观扭曲,就好像元素的两个角已被拉伸。倾斜采用可以使用 rad
(弧度)和 deg
(度)指定的角度。
您可以使用transform
属性设置元素的倾斜度。
查看下面的示例,了解倾斜如何影响元素。
MyComponent.tsxtsx
<div style ={{height : 100,width : 100,backgroundColor : "red",transform : `skew(20deg)`,}}/>
MyComponent.tsxtsx
<div style ={{height : 100,width : 100,backgroundColor : "red",transform : `skew(20deg)`,}}/>
翻译
翻译元素意味着移动它。翻译可以在X、Y甚至Z轴上进行。变换可以用px
来指定。
您可以使用transform
属性设置元素的平移。
MyComponent.tsxtsx
<div style ={{height : 100,width : 100,backgroundColor : "red",transform : `translateX(100px)`,}}/>
MyComponent.tsxtsx
<div style ={{height : 100,width : 100,backgroundColor : "red",transform : `translateX(100px)`,}}/>
与使用margin-top
和margin-left
改变元素位置不同,使用translate()
不会改变其他元素的位置。
旋转
通过旋转元素,您可以使其看起来像是围绕其中心旋转。旋转可以用rad
(弧度)或deg
(度)来指定,您可以围绕Z轴(默认)旋转元素,也可以围绕X和Y轴旋转。
您可以使用transform
属性设置元素的旋转。
MyComponent.tsxtsx
<div style ={{height : 100,width : 100,backgroundColor : "red",transform : `rotate(45deg)`, // the same as rotateZ(45deg)}}/>
MyComponent.tsxtsx
<div style ={{height : 100,width : 100,backgroundColor : "red",transform : `rotate(45deg)`, // the same as rotateZ(45deg)}}/>
如果要围绕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";consttransform =translate (50, 50);// => "translate(50px, 50px)"constmultiTransform =makeTransform ([rotate (45),translate (50, 50)]);// => "rotate(45deg) translate(50px, 50px)"
tsx
import {makeTransform ,rotate ,translate } from "@remotion/animation-utils";consttransform =translate (50, 50);// => "translate(50px, 50px)"constmultiTransform =makeTransform ([rotate (45),translate (50, 50)]);// => "rotate(45deg) translate(50px, 50px)"
更多对象转换方式
这只是一些基本转换。以下是一些可能的更多转换方式:
<div>
的高度和宽度- 使用
border-radius
设置元素的圆角 - 使用
box-shadow
设置元素的阴影 - 使用
color
和interpolateColors()
改变某物的颜色 - 使用
evolvePath()
改变 SVG 路径的演变 - 动态字体的粗细和倾斜
linear-gradient
的停止点- CSS
filter()
的值