如何在 React Native 中创建动画屏幕

Question

我正在尝试制作类似于此图片的动画屏幕，但我没有正确完成。 b 我想要我上传的这张图片。我不擅长动画，请帮助我改进我的代码。我卡在动画里了。

这是我试过的。

import React, { Component } from 'react'
import { View, Image, Animated, Easing } from 'react-native'

const backgroundImage = require("../../../assets/icons/post.jpeg")
export default class Splash extends Component {
constructor(props) {
    super(props)
    this.state = { spinAnim: new Animated.Value(0) }
}

componentDidMount() {
    this.handleAnimation()
}

handleAnimation = () => {
    console.log("rree")
    Animated.timing(
        this.state.spinAnim,
        {
            toValue: 1,
            duration: 500,
            easing: Easing.linear,
            useNativeDriver: true
        }
    ).start();
}

render() {
    const spin = this.state.spinAnim.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg']
    });
    return (
        <View>
            <View style={{ flex: 1 }}>
                <Animated.Image
                    source={backgroundImage}
                    resizeMode='cover'
                    style={{
                        position: 'absolute',
                        left: 40,
                        top: 100,
                        height: 100,
                        width: 100,
                        transform: [
                            { rotate: spin },
                        ]
                    }}
                />
            </View>
        </View>
    )
}
}

Answer 1

如果你想使用一个包，你可以使用 Lottie，它也被 expo 支持。

https://www.npmjs.com/package/lottie-react-native

它使用 After Effects 创建非常漂亮的 React Native 动画。在 youtube 上搜索它，我在那里看到了一个非常干净的教程。祝你好运！

Answer 2

我认为你应该使用 react-native-animatable 库。在这个库中，你有很多你想使用的动画和过渡。非常好用

import * as Animatable from 'react-native-animatable';

<Animatable.Text animation="zoomInUp">Zoom me up, Scotty</Animatable.Text>

并且在这个库中，您可以使用更多道具，例如 onAnimationEnd 当动画结束时，您可以根据需要调用函数。

如何在 React Native 中创建动画屏幕

how to create animation screen in react native

reactjs

react-native

animation

react-native-animatable