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上搜索它，我在那里看到了一个非常干净的教程。祝你好运！

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

2 个答案: