react-native Animated 图片旋转

最新推荐文章于 2025-10-03 04:07:50 发布

原创最新推荐文章于 2025-10-03 04:07:50 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react native

本文介绍如何在React Native中使用Animated库实现图片的旋转效果。通过导入必要的组件和设置状态变量，结合Animated.Value和Animated.timing，可以创建平滑的动画过渡。

import React, {Component} from “react”;
import {
Animated,
Easing,
StyleSheet,
ScrollView,
View
} from “react-native”;
import actionIcon from ‘…/assets/images/img.png’

export default class Index extends Component {
constructor(props) {
super(props)
this.state = {
spinValue: new Animated.Value(0),
};
}

//旋转方法
spin = () => {
    this.state.spinValue.setValue(0)
    const aniMotion = Animated.timing(this.state.spinValue, {
        toValue: 1,
        duration: 800,
        easing: Easing.linear,
        useNativeDriver: true
    })
    // 循环执行这个动画
    Animated.loop(aniMotion).start()
}


async componentDidMount() {
    this.spin()


}

render() {
    let {spinValue} = this.state
    const spin = spinValue.interpolate({
        inputRange: [0, 1],//输入值
        outputRange: ['0deg', '360deg'] //输出值
    })
    return (
        <ScrollView style={styles.pageStyle}>
            <View>
                <Animated.Image
                    style={{
                        width: 24,
                        height: 24,
                        transform: [{rotate: spin}]
                    }} source={actionIcon}/>
            </View>

        </ScrollView>
    )
}

}

const styles = StyleSheet.create({
pageStyle: {
flex: 1,
backgroundColor: ‘#fff’,
position: ‘relative’,
paddingRight: 10,
paddingLeft: 10,
paddingTop: 10,
}
});