108 lines
2.3 KiB
Markdown
108 lines
2.3 KiB
Markdown
|
<br /><br />
|
||
|
|
# React Native: Animated
|
||
|
|
|
||
|
|
ReactEurope 2015, Paris - Spencer Ahrens - Facebook
|
||
|
|
|
||
|
|
<br /><br />
|
||
|
|
|
||
|
|
## Fluid Interactions
|
||
|
|
|
||
|
|
- People expect smooth, delightful experiences
|
||
|
|
- Complex interactions are hard
|
||
|
|
- Common patterns can be optimized
|
||
|
|
|
||
|
|
<br /><br />
|
||
|
|
|
||
|
|
|
||
|
|
## 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
|
||
|
|
|
||
|
|
<br /><br />
|
||
|
|
|
||
|
|
|
||
|
|
## 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
|
||
|
|
|
||
|
|
<br /><br />
|
||
|
|
|
||
|
|
|
||
|
|
## Gratuitous Animation Demo App
|
||
|
|
|
||
|
|
- Layout uses `flexWrap: 'wrap'`
|
||
|
|
- longPress -> drag to reorder
|
||
|
|
- Tap to open example sets
|
||
|
|
|
||
|
|
<br /><br />
|
||
|
|
|
||
|
|
## 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
|
||
|
|
|
||
|
|
<br /><br />
|
||
|
|
|
||
|
|
## 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
|
||
|
|
|
||
|
|
<br /><br />
|
||
|
|
|
||
|
|
|
||
|
|
## 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
|
||
|
|
|
||
|
|
<br /><br />
|
||
|
|
|
||
|
|
## Bobbles
|
||
|
|
|
||
|
|
- Static positions defined
|
||
|
|
- Listens to events to maybe change selection
|
||
|
|
- Springs previous selection back
|
||
|
|
- New selection tracks selector
|
||
|
|
- `getTranslateTransform` adds convenience
|
||
|
|
|
||
|
|
<br /><br />
|
||
|
|
|
||
|
|
## 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`
|
||
|
|
|
||
|
|
<br /><br />
|
||
|
|
|
||
|
|
## Scrolling
|
||
|
|
|
||
|
|
- `Animated.event` can track all sorts of stuff
|
||
|
|
- Multi-part ranges and extrapolation options
|
||
|
|
- Transforms decompose into ordered components
|
||
|
|
|
||
|
|
<br /><br />
|
||
|
|
|
||
|
|
# React Native: Animated
|
||
|
|
|
||
|
|
- Landing soon in master (days)
|
||
|
|
- GitHub: @vjeux, @sahrens
|
||
|
|
- Questions?
|
||
|
|
|
||
|
|
<br />
|