React Native: Animated

ReactEurope 2015, Paris - Spencer Ahrens - Facebook

Fluid Interactions

• People expect smooth, delightful experiences
• Complex interactions are hard
• Common patterns can be optimized

Declarative Interactions

• Wire up inputs (events) to outputs (props) + transforms (springs, easing, etc.)
• Arbitrary code can define/update this config
• Config can be serialized -> native/main thread
• No refs or lifecycle to worry about

var { Animated } = require('react-native');

• New library soon to be released for React Native
• 100% JS implementation -> X-Platform
• Per-platform native optimizations planned
• This talk -> usage examples, not implementation

Gratuitous Animation Demo App

• Layout uses flexWrap: 'wrap'
• longPress -> drag to reorder
• Tap to open example sets

Gratuitous Animation Codez

• Step 1: 2D tracking pan gesture
• Step 2: Simple pop-out spring on select
• Step 3: Animate grid reordering with LayoutAnimation
• Step 4: Opening animation

Animation Example Set

• Animated.Value this.props.open passed in from parent
• interpolate works with string "shapes," e.g. 'rgb(0, 0, 255)', '45deg'
• Examples easily composed as separate components
• Dismissing tracks interpolated gesture
• Custom release logic

Tilting Photo

• Pan -> translateX * 2, rotate, opacity (via tracking)
• Gesture release triggers separate animations
• addListener for async, arbitrary logic on animation progress
• interpolate easily creates parallax and other effects

Bobbles

• Static positions defined
• Listens to events to maybe change selection
• Springs previous selection back
• New selection tracks selector
• getTranslateTransform adds convenience

Chained

• Classic "Chat Heads" animation
• Each sticker tracks the one before it with a soft spring
• decay maintains gesture velocity, followed by spring to home
• stopAnimation provides the last value for setOffset

Scrolling

• Animated.event can track all sorts of stuff
• Multi-part ranges and extrapolation options
• Transforms decompose into ordered components

React Native: Animated

• Landing soon in master (days)
• GitHub: @vjeux, @sahrens
• Questions?