@designcombo/动画

一个强大的动画库,用于在React应用中管理复杂的动画序列和过渡,具有不同动画情景的专门组件.

安装

npm install @designcombo/animations
# or
yarn add @designcombo/animations
# or
pnpm add @designcombo/animations

使用量

BoxAnim 组件

带有旋转处理的标准入出动画的主要动画包装:

import { BoxAnim } from "@designcombo/animations";

<BoxAnim
  animationIn={[
    {
      property: "opacity",
      from: 0,
      to: 1,
      durationInFrames: 30,
      ease: (t) => t,
      delay: 0
    },
    {
      property: "translateX",
      from: -100,
      to: 0,
      durationInFrames: 30,
      ease: (t) => t
    }
  ]}
  animationOut={[
    {
      property: "opacity",
      from: 1,
      to: 0,
      durationInFrames: 15,
      ease: (t) => t
    }
  ]}
  durationInFrames={60}
  frame={currentFrame}
  style={{ transform: "rotate(45deg)" }}
>
  <div>Your BoxAnim content here</div>
</BoxAnim>;

内容 Anim 组件

对于受旋转变换影响的时间动画:

import { ContentAnim } from "@designcombo/animations";

<ContentAnim
  animationTimed={[
    {
      property: "scale",
      from: 0.8,
      to: 1.2,
      durationInFrames: 45,
      ease: (t) => t,
      persist: true
    }
  ]}
  durationInFrames={60}
  frame={currentFrame}
  style={{ width: 200, height: 200 }}
>
  <div>Content with timed animations</div>
</ContentAnim>;

马斯克阿尼姆组件

用于创建面具显示不同模式的动画:

import { MaskAnim } from "@designcombo/animations";

<MaskAnim
  frame={currentFrame}
  item={itemData}
  keyframeAnimations={[
    {
      property: "maskRevealIn", // or "maskRevealCenterIn", "maskRevealCornerIn"
      durationInFrames: 30
    }
  ]}
>
  <div>Content that will be revealed with mask animation</div>
</MaskAnim>;

动画钩

直接访问动画计算 :

import {
  useAnimation,
  combineAnimations,
  combine
} from "@designcombo/animations";

// Basic usage
const style = useAnimation(
  combineAnimations(animations),
  durationInFrames,
  frame,
  false // isOut
);

// Advanced usage with timed animations
const timedStyle = useAnimation(
  combineAnimations(animations),
  durationInFrames,
  frame,
  false, // isOut
  true // isTimed
);

// Combining multiple animation sources
const combinedAnimations = combine(
  animationIn,
  animationOut,
  additionalAnimations
);

动画属性

库支持各种动画属性:

• 变形属性数字 : scale, (中文(简体) ), translateX, (中文(简体) ), translateY, (中文(简体) ), rotate
• 视觉属性数字 : opacity
• 特殊属性数字 : shake (自动间隔)
• 遮罩属性数字 : maskRevealIn, (中文(简体) ), maskRevealCenterIn, (中文(简体) ), maskRevealCornerIn

动画界面

interface Animation {
  property: keyof React.CSSProperties | string;
  from: number;
  to: number;
  durationInFrames: number;
  ease: (t: number) => number;
  delay?: number;
  persist?: boolean; // For timed animations
}

特征

• 动画组件: 带有旋转补偿的入出动画的主要包装
• 内容动画构成部分: 专为受旋转影响的时间动画制作
• MaskWrapper 组件: 创建带有多种模式的掩码显示效果
• 动画钩: 直接访问动画计算
• 旋转处理: 旋转元素的自动补偿
• 持续动画: 对完成后持续存在的动画的支持
• 摇动效果: 内置自动间隔摇动动动画
• 转换提取器: 用于剖析和组合变换属性的公用事业
• 业绩优化: 有记忆的高效动画渲染
• 类型脚本支持: 具有全面接口的完整类型安全
• 恢复整合: 用于恢复视频框架的建筑

发展

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build package
pnpm build

# Format code
pnpm format

许可证

麻省理工学院