animate() {
this.bigBubbleValue.setValue(0);
this.mediumBubbleValue.setValue(0);
this.smallBubbleValue.setValue(0);
Animated.parallel([
Animated.timing(this.bigBubbleValue, {
toValue: 1,
duration: 9000,
easing: Easing.linear,
useNativeDriver: true,
}),
Animated.timing(this.mediumBubbleValue, {
toValue: 1,
duration: 8500,
delay: 1000,
easing: Easing.inOut(Easing.ease),
useNativeDriver: true,
}),
Animated.timing(this.smallBubbleValue, {
toValue: 1,
duration: 6000,
delay: 400,
easing: Easing.inOut(Easing.ease),
useNativeDriver: true,
}),
]).start(() => this.animate());
}
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>
)
}
// Start the ripple effect
showRipple() {
this._animatedAlpha.setValue(1);
this._animatedRippleScale.setValue(0.3);
// scaling up the ripple layer
this._rippleAni = Animated.timing(this._animatedRippleScale, {
toValue: 1,
useNativeDriver: true,
duration: this.props.rippleDuration || 200,
});
// enlarge the shadow, if enabled
if (this.props.shadowAniEnabled) {
this.setState({ shadowOffsetY: 1.5 });
}
this._rippleAni.start(() => {
this._rippleAni = undefined;
// if any pending animation, do it
if (this._pendingRippleAni) {
this._pendingRippleAni();
}
});
}
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>
);
}
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>
);
}
updateIndicator() {
if (!this._indicatorX || !this._indicatorWidth) return;
let indicatorXValue = this.indicatorXValue;
let indicatorWidthValue = this.indicatorWidthValue;
if (indicatorXValue === this._saveIndicatorXValue
&& indicatorWidthValue === this._saveIndicatorWidthValue) {
return;
}
this._saveIndicatorXValue = indicatorXValue;
this._saveIndicatorWidthValue = indicatorWidthValue;
if (this.props.animated) {
Animated.parallel([
Animated.spring(this._indicatorX, {toValue: indicatorXValue, friction: 9}),
Animated.spring(this._indicatorWidth, {toValue: indicatorWidthValue, friction: 9}),
]).start();
} else {
this._indicatorX.setValue(indicatorXValue);
this._indicatorWidth.setValue(indicatorWidthValue);
}
if (this.props.autoScroll && this.refs.scrollView) {
let contextWidth = 0;
this._buttonsLayout.map(item => contextWidth += item.width);
let x = indicatorXValue + indicatorWidthValue / 2 - this._scrollViewWidth / 2;
if (x < 0) {
x = 0;
} else if (x > contextWidth - this._scrollViewWidth) {
x = contextWidth - this._scrollViewWidth;
}
this.refs.scrollView.scrollTo({x: x, y: 0, animated: this.props.animated});
}
}
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>
);
}
onPanResponderRelease: (e, g) => {
const { panStartLeft } = this.state
const { width } = Dimensions.get('window')
const releaseRatio = g.moveX/width
const isCancel = g.vx < CANCEL_PAN_VX_THRESHOLD && releaseRatio < CANCEL_PAN_MOVE_THRESHOLD
if (isCancel) {
this.animation.setValue(g.moveX - panStartLeft)
this.setState({
panning: false,
cancelingPan: true
}, () => {
Animated.timing(this.animation, {
toValue: 0,
duration: releaseRatio * ANIMATION_DURATION + 2000
}).start(({ finished }) => {
this.props.onCancelPan()
})
})
} else {
this.animation.setValue(g.moveX - panStartLeft)
this.setState({ panning: false }, () => {
Animated.timing(this.animation, {
toValue: width,
duration: (1-releaseRatio) * ANIMATION_DURATION + 2000
}).start(({ finished }) => {
this.setState({
previousProps: null
})
})
})
}
}
{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>
)
})}
_handlePanGestureStateChange = ({ nativeEvent }) => {
if (nativeEvent.oldState === State.ACTIVE) {
// Gesture was cancelled! For example, some navigation state update
// arrived while the gesture was active that cancelled it out
if (this.positionSwitch.__getValue() === 1) {
return;
}
if (this._isMotionVertical()) {
this._handleReleaseVertical(nativeEvent);
} else {
this._handleReleaseHorizontal(nativeEvent);
}
} else if (nativeEvent.state === State.ACTIVE) {
// Switch to using gesture position
this.positionSwitch.setValue(0);
// By enabling the gesture switch and ignoring the position here we
// end up with a quick jump to the initial value and then back to the
// gesture. While this isn't ideal, it's preferred over preventing new
// gestures during the animation (all gestures should be interruptible)
// and we will properly fix it (interruptible and from the correct position)
// when we integrate reanimated. If you prefer to prevent gestures during
// transitions, then fork this library, comment the positionSwitch value set above,
// and uncomment the following two lines.
// if (!this.props.transitionProps.position._animation) {
// this.positionSwitch.setValue(0);
// }
}
};
componentDidMount(){
var test=new Animated.Value(1);
var result=test.interpolate({
inputRange: [0,1],
outputRange:[2,8]
});
console.log(result);
}
onHandlerStateChange = ({nativeEvent}) => {
if (nativeEvent.oldState === GestureState.ACTIVE) {
const {translationY, velocityY} = nativeEvent;
const {allowStayMiddle} = this.props;
const {lastSnap} = this.state;
const isGoingDown = translationY > 0;
const translation = translationY - this.lastScrollYValue;
const endOffsetY = lastSnap + translation;
let destSnapPoint = this.snapPoints[0];
if (Math.abs(translationY) < 50 && allowStayMiddle) {
// Only drag the panel after moving 50 or more points
destSnapPoint = lastSnap;
} else if (isGoingDown && !allowStayMiddle) {
// Just close the panel if the user pans down and we can't snap to the middle
destSnapPoint = this.snapPoints[2];
} else if (isGoingDown) {
destSnapPoint = this.snapPoints.find((s) => s >= endOffsetY);
} else {
destSnapPoint = this.snapPoints.find((s) => s <= endOffsetY);
}
if (destSnapPoint) {
this.translateYOffset.extractOffset();
this.translateYOffset.setValue(translationY);
this.translateYOffset.flattenOffset();
this.dragY.setValue(0);
if (destSnapPoint === this.snapPoints[2]) {
this.closeWithAnimation();
} else {
Animated.spring(this.translateYOffset, {
velocity: velocityY,
tension: 68,
friction: 12,
toValue: destSnapPoint,
useNativeDriver: true,
}).start(() => {
this.setState({lastSnap: destSnapPoint});
// When dragging down the panel when is fully open reset the scrollView to the top
if (isGoingDown && destSnapPoint !== this.snapPoints[0]) {
this.scrollToTop();
}
});
}
} else {
Animated.spring(this.translateYOffset, {
velocity: velocityY,
tension: 68,
friction: 12,
toValue: lastSnap,
useNativeDriver: true,
}).start();
}
}
};
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>
);
}
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],
});
}
/*
* 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;
}
}
onPanResponderMove: (e) => {
var handlerWidth = this.getHandlerWidth();
var nextValue = e.nativeEvent.pageX - handlerWidth;
if (nextValue < 0) nextValue = 0;
if (nextValue + handlerWidth > 300) {
nextValue = 300 - handlerWidth;
}
this.panBg.setValue(nextValue);
//nextValue = nextValue - nextValue * this.panScale._value;
nextValue = nextValue / this.panScale._value + handlerWidth * this.panScale._value - handlerWidth / 2;
console.log(nextValue, this.panScale._value, handlerWidth);
//nextValue = nextValue + this.panScale._value * handlerWidth / 2;
this.pan.setValue(nextValue);
},
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),
})
}
/**
* The position at which the component is currently animated. May not be correct during the middle of an animation.
* @param {number} val
*/
set shownIndex (val) {
this._shownIndex = val;
this._location.setValue({x:val, y: val});
this._scale.setValue({x: val, y: val});
this._opacity.setValue(val);
return val;
}
onHeaderHandlerStateChange = ({nativeEvent}) => {
if (nativeEvent.oldState === GestureState.BEGAN) {
this.lastScrollY.setValue(0);
this.lastScrollYValue = 0;
}
this.onHandlerStateChange({nativeEvent});
};
componentWillUnmount() {
const { todos, actions, formData, condition } = this.props;
actions.changeCondition({ isLoading: false });
this.buttonAnimated.setValue(0);
actions.changeEmailLogin('');
actions.changePasswordLogin('');
}
_onActiveStateChange = active => {
if (Platform.OS !== 'android') {
this._opacity.setValue(active ? this.props.activeOpacity : 1);
}
this.props.onActiveStateChange && this.props.onActiveStateChange(active);
};
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>
);
}
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 {
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>
);
}
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
}
}
_onLayout = ({ nativeEvent: { layout: { width, height } } }) => {
if (width > 0 && this._totalLength !== width) {
this._totalLength = width;
this._height.setValue(height);
this._aniUpdateProgress(this.progress);
this._aniUpdateBuffer(this.buffer);
}
};
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]
});
}