Eksportowanie animacji Figma do React Native: kompletny przewodnik
Jak zamienić animacje Figma w ruch React Native za pomocą sprężyn Reanimated i kiedy lepszym rozwiązaniem jest plik wykonawczy.
Rdzeń na wynos
Konwersja animacji Figma do React Native wymaga przetłumaczenia wizualnych przejść Smart Animate na 3 zaczepy sprężynowe React Native Reanimated lub interakcje obsługi gestów. W przypadku komponentów wielostanowych alternatywą jest zaprojektowanie ich w ExodeUI i odtworzenie pliku w React Native z pakietem wykonawczym, aby ruch nie był odbudowywany ręcznie. Wykonujemy ExodeUI.
Wąskie gardło od Figma do React Native
Figma generuje CSS i właściwości stylizacji, ale jego inspektor animacji podaje tylko surowe parametry czasu trwania i Beziera (np. 300 ms sześciennego beziera (0,25, 0,1, 0,25, 1)). W React Native animacje mobilne zbudowane ze stałym czasem trwania wydają się powolne i lekceważą prędkość gestów dotykowych.
Mostkowanie z React Native Reanimated
React Native Reanimated uruchamia animacje w natywnym wątku interfejsu użytkownika. Przenieś wartości sprężyn projektanta (sztywność i tłumienie) bezpośrednio do funkcji withSpring(), aby wrażenia odpowiadały projektowi.
Fragment wdrożenia produkcyjnego
// 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' }
});