Created
March 14, 2018 16:52
-
-
Save pangolingo/cc0612d7fbce9bbb076283d3bc4c88d9 to your computer and use it in GitHub Desktop.
An example of how to interpolate animation properties based on a base Animated.Value
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let baselineAnimationValue = new Animated.Value(0); | |
let titleXPosition = new Animated.Value(0); | |
let titleOpacity = new Animated.Value(0); | |
// our baseline animation, going from 0 to 1 | |
function runBaselineAnimation() { | |
Animated.timing(this.state.baselineAnimationValue, { | |
toValue: 1, | |
duration: 2000, // 2 seconds | |
}).start(); | |
} | |
// move the title up as the animation runs | |
function titleYPosition() { | |
return baselineAnimatedValue.interpolate({ | |
inputRange: [0.0, 1.0], | |
outputRange: [0, -42], // animated between 0 and -42 | |
extrapolate: 'clamp', | |
} | |
} | |
// fade the title as the animation runs | |
function opacity() { | |
return baselineAnimatedValue.interpolate({ | |
inputRange: [0.0, 1.0], | |
outputRange: [1.0, 0.5], // animate between 1 and 0.5 | |
extrapolate: 'clamp', | |
} | |
} | |
<Title style={{opacity: titleOpacity(), transform: [{ translateY: titleYPosition() }] /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment