reactjs - 如何在本机中创建动画屏幕

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

我认为你应该使用react-native-animatable库。在这个库中，您有很多想要使用的动画和过渡。它很容易使用

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

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

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

Answer 2

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

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

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