diff --git a/releases/next/docs/animated.html b/releases/next/docs/animated.html index 4e02d6719b8..91b14b07fe0 100644 --- a/releases/next/docs/animated.html +++ b/releases/next/docs/animated.html @@ -95,58 +95,10 @@ then calls setValue on the mapped outputs. e.g.

: Animated.event([ null, // raw event arg ignored {dx: this._panX}, // gestureState arg - ]),

Config is an object that may have the following options:

static createAnimatedComponent(Component) #

Make any React component Animatable. Used to create Animated.View, etc.

static attachNativeEvent(viewRef, eventName, argMapping) #

Imperative API to attach an animated value to an event on a view. Prefer using -Animated.event with useNativeDrive: true if possible.

static forkEvent(event, listener) #

Advanced imperative API for snooping on animated events that are passed in through props. Use -values directly where possible.

static unforkEvent(event, listener) #

Properties #

Value: AnimatedValue #

Standard value class for driving animations. Typically initialized with -new Animated.Value(0);

See also AnimatedValue.

ValueXY: AnimatedValueXY #

2D value class for driving 2D animations, such as pan gestures.

See also AnimatedValueXY.

Interpolation: AnimatedInterpolation #

exported to use the Interpolation type in flow

See also AnimatedInterpolation.

Node: Animated #

Exported for ease of type checking. All animated values derive from this class.

class AnimatedValue #

Standard value for driving animations. One Animated.Value can drive -multiple properties in a synchronized fashion, but can only be driven by one -mechanism at a time. Using a new mechanism (e.g. starting a new animation, -or calling setValue) will stop any previous ones.

Methods #

constructor(value) #

setValue(value) #

Directly set the value. This will stop any animations running on the value -and update all the bound properties.

setOffset(offset) #

Sets an offset that is applied on top of whatever value is set, whether via -setValue, an animation, or Animated.event. Useful for compensating -things like the start of a pan gesture.

flattenOffset() #

Merges the offset value into the base value and resets the offset to zero. -The final output of the value is unchanged.

extractOffset() #

Sets the offset value to the base value, and resets the base value to zero. -The final output of the value is unchanged.

addListener(callback) #

Adds an asynchronous listener to the value so you can observe updates from -animations. This is useful because there is no way to -synchronously read the value because it might be driven natively.

removeListener(id) #

removeAllListeners() #

stopAnimation(callback?) #

Stops any running animation or tracking. callback is invoked with the -final value after stopping the animation, which is useful for updating -state to match the animation position with layout.

resetAnimation(callback?) #

Stops any animation and resets the value to its original

interpolate(config) #

Interpolates the value before updating the property, e.g. mapping 0-1 to -0-10.

animate(animation, callback) #

Typically only used internally, but could be used by a custom Animation -class.

stopTracking() #

Typically only used internally.

track(tracking) #

Typically only used internally.

class AnimatedValueXY #

2D Value for driving 2D animations, such as pan gestures. Almost identical -API to normal Animated.Value, but multiplexed. Contains two regular -Animated.Values under the hood.

Example #

class DraggableView extends React.Component { - constructor(props) { - super(props); - this.state = { - pan: new Animated.ValueXY(), // inits to zero - }; - this.state.panResponder = PanResponder.create({ - onStartShouldSetPanResponder: () => true, - onPanResponderMove: Animated.event([null, { - dx: this.state.pan.x, // x,y are Animated.Value - dy: this.state.pan.y, - }]), - onPanResponderRelease: () => { - Animated.spring( - this.state.pan, // Auto-multiplexed - {toValue: {x: 0, y: 0}} // Back to zero - ).start(); - }, - }); - } - render() { - return ( - <Animated.View - {...this.state.panResponder.panHandlers} - style={this.state.pan.getLayout()}> - {this.props.children} - </Animated.View> - ); - } - }

Methods #

constructor(valueIn?) #

setValue(value) #

setOffset(offset) #

flattenOffset() #

extractOffset() #

resetAnimation(callback?) #

stopAnimation(callback?) #

addListener(callback) #

removeListener(id) #

removeAllListeners() #

getLayout() #

Converts {x, y} into {left, top} for use in style, e.g.

style={this.state.anim.getLayout()}

getTranslateTransform() #

Converts {x, y} into a useable translation transform, e.g.

style={{ - transform: this.state.anim.getTranslateTransform() - }}

class AnimatedInterpolation #

Methods #

constructor(parent, config) #

interpolate(config) #

class Animated #

// Note(vjeux): this would be better as an interface but flow doesn't -// support them yet

Methods #

toJSON() #

Improve this page by sending a pull request!

← PrevNext →