React Native Reanimated 动画解析：animationParser.ts 配置转换工具

【免费下载链接】react-native-reanimated React Native's Animated library reimplemented 项目地址: https://gitcode.com/GitHub_Trending/re/react-native-reanimated

核心功能概述

animationParser.ts 是 React Native Reanimated 库中负责动画配置转换的核心工具，主要实现 CSS 动画定义与原生动画格式的双向转换。该工具位于 packages/react-native-reanimated/src/css/web/animationParser.ts，通过解析关键帧定义、处理时序函数和转换样式属性，为跨平台动画提供统一的配置处理能力。

文件结构与依赖关系

核心实现文件

animationParser.ts 在项目中有两个主要实现位置，分别服务于不同的动画场景：

1. CSS 动画解析：packages/react-native-reanimated/src/css/web/animationParser.ts

   • 负责处理 CSS 关键帧定义，提供 processKeyframeDefinitions 等方法
   • 被 CSS 动画管理器直接引用：CSSAnimationsManager.ts

2. 布局动画解析：packages/react-native-reanimated/src/layoutReanimation/web/animationParser.ts

   • 定义动画数据结构和转换逻辑，提供 convertAnimationObjectToKeyframes 方法
   • 支持布局动画的关键帧生成，被多种动画效果实现引用：
     • Fade 动画
     • Slide 动画
     • Zoom 动画

模块依赖关系

数据结构定义

动画样式接口

animationParser 定义了统一的动画样式结构，支持不透明度和变换属性的动画配置：

export interface AnimationStyle {
  opacity?: number;
  transform?: ReanimatedWebTransformProperties[];
  easing?: EasingFunction | EasingFunctionFactory;
}

动画数据结构

完整的动画定义包含名称、关键帧样式和持续时间：

export interface AnimationData {
  name: string;
  style: Record<number, AnimationStyle>;  // 关键帧样式定义
  duration: number;                       // 动画持续时间(毫秒)
}

转换数据结构

支持布局转换的坐标和缩放信息定义：

export interface TransitionData {
  translateX: number;  // X轴位移
  translateY: number;  // Y轴位移
  scaleX: number;      // X轴缩放
  scaleY: number;      // Y轴缩放
  easingX?: string;    // X轴缓动函数
  easingY?: string;    // Y轴缓动函数
}

核心方法解析

processKeyframeDefinitions

该方法位于 CSS 动画解析模块，负责处理 CSS 关键帧定义并转换为标准格式：

export function processKeyframeDefinitions(definitions: CSSAnimationKeyframes) {
  return Object.entries(definitions)
    .reduce<string[]>((acc, [timestamp, rules]) => {
      const step = hasSuffix(timestamp) ? timestamp : `${parseFloat(timestamp) * 100}%`;
      const processedBlock = processKeyframeBlock(rules);
      if (processedBlock) {
        acc.push(`${step} { ${processedBlock} }`);
      }
      return acc;
    }, [])
    .join(' ');
}

功能特点：

• 支持百分比和关键词（from/to）时间戳
• 处理关键帧样式规则
• 生成标准 CSS 关键帧字符串

convertAnimationObjectToKeyframes

该方法位于 布局动画解析模块，将动画对象转换为关键帧 CSS：

export function convertAnimationObjectToKeyframes(animationObject: AnimationData) {
  let keyframe = `@keyframes ${animationObject.name} { `;
  
  for (const [timestamp, style] of Object.entries(animationObject.style)) {
    const step = timestamp === 'from' ? 0 : timestamp === 'to' ? 100 : timestamp;
    keyframe += `${step}% { `;
    
    // 处理样式属性...
    
    keyframe += `} `;
  }
  
  return keyframe;
}

处理流程：

1. 创建关键帧动画名称
2. 遍历关键帧时间点
3. 转换样式属性为 CSS 格式
4. 生成完整的关键帧 CSS 规则

应用示例

CSS 关键帧转换

以下是将 CSS 关键帧定义转换为 Reanimated 动画配置的示例：

// 输入关键帧定义
const keyframes = {
  '0%': { opacity: 0 },
  '100%': { opacity: 1 }
};

// 处理转换
const processed = processKeyframeDefinitions(keyframes);
// 输出: "0% { opacity: 0; } 100% { opacity: 1; }"

布局动画生成

使用 animationParser 生成淡入动画的关键帧：

// 动画数据定义
const fadeInAnimation: AnimationData = {
  name: 'fadeIn',
  duration: 300,
  style: {
    0: { opacity: 0 },
    100: { opacity: 1 }
  }
};

// 转换为关键帧CSS
const keyframes = convertAnimationObjectToKeyframes(fadeInAnimation);

生成的关键帧 CSS：

@keyframes fadeIn { 
  0% { opacity: 0; } 
  100% { opacity: 1; } 
}

实际应用场景

组件进入动画

在 EntryExit 过渡实现 中，animationParser 用于生成组件入场和退场动画：

import { convertAnimationObjectToKeyframes } from '../animationParser';

// 创建入场动画
const animationData = {
  name: 'entryAnimation',
  duration: 300,
  style: {
    0: { opacity: 0, transform: [{ translateX: 50 }] },
    100: { opacity: 1, transform: [{ translateX: 0 }] }
  }
};

const keyframes = convertAnimationObjectToKeyframes(animationData);

CSS 动画支持

在 CSS 动画模块 中，animationParser 提供了对 CSS 动画标准的支持：

// 导出动画解析工具
export * from './animationParser';

通过这些工具，开发者可以使用熟悉的 CSS 动画语法来创建 Reanimated 动画效果。

总结与扩展

animationParser.ts 作为 Reanimated 库的关键组件，通过统一的动画配置转换，实现了 CSS 动画和布局动画的跨平台支持。其核心价值在于：

1. 统一接口：提供一致的动画配置格式，简化动画定义
2. 跨平台适配：处理不同平台的动画实现差异
3. 性能优化：生成高效的关键帧动画代码

开发者可以通过扩展 animationParser 的功能，支持更多自定义动画属性和转换规则，进一步丰富 React Native 应用的动画效果。

更多动画实现示例可参考项目中的 动画示例应用 和 web 示例。

【免费下载链接】react-native-reanimated React Native's Animated library reimplemented 项目地址: https://gitcode.com/GitHub_Trending/re/react-native-reanimated