CODEWITHSUNDEEP
react-nativelottie
Stanislav Mayorov
Stanislav Mayorov

Reputation: 4452

Looping part of animation using react native animated

How to play animation from 0 to 0.5 one time then looping from 0.5 to 1 to 0.5 using React native Animated.

I have a loop 0-1-0. It works fine, but it starts from 0.

Animated.loop(
  Animated.sequence([
    Animated.timing(this.state.progress, {
      toValue: 1,
      duration: 1075,
    }),
    Animated.timing(this.state.progress, {
      toValue: 0,
      duration: 1075,
    }),
  ])
).start();

Upvotes: 2

Views: 1874

Answers (2)

Mahdi Bashirpour
Mahdi Bashirpour

Reputation: 18803

constructor(props) {
    super(props);

    this.animatedValue = new Animated.Value(0)
}

componentDidMount() {
    this.animate()
}

animate() {
    this.animatedValue.setValue(0);
    Animated.timing(
        this.animatedValue,
        {
            toValue: 1,
            duration: 1075,
            easing: Easing.linear
        }
    ).start(() => this.animate())
}

render() {

   const animate = this.animatedValue.interpolate({
        inputRange: [0, .5, 1],
        outputRange: [.5, 1, .5]
    });
}

Upvotes: 1

Mahdi Bashirpour
Mahdi Bashirpour

Reputation: 18803

Animated.loop(
    Animated.sequence([
        Animated.timing(this.state.progress, {
            toValue: 1,
            duration: 1075,
        }, () => {
            Animated.timing(this.state.progress, {
                toValue: 0,
                duration: 1075,
            })
        }),

    ])
).start();

Upvotes: 0

Related Questions