mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-02-13 22:29:45 +08:00
[ReactNative] Move Animated to Open Source
Summary: Moves the files over and Exports Animated from 'react-native'.
This commit is contained in:
107
Examples/UIExplorer/AnimationExample/AnExSlides.md
Normal file
107
Examples/UIExplorer/AnimationExample/AnExSlides.md
Normal file
@@ -0,0 +1,107 @@
|
||||
<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 />
|
||||
Reference in New Issue
Block a user