Компонент Animated.Image

Компонент Animated.Image совпадает с Image: те же source и resizeMode. В style можно анимировать прозрачность, масштаб и смещение через Value.

Синтаксис

<Animated.Image
	source={{ uri: 'https://example.com/pic.png' }}
	style={{ opacity: fade, width: 80, height: 80 }}
/>

Параметры

Параметр	Описание
`style`	Размер и эффекты с анимируемыми значениями. Параметры картинки смотрите у `Image`.
`children`	У Image дочерние элементы обычно не используют.

Пример

Давайте плавно покажем картинку:

import { useEffect, useRef } from 'react';
import { Animated } from 'react-native';

export default function App() {
	const opacity = useRef(new Animated.Value(0)).current;

	useEffect(() => {
		Animated.timing(opacity, {
			toValue: 1,
			duration: 450,
			useNativeDriver: true,
		}).start();
	}, [opacity]);

	return (
		<Animated.Image
			source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
			style={{ opacity, width: 64, height: 64 }}
		/>
	);
}

На экране логотип проявляется из прозрачного состояния.

Пример

Давайте слегка увеличим картинку пружиной:

import { useEffect, useRef } from 'react';
import { Animated } from 'react-native';

export default function App() {
	const scale = useRef(new Animated.Value(0.6)).current;

	useEffect(() => {
		Animated.spring(scale, {
			toValue: 1,
			friction: 6,
			useNativeDriver: true,
		}).start();
	}, [scale]);

	return (
		<Animated.Image
			source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
			style={{
				width: 64,
				height: 64,
				transform: [{ scale }],
			}}
		/>
	);
}

На экране картинка подрастает до полного размера с легким отскоком.

Смотрите также

компонент Image,
статичная картинка без Animated
компонент ImageBackground,
картинка фоном под элементами
метод spring,
который масштабирует картинку
перечисление ResizeMode,
которое задает вписывание картинки