Merge pull request #2194 from ide/animation-docs

[Docs] Remove sections on AnimationExperimental and Pop
This commit is contained in:
Brent Vatne 2015-08-02 16:16:13 -07:00
commit e2a2472af4

View File

@ -556,79 +556,3 @@ var CustomSceneConfig = Object.assign({}, BaseConfig, {
For further information about customizing scene transitions, [read the For further information about customizing scene transitions, [read the
source](https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js). source](https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js).
### AnimationExperimental *(Deprecated)*
As the name would suggest, this was only ever an experimental API and it
is **not recommended to use this on your apps**. It has some rough edges
and is not under active development. It is built on top of CoreAnimation
explicit animations.
If you choose to use it anyways, here is what you need to know:
- You will need to include `RCTAnimationExperimental.xcodeproj` and add
`libRCTAnimationExperimental.a` to `Build Phases`.
- Suited only for static "fire and forget" animations - not continuous gestures.
- Hit detection will not work as expected because animations occur on
the presentation layer.
```javascript
var AnimationExperimental = require('AnimationExperimental');
var App = React.createClass({
componentDidMount() {
AnimationExperimental.startAnimation(
{
node: this._box,
duration: 1000,
easing: 'easeInOutBack',
property: 'scaleXY',
toValue: { x: 1, y: 1 },
},
);
},
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<View ref={component => this._box = component}
style={{width: 200, height: 200, backgroundColor: 'red'}} />
</View>
)
},
});
```
![](/react-native/img/AnimationExperimentalScaleXY.gif)
Now to demonstrate a known issue, and one of the reasons why it is
recommended not to use `AnimationExperimental` currently, let's try to
animate `opacity` from 1 to 0.5:
```javascript
AnimationExperimental.startAnimation(
{
node: this._box,
duration: 1000,
easing: 'easeInOutBack',
property: 'opacity',
fromValue: 1,
toValue: 0.5,
},
);
```
![](/react-native/img/AnimationExperimentalOpacity.gif)
### Pop *(Unsupported, not recommended)*
[Facebook Pop](https://github.com/facebook/pop) "supports spring and
decay dynamic animations, making it useful for building realistic,
physics-based interactions."
This is not officially supported or recommended because the direction is
to move towards JavaScript-driven animations, but if you must use it,
you can find the code to integrate with React Native
[here](https://github.com/facebook/react-native/issues/1365#issuecomment-104792251).
Please do not open questions specific to Pop on the React Native issues,
StackOverflow is a better place to answer those questions as it is not
considered to be part of the core.