Exportera Figma-animation till React Native: Den kompletta guiden
Hur man förvandlar Figma-animationer till React Native-rörelse med Reanimated-fjädrar, och när en runtime-fil är det bättre alternativet.
Core Takeaway
Att konvertera Figma-animationer till React Native kräver att visuella Smart Animate-övergångar översätts till React Native Reanimated 3 fjäderkrokar eller interaktioner med Gesture Handler. För komponenter med flera tillstånd är ett alternativ att designa dem i ExodeUI och spela upp filen i React Native med dess runtime-paket, så att rörelsen inte byggs om för hand. Vi gör ExodeUI.
Flaskhalsen från Figma till React Native
Figma genererar CSS och stilegenskaper, men dess animationsinspektör tillhandahåller bara råvaraktighet och bezierparametrar (t.ex. 300ms cubic-bezier(0,25, 0,1, 0,25, 1)). I React Native känns mobilanimationer byggda med fast varaktighet tröga och bortser från beröringsgesthastighet.
Överbryggning med React Native Reanimated
React Native Reanimated kör animationer på den inbyggda UI-tråden. Bär designerns fjädervärden (styvhet och dämpning) rakt in i withSpring() så känslan matchar designen.
Produktionsimplementeringsutdrag
// 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' }
});