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] }); }