{bothProps.map((props, index, arr) => {
const isParent = index === 0
const transitioning = arr.length > 1
return (
<Animated.View
key={props.location.pathname}
style={{
opacity: (
!transitioning ? (
1
) : isParent ? (
this.animation.interpolate({
inputRange: [ 0, width ],
outputRange: [ 0, 1 ]
})
) : (
this.animation.interpolate({
inputRange: [ 0, width ],
outputRange: [ 1, 0 ]
})
)
),
flexDirection: 'row', alignItems: 'center', position: 'absolute', top: 0, left: 0, right: 0, bottom: 0
}}
>
<View style={{ width: 30 }}>
{props.parentLocation ? props.backButton : <Text> </Text>}
</View>
<View style={{ flex: 1 }}>
{props.title}
</View>
<View style={{ width: 30 }}/>
</Animated.View>
)
})}
getRewardCoin(amount, currency) {
var currencySymbol = null;
if(currency==='cent'){
currencySymbol='ยข';
}
if(currency==='dollar'){
currencySymbol='$';
}
this.anim = new Animated.Value(0);
var animateFlip = this.anim.interpolate({
inputRange: [0,1],
outputRange: ['0deg','720deg'],
});
var animateY = this.anim.interpolate({
inputRange: [0,1],
outputRange: [0, (height+10)],
});
return(
<Animated.View style={[styles.rewardCoin, {transform:[
{skewY: animateFlip}, {translateY: animateY}
]}]}>
<Text style={styles.rewardAmount}>{amount}</Text>
<Text style={styles.rewardCurrency}>{currencySymbol}</Text>
</Animated.View>
);
}
render() {
const { post, i, focused, onPressPost } = this.props;
const { pos } = this;
const translateX = pos.interpolate({
inputRange: [-1, 0, 1],
outputRange: [-Constants.screen.width, 0, Constants.screen.width],
});
const scale = pos.interpolate({
inputRange: [-1, 0, 1],
outputRange: [0.2, 0.8, 0.2],
});
const rotate = `${(4 * Math.cos(i * 11)).toFixed(0)}deg`;
return (
<Animated.View
style={{
position: 'absolute',
transform: [{ translateX }, { rotate }, { scale }],
}}
>
<FeedItem
item={post}
size={Constants.screen.width}
onPressPost={onPressPost}
/>
</Animated.View>
);
}
render() {
return (
<ScrollView contentContainerStyle={styles.container}>
<Animated.Text
style={[
styles.text,
{
fontSize: this.animatedValue.interpolate({
inputRange: [-1, 0, 1],
outputRange: [40, 20, 40]}),
}
]}
>
{'Example Text'}
</Animated.Text>
<Animated.View
style={[
styles.bigSquare,
{
left: this.animatedValue.interpolate({
inputRange: [-1, 0, 1],
outputRange: [0, SCREEN_WIDTH, 0]}),
}
]}
/>
<TouchableHighlight onPress={() => this._animate(-1, 0)} underlayColor={'white'}>
<Text>{' Touch to animate forward '}</Text>
</TouchableHighlight>
<TouchableHighlight onPress={() => this._animate(0, 1)} underlayColor={'white'}>
<Text>{' Touch to animate back '}</Text>
</TouchableHighlight>
</ScrollView>
);
}
render(){
var interpolatedColorAnimation = this._animatedValue.interpolate({
inputRange: [0, 100],
outputRange: ['rgba(255,255,255, 1)', 'rgba(51,156,177, 1)']
});
var interpolatedRotateAnimation = this._animatedValue.interpolate({
inputRange: [0, 100],
outputRange: ['0deg', '360deg']
});
return (
<View style={styles.container}>
<View style={styles.banner}>
<Text style={styles.title}>Animated Squares</Text>
</View>
<Animated.View
style={[styles.box1, {backgroundColor: interpolatedColorAnimation}]}
/>
<Animated.View
style={[styles.box2, {transform: [
{rotate: interpolatedRotateAnimation}
]}]}
/>
</View>
)
}
render() {
return (
<View style={styles.container}>
<Interactable.View style={styles.container}
horizontalOnly={true}
snapPoints={[
{x: 390},
{x: 0, damping: 0.8},
{x: -390}
]}
animatedValueX={this._deltaX}>
<Animated.View style={[styles.card, {
transform: [{
rotate: this._deltaX.interpolate({
inputRange: [-250, 0, 250],
outputRange: ['10deg', '0deg', '-10deg']
})
}]
}]}>
<Image style={styles.image} source={require('../../assets/tinder-photo.jpg')} />
<Animated.View style={[styles.overlay, {backgroundColor: '#de6d77'}, {
opacity: this._deltaX.interpolate({
inputRange: [-120, 0],
outputRange: [0.8, 0],
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp'
})
}]}>
<Text style={styles.overlayText}>Trash</Text>
</Animated.View>
<Animated.View style={[styles.overlay, {backgroundColor: '#2f9a5d'}, {
opacity: this._deltaX.interpolate({
inputRange: [0, 120],
outputRange: [0, 0.8],
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp'
})
}]}>
<Text style={styles.overlayText}>Keep</Text>
</Animated.View>
</Animated.View>
</Interactable.View>
<View style={{marginBottom: 40}}>
<Text style={styles.text}>Swipe LEFT to trash</Text>
<Text style={styles.text}>or RIGHT to keep</Text>
</View>
</View>
);
}
/*
* Set the animation transformation depending on the chosen animationType, or depending on the state's position if animationType is not overridden
*/
_apllyAnimationTypeTransformation() {
let position = this.state.position;
let animationType = this.state.animationType;
if (animationType === undefined) {
if (position === 'bottom') {
animationType = 'SlideFromBottom';
} else {
// Top by default
animationType = 'SlideFromTop';
}
}
switch (animationType) {
case 'SlideFromTop':
var animationY = this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [-windowHeight, 0]
});
this.animationTypeTransform = [{ translateY: animationY }];
break;
case 'SlideFromBottom':
var animationY = this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [windowHeight, 0]
});
this.animationTypeTransform = [{ translateY: animationY }];
break;
case 'SlideFromLeft':
var animationX = this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [-windowWidth, 0]
});
this.animationTypeTransform = [{ translateX: animationX }];
break;
case 'SlideFromRight':
var animationX = this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [windowWidth, 0]
});
this.animationTypeTransform = [{ translateX: animationX }];
break;
default:
var animationY = this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [-windowHeight, 0]
});
this.animationTypeTransform = [{ translateY: animationY }];
break;
}
}
render() {
return (
<View style={styles.container}>
<View style={{backgroundColor: 'red', height: 250, alignItems: 'center'}}>
<Animated.View style={{
transform: [
{
translateY: this._deltaY.interpolate({
inputRange: [-150, -150, 0, 0],
outputRange: [-58, -58, 0, 0]
})
},
{
scale: this._deltaY.interpolate({
inputRange: [-150, -150, 0, 0],
outputRange: [0.35, 0.35, 1, 1]
})
}
]
}}>
<View style={{width: 150, height: 150, backgroundColor: 'blue', borderRadius: 75, marginTop: 50}} />
</Animated.View>
</View>
<Interactable.View
verticalOnly={true}
snapPoints={[{y: 0}, {y: -150, id: 'bottom'}]}
boundaries={{top: -150}}
onSnap={this.onSnap.bind(this)}
animatedValueY={this._deltaY}>
<ScrollView
bounces={false}
canCancelContentTouches={this.state.canScroll}
onScroll={this.onScroll.bind(this)}
style={{left: 0, right: 0, height: Screen.height - 100, backgroundColor: '#e0e0e0'}}>
<View style={styles.placeholder} />
<View style={styles.placeholder} />
<View style={styles.placeholder} />
<View style={styles.placeholder} />
<View style={styles.placeholder} />
<View style={styles.placeholder} />
<View style={styles.placeholder} />
</ScrollView>
</Interactable.View>
</View>
);
}
componentWillMount() {
this.animatedValue = new Animated.Value(0);
this.value = 0;
this.animatedValue.addListener(({ value }) => {
this.value = value;
})
this.frontInterpolate = this.animatedValue.interpolate({
inputRange: [0, 180],
outputRange: ['0deg', '180deg'],
})
this.backInterpolate = this.animatedValue.interpolate({
inputRange: [0, 180],
outputRange: ['180deg', '360deg']
})
}
render() {
const props = this.props
const { isStickied } = this.state
const { onLayout, headerText, actionComponent } = props
let floatingContainerStyle = Object.assign(S.containers.header, S.navigation.floatingHeader)
let stickiedContainerStyle = S.navigation.stickiedHeader
if (Platform.OS == 'android') {
floatingContainerStyle = Object.assign(floatingContainerStyle, S.navigation.floatingHeaderAndroid)
stickiedContainerStyle = Object.assign(stickiedContainerStyle, S.navigation.stickiedHeaderAndroid)
}
const backgroundColor = this.animation.interpolate({
inputRange: [0, 1],
outputRange: [stickiedContainerStyle.backgroundColor, floatingContainerStyle.backgroundColor]
});
const containerStyle = [props.style, S.containers.header, isStickied ? stickiedContainerStyle : floatingContainerStyle, {backgroundColor}]
const headerTextStyle = S.navigation.floatingHeaderTextStyle
const stickiedHeaderTextStyle = S.navigation.stickiedHeaderTextStyle
const textStyle = isStickied ? stickiedHeaderTextStyle : headerTextStyle
const fontSize = isStickied ? stickiedHeaderTextStyle.fontSize : headerTextStyle.fontSize
return (
<View style={{paddingBottom:4}}>
<Animated.View onLayout={onLayout} style={containerStyle}>
<Animatable.Text transition="fontSize" style={[textStyle, {fontSize}]}>
{headerText}
</Animatable.Text>
</Animated.View>
</View>
)
}
_setupAnimations(dimensions) {
const { visibleHeight } = dimensions
// vMoveY
this._vMoveY = new Animated.Value(0)
// vTranslateY
const inputRange = [0, visibleHeight]
const outputRange = [this.props.grippableBarHeight - visibleHeight, 0]
this._vTranslateY = this._vMoveY.interpolate({
inputRange: inputRange,
outputRange: outputRange,
extrapolate: 'clamp',
})
// Animations
this._upwardsAnimation = Animated.timing(this._vMoveY, {
toValue: 0,
duration: 500,
easing: Easing.out(Easing.exp),
})
this._downwardsAnimation = Animated.timing(this._vMoveY, {
toValue: visibleHeight,
duration: 500,
easing: Easing.out(Easing.exp),
})
}
render() {
const {
containerStyle,
inputStyle,
containerRef,
normalizeFontSize,
...attributes
} = this.props;
const translateX = this.shakeAnimationValue.interpolate({
inputRange: [0, 0.5, 1, 1.5, 2, 2.5, 3],
outputRange: [0, -15, 0, 15, 0, -15, 0],
});
return (
<Animated.View
ref={containerRef}
style={[
styles.container,
containerStyle && containerStyle,
{
transform: [{ translateX }],
},
]}
>
<TextInput
{...attributes}
ref={this.getRefHandler()}
style={[
styles.input,
{ fontSize: normalizeFontSize ? normalize(14) : 14 },
inputStyle && inputStyle,
]}
/>
</Animated.View>
);
}
render() {
const interpolateColor = this.animatedPlusBarBackgroundColor.interpolate({
inputRange: [ 0, 150 ],
outputRange: [ 'rgba(157, 173, 183,1)', 'rgba(255,255,255,1)' ],
})
const animatedPlusBarStyle = {
transform: [ { translateY: this.animatedPlusBarYValue } ],
width: this.animatedPlusBarWidthValue,
backgroundColor: interpolateColor,
}
const animatedCircleStyle = {
opacity: this.animatedCircleOpacityValue,
transform: [
{ scale: this.animatedCircleScaleValue },
],
}
return (
<View style={styles.container}>
<TouchableWithoutFeedback
onPressIn={this.handlePressIn}
onPressOut={this.handlePressOut}
>
<Animated.View style={[ styles.plusBar1 ]}>
<Animated.View style={[ styles.plusBar2, animatedPlusBarStyle ]}>
<Animated.View style={[ styles.circle, animatedCircleStyle ]}/>
</Animated.View>
</Animated.View>
</TouchableWithoutFeedback>
</View>
)
}
render() {
const { todos, actions, formData, condition } = this.props;
const changeWidth = this.buttonAnimated.interpolate({
inputRange: [0, 1],
outputRange: [DEVICE_WIDTH - MARGIN, MARGIN]
});
return (
<View style={styles.container}>
<Animated.View style={{width: changeWidth}}>
<TouchableOpacity style={styles.button}
onPress={this._onPress}
activeOpacity={1} >
{condition.isLoading ?
<Image source={spinner} style={styles.image} />
:
<Text style={styles.text}>LOGIN</Text>
}
</TouchableOpacity>
</Animated.View>
<ToSignup {...this.props} />
</View>
);
}
componentDidMount(){
var test=new Animated.Value(1);
var result=test.interpolate({
inputRange: [0,1],
outputRange:[2,8]
});
console.log(result);
}
constructor(props) {
super(props);
this._yAnimation = new Animated.Value(0);
this.color = this.randomColor(this.props.colors);
this.left = this.randomValue(0, windowWidth);
let rotationOutput = this.randomValue(-220, 220) + 'deg';
this._rotateAnimation = this._yAnimation.interpolate({
inputRange: [0, windowHeight / 2, windowHeight],
outputRange: ['0deg', rotationOutput, rotationOutput]
});
let xDistance = this.randomIntValue((windowWidth / 3 * -1), windowWidth / 3);
this._xAnimation = this._yAnimation.interpolate({
inputRange: [0, windowHeight],
outputRange: [0, xDistance]
});
}
getProgressStyles() {
var animated_width = this.progress.interpolate({
inputRange: [0, 50, 100],
outputRange: [0, available_width / 2, available_width]
});
const color_animation = this.progress.interpolate({
inputRange: [0, 50, 100],
outputRange: ['rgb(199, 45, 50)', 'rgb(224, 150, 39)', 'rgb(101, 203, 25)']
});
return {
width: animated_width,
height: 50,
backgroundColor: color_animation
}
}
render () {
return (
<TouchableWithoutFeedback onPress = {this.onChange.bind(this)}>
<View style = {styles.container}>
<View
style = {{
transform: [{
rotate: '-45deg'
}, {
translateY: -1
}, {
translateX: 1
}],
backgroundColor: 'transparent',
width: 13,
height: 13
}}
>
<Animated.View style = {{
position: 'absolute',
left: 0,
top: 2,
width: 3,
height: this.firstStrokeLength.interpolate({
inputRange: [0, 1],
outputRange: [0, 6]
}),
backgroundColor: 'blue'
}}></Animated.View>
<Animated.View style = {{
position: 'absolute',
left: 0,
top: 8,
width: this.secondStrokeLength.interpolate({
inputRange: [0, 1],
outputRange: [0, 12]
}),
height: 3,
backgroundColor: 'blue'
}}></Animated.View>
</View>
</View>
</TouchableWithoutFeedback>
);
}
stylesCopy.forEach(style => {
if(style && style.transform) {
const ri = getRotationFromStyle(style);
if(ri.rotate) {
if(ri.rotate.rotate && (typeof ri.rotate.rotate) === 'string')
style.transform.find(t => Object.keys(t)[0] === 'rotate').rotate =
a.interpolate({inputRange: [0, 1],
outputRange: [ri.rotate.rotate, '0deg']});
if(ri.rotate.rotateX && (typeof ri.rotate.rotateX) === 'string')
style.transform.find(t => Object.keys(t)[0] === 'rotateX').rotateX =
a.interpolate({inputRange: [0, 1],
outputRange: [ri.rotateX.rotateX, '0deg']});
if(ri.rotate.rotateY && (typeof ri.rotate.rotateY) === 'string')
style.transform.find(t => Object.keys(t)[0] === 'rotateY').rotateY =
a.interpolate({inputRange: [0, 1],
outputRange: [ri.rotateY.rotateY, '0deg']});
}
}
})
componentWillMount() {
this._animatedValue = new Animated.Value(1);
this._animatedValue.addListener(({value}) => {
if (value == 2) {
this.setState({showPage: true});
}
});
this._opanimatedValue = this._animatedValue.interpolate({
inputRange: [1, 2],
outputRange: [1, 0],
});
}
render: function() {
let anim = new Animated.Value(0);
return (
<View>
<UIExplorerButton onPress={() => {
Animated.spring(anim, {
toValue: 0, // Returns to the start
velocity: 3, // Velocity makes it move
tension: -10, // Slow
friction: 1, // Oscillate a lot
}).start();
}
}>
Press to Fling it!
</UIExplorerButton>
<Animated.View
style={[styles.content, {
transform: [ // Array order matters
{scale: anim.interpolate({
inputRange: [0, 1],
outputRange: [1, 4],
})},
{translateX: anim.interpolate({
inputRange: [0, 1],
outputRange: [0, 500],
})},
{rotate: anim.interpolate({
inputRange: [0, 1],
outputRange: [
'0deg', '360deg' // 'deg' or 'rad'
],
})},
]}
]}>
<Text>Transforms!</Text>
</Animated.View>
</View>
);
}
{bothProps.map((props, index, arr) => {
const isParent = index === 0;
const transitioning = arr.length > 1;
return (
<Animated.View
key={props.location.pathname}
style={{
opacity: !transitioning
? 1
: isParent
? this.animation.interpolate({
inputRange: [0, width],
outputRange: [0, 1]
})
: this.animation.interpolate({
inputRange: [0, width],
outputRange: [1, 0]
}),
flexDirection: "row",
alignItems: "center",
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0
}}
>
<View style={{ width: 30 }}>
{props.parentLocation ? (
props.backButton
) : (
<Text> </Text>
)}
</View>
<View style={{ flex: 1 }}>{props.title}</View>
<View style={{ width: 30 }} />
</Animated.View>
);
})}
render() {
const changeWidth = this.buttonAnimated.interpolate({
inputRange: [0,1],
outputRange: [DEVICE_WIDTH - MARGIN, MARGIN]
});
const changeScale = this.growAnimated.interpolate({
inputRange: [0, 1],
outputRange: [1, MARGIN]
});
return(
<View style={styles.container}>
<Animated.View style={{width: changeWidth}}>
<TouchableOpacity style={styles.button} onPress={this._onPress} activeOpacity={1}>
{this.state.isLoading ?
<Image source={spinner} style={styles.image} /> :
<Text style={styles.text}>LOGIN</Text>
}
</TouchableOpacity>
<Animated.View style={[ styles.circle, {transform: [{scale: changeScale}]} ] } />
</Animated.View>
</View>
);
}
constructor(props) {
super(props)
this._active = new Animated.Value(0)
this._style = {
...Platform.select({
ios: {
shadowOpacity: this._active.interpolate({
inputRange: [0, 1],
outputRange: [0, 0.2],
}),
shadowRadius: this._active.interpolate({
inputRange: [0, 1],
outputRange: [2, 10],
}),
},
android: {
marginTop: this._active.interpolate({
inputRange: [0, 1],
outputRange: [0, 10],
}),
marginBottom: this._active.interpolate({
inputRange: [0, 1],
outputRange: [0, 10],
}),
elevation: this._active.interpolate({
inputRange: [0, 1],
outputRange: [2, 6],
}),
},
})
}
this._noTouched = false
}
render() {
const spin = this.spinValue.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg']
})
return (
<TouchableOpacity style={{ marginRight: 20, transform: [{rotate: spin}] }} onPress={ () => { this.spin() } }>
<Image
source={require('../../Assets/icons/refresh.png')}
style={{ height: 24, width: 24, tintColor: '#D3D3D3' }}
/>
</TouchableOpacity>
)
}
_renderBadge(){
const { badge, color, size, pressed } = this.state;
return (size && badge && typeof badge.value === 'number' &&
<Animated.View style={[
styles.badgeContainer, {
backgroundColor: badge.backgroundColor,
top: size / 10,
right: size / 10,
transform: [ // Array order matters
{scale: this.badgeAnim.interpolate({
inputRange: [0, 1],
outputRange: [1, 1.25]
})},
{translateX: this.badgeAnim.interpolate({
inputRange: [0, 1],
outputRange: [0, -6]
})},
{translateY: this.badgeAnim.interpolate({
inputRange: [0, 1],
outputRange: [0, 5]
})},
{rotate: this.badgeAnim.interpolate({
inputRange: [0, 1],
outputRange: [
'0deg', '45deg' // 'deg' or 'rad'
]
})}
]}]}>
<View style={{ flex: 1, justifyContent: 'center' }}>
<Text style={[styles.badgeText, { color: badge.textColor }, badge.value > 99 ? { fontSize: 8 } : { fontSize: 10 }]}>
{badge.value}
</Text>
</View>
</Animated.View>
)
}
render() {
var interpolatedColorAnimation = this._animatedValue.interpolate({
inputRange: [0, 100],
outputRange: ['rgba(255,255,255, 1)', 'rgba(51,156,177, 1)']
});
return (
<Animated.View style={[styles.container, {backgroundColor: interpolatedColorAnimation}]}>
<Animated.Text style={[styles.welcome, {fontSize: this._textAnimatedValue}]}>dohu</Animated.Text>
<TouchableHighlight
style={styles.button}
onPress={this.start.bind(this)}>
<Text style={styles.label}>Quiz</Text>
</TouchableHighlight>
</Animated.View>
);
}
// render the specified part (left or right) of the arc
_renderSpinnerLayer(left) {
const { width, height } = this.state.dimen;
const radii = width / 2;
const arcStyle = {
width,
height,
position: 'absolute',
borderColor: this.state.strokeColor,
borderBottomColor: MKColor.Transparent,
borderRadius: radii,
borderWidth: this.props.strokeWidth || 3,
};
if (!width || !height) {
return undefined;
}
let arcInterpolate;
if (left) {
arcInterpolate = L_ARC_ROTATE_INTERP;
arcStyle.borderRightColor = MKColor.Transparent;
} else {
arcInterpolate = R_ARC_ROTATE_INTERP;
arcStyle.right = 0;
arcStyle.borderLeftColor = MKColor.Transparent;
}
arcStyle.transform = [
{ rotate: this._animatedArcAngle.interpolate(arcInterpolate) },
];
return (
<View // the clipper layer
style={{
height,
width: radii,
overflow: 'hidden',
position: 'absolute',
left: left ? 0 : radii,
}}
>
<Animated.View // the arc
style={arcStyle}
/>
</View>
);
}
render() {
const changeScale = this.growAnimated.interpolate({
inputRange: [0, 1],
outputRange: [1, SIZE]
});
return (
<View style={styles.container}>
<TouchableOpacity onPress={this._onPress}
style={styles.button}
activeOpacity={1}>
<Image source={arrowImg} style={styles.image} />
</TouchableOpacity>
<Animated.View style={[ styles.circle, {transform: [{scale: changeScale}]} ]} />
</View>
);
}
render() {
return (
<View style={styles.container}>
<Image style={styles.map} source={require('../../assets/map-bg.jpg')} />
<View style={styles.panelContainer} pointerEvents={'box-none'}>
<Animated.View
pointerEvents={'box-none'}
style={[styles.panelContainer, {
backgroundColor: 'black',
opacity: this._deltaY.interpolate({
inputRange: [0, Screen.height-100],
outputRange: [0.5, 0],
extrapolateRight: 'clamp'
})
}]} />
<Interactable.View
verticalOnly={true}
snapPoints={[{y: 40}, {y: Screen.height-300}, {y: Screen.height-100}]}
boundaries={{top: -300}}
initialPosition={{y: Screen.height-100}}
animatedValueY={this._deltaY}>
<View style={styles.panel}>
<View style={styles.panelHeader}>
<View style={styles.panelHandle} />
</View>
<Text style={styles.panelTitle}>San Francisco Airport</Text>
<Text style={styles.panelSubtitle}>International Airport - 40 miles away</Text>
<View style={styles.panelButton}>
<Text style={styles.panelButtonTitle}>Directions</Text>
</View>
<View style={styles.panelButton}>
<Text style={styles.panelButtonTitle}>Search Nearby</Text>
</View>
<Image style={styles.photo} source={require('../../assets/airport-photo.jpg')} />
</View>
</Interactable.View>
</View>
</View>
);
}