自定义演示文稿

本页面描述了如何为 <TransitionSeries> 创建你自己的自定义效果。

🌐 This page describes how to create your own custom effect for <TransitionSeries>.

概念

🌐 Concept

演示文稿是一个高阶组件，它封装着进入的幻灯片和退出的幻灯片，并根据三个参数实现效果：

🌐 A presentation is a higher order component which wraps around the entering slide as well as the exiting slide and which implements an effect based on three parameters:

1

当前的 presentationProgress，受过渡时间的影响

2

presentationDirection，可以是 entering 或 exiting

3

presentationDurationInFrames（自 v4.0.153 起可用）

4

额外的开发者定义的 passedProps

样板

🌐 Boilerplate

自定义展示是一个返回 TransitionPresentation 类型对象的函数。它是一个包含 React 组件（component）和作为 passedProps 传递给组件的 React 属性的对象。

🌐 A custom presentation is a function which returns an object of type TransitionPresentation.
It is an object with a React component (component) and React props which are passed to the component as passedProps.

custom-presentation.tsx

import type {TransitionPresentation} from '@remotion/transitions';

type CustomPresentationProps = {
  width: number;
  height: number;
};

export const customPresentation = (
  props: CustomPresentationProps,
): TransitionPresentation<CustomPresentationProps> => {
  return {component: StarPresentation, props};
};

component 是一个 React 组件，它接收以下属性（props）:

🌐 The component is a React component which receives the following props:

1

children：用于封装的标记

2

presentationDirection：可以是"entering"或"exiting"

3

presentationProgress：介于0和1之间的数字，表示过渡的进度。

4

passedProps：传递给展示的自定义属性

StarPresentation.tsx
import type {TransitionPresentationComponentProps} from '@remotion/transitions';
import {AbsoluteFill} from 'remotion';

const StarPresentation: React.FC<
  TransitionPresentationComponentProps<CustomPresentationProps>
> = ({children, presentationDirection, presentationProgress, passedProps}) => {
  return (
    <AbsoluteFill>
      <AbsoluteFill>{children}</AbsoluteFill>
    </AbsoluteFill>
  );
};

示例

🌐 Example

以下示例实现了星形遮罩过渡：

🌐 The following example implements a star mask transition:

1

根据passedProps的height和width，计算可以完全填充画布的星形内半径。

2

使用 @remotion/shapes计算SVG路径，并从零增长到画布的完整尺寸。

3

使用presentationProgress来插值形状尺寸。

4

使用@remotion/paths将星形居中画布中。

5

使用clipPath裁剪进入的幻灯片。在容器内，children被渲染。

6

如果presentationDirection设置为"exiting"，则此效果被禁用。

StarPresentation.tsx
import {getBoundingBox, translatePath} from '@remotion/paths';
import {makeStar} from '@remotion/shapes';
import type {TransitionPresentationComponentProps} from '@remotion/transitions';
import React, {useMemo, useState} from 'react';
import {AbsoluteFill, random} from 'remotion';

export type CustomPresentationProps = {
  width: number;
  height: number;
};

const StarPresentation: React.FC<
  TransitionPresentationComponentProps<CustomPresentationProps>
> = ({children, presentationDirection, presentationProgress, passedProps}) => {
  const finishedRadius =
    Math.sqrt(passedProps.width ** 2 + passedProps.height ** 2) / 2;
  const innerRadius = finishedRadius * presentationProgress;
  const outerRadius = finishedRadius * 2 * presentationProgress;

  const {path} = makeStar({
    innerRadius,
    outerRadius,
    points: 5,
  });

  const boundingBox = getBoundingBox(path);

  const translatedPath = translatePath(
    path,
    passedProps.width / 2 - boundingBox.width / 2,
    passedProps.height / 2 - boundingBox.height / 2,
  );

  const [clipId] = useState(() => String(random(null)));

  const style: React.CSSProperties = useMemo(() => {
    return {
      width: '100%',
      height: '100%',
      clipPath:
        presentationDirection === 'exiting' ? undefined : `url(#${clipId})`,
    };
  }, [clipId, presentationDirection]);

  return (
    <AbsoluteFill>
      <AbsoluteFill style={style}>{children}</AbsoluteFill>
      {presentationDirection === 'exiting' ? null : (
        <AbsoluteFill>
          <svg>
            <defs>
              <clipPath id={clipId}>
                <path d={translatedPath} fill="black" />
              </clipPath>
            </defs>
          </svg>
        </AbsoluteFill>
      )}
    </AbsoluteFill>
  );
};

示例用法：

🌐 Example usage:

MyComp.tsx
export const MyComp: React.FC = () => {
  const {width, height} = useVideoConfig();

  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={70}>
        <Letter color="orange">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={customPresentation({width, height})}
        timing={springTiming({
          durationInFrames: 45,
          config: {
            damping: 200,
          },
          durationRestThreshold: 0.0001,
        })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

参考文献

🌐 References

查看已实现演示的源代码以作为有用的参考。

🌐 See the source code for already implemented presentations for a useful reference.

另请参阅

🌐 See also

• 自定义时间