Animated API • Has been designed to make it very easy to concisely express a wide variety of interesting animation and interaction patterns in a very performant way.
• Animated values bypass the usual render method, so they get updated even though there is no state change.
• Animated exports four animatable component types: View, Text, Image and ScrollView.
Static Drivers • There are 3 different animation types, also known as static drivers: timing, spring, decay • Each type provides a particular animation curve that controls how your values animate from their initial to the final value.
Steps to perform animation • 1. Create animated value: const translateX = new Animated.Value(0); • 2. Bind the value to the Animated View (inside Render)
• 3. Run the animation with the static driver Animated.timing(translateX, { toValue: 50, duration: 1000 }).start();
Interpolating to strings • Can interpolate to strings, provided that the string contains at least one number or is a color. • Numbers in the string are parsed and interpolated, then wrapped back in string again.
• For rotation, we can use degrees or radians, i.e “360deg” or “1rad”
Using the native driver • Rather than calling into JS every frame to update an animation, declare the animation configuration in JS and execute in UI thread on native.
• As a consequence, JS thread can be blocked without affecting the animation.
• Just add useNativeDriver: true to the animation config when starting it. Animated.timing(this.progress, { toValue: 1, duration: 1000, useNativeDriver: true // Add this line }).start();
Native driver caveats • You can only animate non-layout properties
• Things like transform and opacity will work, but flexbox and position properties will not
• That’s why we were using transformX for moving the box horizontally.
• Still without using native driver, animating transformX is more efficient than animating left, because with the former, the layout doesn’t have to be recalculated every frame
Exercise 4 • Animate a button to emphasise active state, by scaling it up and down. The pressed state should scale it down 10% Hint: use onPressIn and onPressOut
Value Interpolation Number Views View Image Text ScrollView etc… subscribe to value updates value set value Driver Event driver Static driver Interpolation @notbrent
Value Interpolation Number value Views View Image Text ScrollView etc… Driver Event driver Static driver value subscribe to Value updates subscribe to Interpolated value updates @notbrent
Value Interpolation Number value Views View Image Text ScrollView etc… value subscribe to Value updates subscribe to Interpolated value updates set value Driver Event driver Static driver @notbrent
Pan Responder It holds an InteractionManager handle to block long-running JS events from interrupting active gestures gestureState = { dx, dy, vx, vy, ... }
rgommezz
ryohatanmonolog
kawaguti
optim
m3hiro3
victorrentea
watany
hosimesi11
ryomaru0825
whywaita
isaoshimizu
matsujirushi
jponch
csswizardry
marktimemedia
lara
shpigford
nonsquared
marcelosomers
hursman
pauljervisheath
scottboms
kneath
62gerente