react-native animate 动画如何控制停止呢?

发布于 2022-09-04 18:22:26 字数 1052 浏览 18 评论 0

export default class  extends Component {
    constructor(props) {
        super(props)
        this.state = {
            value: new Animated.Value(0)
        }
    }
    componentDidMount() {
        this.AnimateRotate()
    }

    AnimateRotate() {
        this.state.value.setValue(0)
        Animated.timing(this.state.value, {
            toValue: 1,
            duration: 15000,
            easing:Easing.out(Easing.linear)
        }).start(() => {
            this.AnimateRotate()
        })
    }
    render() {
        const animateRotate = this.state.value.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '360deg']
        })
        return (
            <View style ={{justifyContent: 'center', alignItems: 'center'}}>
                <Animated.Image style ={[{transform: [{rotateZ: animateRotate}]},this.props.style]} source={this.props.imageSrc}  >
                </Animated.Image>
            </View>
        )
    }
}

上方代码是一个循环旋转的图片,怎么控制它的停止呢,

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文