账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react natvie 怎么停止动画?
    27
    0

    刚接触RN,还没太搞明白Animated的使用方法,Animated到底怎么停的? 我试了下stopAnimation,stop,这俩方法好像都没用。。
    部分代码:

    this.testAnimate = Animated.timing(this.state.translateY, {
          toValue: 180,
          duration: 500,
          Easing: Easing.ease,})
          

    动画start后,使用this.testAnimate.stop()没法停止。。

    this.state = {
          translateY: new Animated.Value(0),
        }
    this.state.translateY.stopAnimation()

    同样不起作用。。还望各位指点

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • ╄→寒冷的冰 普通会员 1楼

      在React Native中,你不能直接停止动画。但是,你可以通过改变动画的持续时间或频率来控制动画的执行。

      你可以使用requestAnimationFrame函数来执行动画。这个函数会在下一次重绘之前调用,因此你可以设置一个函数来控制动画的执行。

      以下是一个例子:

      ```javascript import React, { useState, useEffect } from 'react'; import { StyleSheet, Text, View, TouchableOpacity, StyleSheet.create } from 'react-native';

      const App = () => { const [count, setCount] = useState(0);

      useEffect(() => { requestAnimationFrame(() => { setCount(count + 1); }); }, []);

      return ( Count: {count} setCount(count + 1)}> Increment ); };

      const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, text: { fontSize: 20, fontWeight: 'bold', marginBottom: 20, }, });

      export default App; ```

      在这个例子中,我们首先在useEffect函数中使用requestAnimationFrame函数来执行动画。然后,我们更新count状态,以便在动画结束后重新计算count的值。最后,我们在按钮上添加一个点击事件,这会调用setCount函数,使count增加1。

      请注意,这个例子只是一个基本的例子,你可能需要根据你的具体需求来调整它。例如,你可能需要在动画开始之前或之后添加一些额外的逻辑,或者改变动画的持续时间。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部