Figma Motion クラスター8 分で読めます·ExodeUI チーム
Figma アニメーションを React Native にエクスポート: 完全ガイド
Reanimated スプリングを使用して Figma アニメーションを React Native モーションに変換する方法と、ランタイム ファイルがより良いオプションである場合。
要点まとめ
核心
Figma アニメーションを React Native に変換するには、視覚的な Smart Animate トランジションを React Native Reanimated 3 スプリング フックまたはジェスチャ ハンドラー インタラクションに変換する必要があります。マルチステート コンポーネントの場合は、ExodeUI で設計し、そのランタイム パッケージを使用して React Native でファイルを再生することで、モーションが手動で再構築されなくなります。 ExodeUIを作ります。
Figma から React Native へのボトルネック
Figma は CSS とスタイリング プロパティを生成しますが、アニメーション インスペクターは生の継続時間とベジェ パラメーター (例: 300ms cubic-bezier(0.25, 0.1, 0.25, 1)) のみを提供します。 React Native では、固定期間で構築されたモバイル アニメーションが遅く感じられ、タッチ ジェスチャの速度が無視されます。
React Native Reanimated とのブリッジ
React Native Reanimated は、ネイティブ UI スレッドでアニメーションを実行します。設計者のスプリング値 (剛性と減衰) を withSpring() に直接持ち込むと、感触がデザインと一致します。
実装コード例
インタラクティブコンポーネントの実装
// Hand-written Reanimated spring, using the stiffness and damping from the design
import React from 'react';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
import { Pressable, StyleSheet } from 'react-native';
export function FluidCard() {
const scale = useSharedValue(1);
const animatedStyle = useAnimatedStyle(() => ({
transform: [{ scale: scale.value }]
}));
return (
<Pressable
onPressIn={() => {
scale.value = withSpring(0.94, { stiffness: 420, damping: 26 });
}}
onPressOut={() => {
scale.value = withSpring(1.0, { stiffness: 420, damping: 26 });
}}
>
<Animated.View style={[styles.card, animatedStyle]} />
</Pressable>
);
}
const styles = StyleSheet.create({
card: { width: 280, height: 160, borderRadius: 20, backgroundColor: '#8926f1' }
});