Skip to main content

cube()

note

这是一个付费商品，你可以在这里购买。

一个演示，其中进入和退出的场景都以三维透视旋转。

🌐 A presentation where both the entering and exiting scene rotate with 3D perspective.

示例​

🌐 Example

CubeTransition.tsx
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { cube } from "@remotion-dev/cube-presentation";

const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={cube({ direction: "from-left" })}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

应用编程接口​

🌐 API

cube() 函数确实接受具有以下属性的对象：

🌐 The cube() function does take an object with the following properties:

direction​

from-left、from-right、from-top、from-bottom之一。

🌐 One of from-left, from-right, from-top, from-bottom.

import { CubeDirection } from "@remotion-dev/cube-presentation";

const flipDirection: CubeDirection = "from-left";

perspective?​

翻转动画的 CSS perspective。默认值为 1000。

🌐 The CSS perspective of the flip animation. Defaults to 1000.

另请参阅​

🌐 See also

Last updated on