react-native Animated 图片旋转

最新推荐文章于 2025-05-17 10:06:54 发布

原创

最新推荐文章于 2025-05-17 10:06:54 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react native

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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}&g