Rangle.io: React Native Workshop
gitbook
gitbook
  • Introduction
  • Setup
    • Hello World
    • Debugging
  • Core Concepts
    • Components
    • Styles
    • Flexbox
    • APIs
  • Navigation
    • Navigation Experimental
    • Creating Some Helpers
    • The Navigator Component
  • ListView (Pokédex)
    • List View
    • List View: Render Row
    • Text Input
    • Keyboard Spacer
  • Selectors (Filtering)
  • Animation
    • LayoutAnimation
    • Animated
      • Animated.Value
      • Timing, Spring & Decay
      • Animated Components
      • More Animated
    • Resources
    • Exercise
  • ScrollView (Pokemon Details)
  • MapView
  • Testing
  • Gesture Responder System
    • PanResponder
Powered by GitBook
On this page
  • Interpolation
  • Composing Animations
  • Animated.Event

Was this helpful?

  1. Animation
  2. Animated

More Animated

The Animated library allows us to do a lot more things such as composing animations or driving animations through gestures and input events. Let's look at a few examples.

Interpolation

Using the same Animated.Value you can drive multiple animations through interpolation. Interpolation can also be used to convert numbers into rgb colours or rotation values in degrees.

this.state = { animatedVal: new Animated.Value(0) };

const marginLeftAnimation = this.state.animatedValue.interpolate({
  inputRange: [-300, -100, 0, 100, 101],
  outputRange: [300,    0, 1,   0,   0],
});

Input

Output

-400

450

-300

300

-200

150

-100

0

-50

0.5

0

1

50

0.5

100

0

101

0

200

0

Composing Animations

Animated.sequence([
  Animated.timing(this.state.animatedVal, {
    toValue: 100,
    duration: 500,
  }),
  Animated.timing(this.state.animatedVal, {
    toValue: 0,
    duration: 200,
  })
]).start();

Animated.parallel([
  Animated.spring(this.state.animPosition, {
    toValue: { x: 200, y: 100 }
  }),
  Animated.timing(this.state.animOpacity, {
    toValue: 0.75,
  }),
]).start();

Animated.stagger(100, [
  Animated.timing(this.state.animListItem1, {
    toValue: 100,
    duration: 200,
  }),
  Animated.timing(this.state.animListItem2, {
    toValue: 0,
    duration: 200,
  })
]).start()

Animated.Event

Allows us to extract values from an input event and set values for an Animated.Value.

class AnimatedEventExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      animatedY: new Animated.Value(0),
    };
  }

  render() {
    const event = Animated.event([{
      nativeEvent: {
        contentOffset: {
          y: this.state.animatedY,
        },
      },
    }]);

    return (
      <ScrollView onScroll={ event }>
        <Animated.View
          style={{ height: this.state.animatedY }} />
      </ScrollView>
    )
  }
}
PreviousAnimated ComponentsNextResources

Last updated 6 years ago

Was this helpful?