Javascript 如何制作基于Lottie动画进度更新的滑块（React Native）

我试图让一个滑块根据乐透动画的进度值更新其位置。 滑块可以控制乐透的进度，但如果我按下“玩乐透”按钮，它不会更新其位置。如何让组件访问乐天的进度值并根据进度值进行更新？我希望此值是公共的或可从其他组件访问。外部组件似乎无法访问进度值。我试过“addListener”，但没用。

一般来说，我对本地和编码都不熟悉。我在StackOverflow周围找了很多天，什么也没找到

export default class HomeScreen extends React.Component {
    constructor(props) {
        super(props);
        this.playLottie.bind(this);
        this.playLottie.bind(this);
        this.pauseLottie.bind(this);
        this.state = {
            progress: new Animated.Value(0),
            pausedProgress: 0
        };
        this.state.progress.addListener(({ value }) => this._value = value); // I tried to use a Listener so that components can Listen to the Progress of the lottie animation...
    }

    playLottie = () => {
        Animated.timing(this.state.progress, {
            toValue: 1,
            easing: Easing.linear,

        }).start;
    }

    //Shows real-time value of the Slider. Console output works too, updates when I use slider in realtime.
    realProgress = (value) => {
        console.log("realProgress", value);
        this.setState({ pausedProgress: value });
    };

    //Used by Slider, sets Progress of Lottie
    setProgress = (value) => {
        this.state.progress.setValue(value);
        console.log("setProgress", value)
    };

    render() {
        return (

            <View style={styles.container}>
                <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
                //The Lottie Animation:
                <LottieView
                        ref={animation => { this.animation = animation; }}
                        source={require('../assets/lottie-animations/animation.json')}
                        style={{ height: 400, width: '100%' }}
                        loop={false}
                        progress={this.state.progress}
                />

                <Button
                    onPress={this.playLottie}
                    title="Play Lottie"
                />
                <Button
                    onPress={this.pauseLottie}
                    title="Pause Lottie"
                    />

                //The slider that controls the progress of the Lottie Animation:
                <Slider
                    style={{ width: '100%', height: 40 }}
                    minimumValue={0}
                    maximumValue={1}
                    onValueChange={(value) => this.setProgress(value)}
                />

                //Tried using Text to display the real-time value of the Lottie animation progress. Doesn't display any numbers.
                <Text>{'Slider Position: '}{Slider.onValueChange}</Text>

                </ScrollView>
            </View>

        );
    }
}

博览会版本：3.13.8

---

Windows 10使用命令式API，它要简单得多

构造函数

  constructor(props) {
    super(props);

    this.state = {
      progress: 0,
    }
  }

使用组件DIDMOUNT进行测试<代码>播放（开始帧、结束帧）。您需要找出动画结束帧编号，以便与滑块一起使用。继续更改结束帧，直到播放结束——这是您的数字

  componentDidMount() {
    // Or set a specific startFrame and endFrame with:
    // this.animation.play(0, 100);
  }

返回值并更改进度状态的箭头函数。可以将动画帧速率设置为在同一帧上开始和停止

  animateIt = (value) => {
    //this.animation.reset();
    this.setState({progress: value})
    this.animation.play(value, value);
  }

你的乐透部分

  <LottieView
    ref={animation => {
      this.animation = animation;
    }}
    style={{ height: 400, width: '100%' }}
    source={require('../assets/lottie-animations/animation.json')}
  />

{
这个动画=动画；
}}
样式={{高度：400，宽度：'100%}
source={require（'../assets/lottie animations/animation.json'）}
/>

滑块将最大值设置为等于动画的最后一帧。就我而言是40。滑块还调用arrow函数并返回值

  <Slider
      style={{ width: '100%', height: 40 }}
      minimumValue={0}
      maximumValue={40}
      onValueChange={(value) => this.animateIt(value)}
  />

this.animateIt（值）}
/>

我还想说的是，你自己也很快就能弄明白了：）谢谢，这很有道理，但我无法让它工作。如何返回值并让其他组件使用它们？我仍然不知道如何访问progress变量并使用它。现在，播放按钮不起作用，也不会播放动画，即使我在animateIt函数中取消注释“this.animation.play（value，value）；”。奇怪的是，componentDidMount（）确实自动播放了动画。为什么会这样？如果“this.setState（{progress:value}）；”行被注释掉，则滑块不会更新动画的进度。请在此处查看我的代码：我已使用注释编辑了您的代码，希望它有所帮助。

  <Slider
      style={{ width: '100%', height: 40 }}
      minimumValue={0}
      maximumValue={40}
      onValueChange={(value) => this.animateIt(value)}
  />