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());
}
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
})
})
})
}
}
// 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();
}
});
}
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});
}
}
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();
}
}
};
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);
},
onHeaderHandlerStateChange = ({nativeEvent}) => {
if (nativeEvent.oldState === GestureState.BEGAN) {
this.lastScrollY.setValue(0);
this.lastScrollYValue = 0;
}
this.onHandlerStateChange({nativeEvent});
};
/**
* 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;
}
_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);
// }
}
};
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);
};
_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);
}
};
}, () => {
this.animation.setValue(0)
Animated.timing(this.animation, {
toValue: width,
duration: ANIMATION_DURATION
}).start(({ finished }) => {
this.setState({ previousProps: null })
})
})
// This optimizes the state update of current scrollY since we don't need to
// perform any updates when user has scrolled past the pivot point.
_maybeUpdateScrollPosition(e) {
const { parallaxHeaderHeight, stickyHeaderHeight } = this.props
const { scrollY } = this
const { nativeEvent: { contentOffset: { y: offsetY } } } = e
const p = pivotPoint(parallaxHeaderHeight, stickyHeaderHeight)
if (offsetY <= p || scrollY._value <= p) {
scrollY.setValue(offsetY)
}
}
shake() {
const { shakeAnimationValue } = this;
shakeAnimationValue.setValue(0);
Animated.timing(shakeAnimationValue, {
duration: 375,
toValue: 3,
ease: Easing.bounce,
}).start();
}
// Move the thumb left or right according to the current state
_translateThumb() {
this._animatedThumbLeft.setValue(this.state.thumbFrame.x);
const newX = this._computeThumbX(this.state.checked);
Animated.timing(this._animatedThumbLeft, {
toValue: newX,
duration: this.props.thumbAniDuration || 300,
}).start(() => {
this.state.thumbFrame.x = newX;
});
}
_animate(startValue, endValue) {
this.animatedValue.setValue(startValue);
Animated.spring(
this.animatedValue,
{
toValue: endValue,
velocity: 1
}
).start();
}
onPanResponderRelease : (e, gestureState) => {
const {_animatedValue, gravity} = this;
_animatedValue.setValue(this.state.base_exponent);
Animated.decay(
_animatedValue,
{
velocity: -gravity/1000,
deceleration: 0.997,
}
).start();
}
_onHandlerStateChange = event => {
if (event.nativeEvent.oldState === State.ACTIVE) {
const { height, width } = this.state;
const posX = this._lastOffset.x + event.nativeEvent.translationX;
const posY = this._lastOffset.y + event.nativeEvent.translationY;
const distFromTop = posY;
const distFromBottom = height - posY - BOX_SIZE;
const distFromLeft = posX;
const distFromRight = width - posX - BOX_SIZE;
this._lastOffset = { x: posX, y: posY };
this._dragX.flattenOffset();
this._dragY.flattenOffset();
const minDist = Math.min(
distFromTop,
distFromBottom,
distFromLeft,
distFromRight
);
if (distFromTop === minDist) {
this._dragY.setValue(-BOX_SIZE / 4);
this._lastOffset.y = -BOX_SIZE / 4;
} else if (distFromBottom === minDist) {
this._dragY.setValue(height - BOX_SIZE / 2);
this._lastOffset.y = height - BOX_SIZE / 2;
} else if (distFromLeft === minDist) {
this._dragX.setValue(-BOX_SIZE / 2);
this._lastOffset.x = -BOX_SIZE / 2;
} else if (distFromRight === minDist) {
this._dragX.setValue(width - BOX_SIZE / 2);
this._lastOffset.x = width - BOX_SIZE / 2;
}
this._dragX.extractOffset();
this._dragY.extractOffset();
}
};
<TouchableOpacity onPress={()=>{
if (this.state.editValue == null || this.state.editValue.length==0) {
show("请输入想搜索内容")
} else {
this.refs.textinput.blur()
this.setState({
isShowModal:true,
isCannelRequest: false,
})
this.fadeAnim.setValue(0.0)
this.requestData(this.state.editValue)
}}}>
shake() {
const { shakeAnimationValue } = this;
shakeAnimationValue.setValue(0);
// Animation duration based on Material Design
// https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations
Animated.timing(shakeAnimationValue, {
duration: 375,
toValue: 3,
ease: Easing.bounce,
}).start();
}
function _initializeRotationAnimation() {
rotationAnim.setValue(0);
Animated.timing(rotationAnim, {
toValue: 1,
duration: 1000,
easing: Easing.linear
}).start(() => {
if (loadingView) {
_initializeRotationAnimation();
}
});
}
_clearAllTransformAndUpdate = () => {
this._offsetX.setValue(0);
this._offsetY.setValue(0);
this._tagTransform.forEach((tran: Transform) => {
tran.x.setValue(0);
tran.y.setValue(0);
});
const { draggedIndex } = this.state;
if (
draggedIndex !== -1 &&
this._exchangeIndex !== -1 &&
draggedIndex !== this._exchangeIndex
) {
const tag = this._tags[draggedIndex];
this._tags.splice(draggedIndex, 1);
this._tags.splice(this._exchangeIndex, 0, tag);
this.props.onTagsSorted(this._tags);
this._autoSortSelectedTags();
}
this.setState({ draggedIndex: -1 });
this._exchangeIndex = -1;
};
handlePanResponderMove(e, gestureState) {
const { dx, dy } = gestureState;
const absDx = Math.abs(dx);
const absDy = Math.abs(dy);
// this check may not be necessary because we don't capture the move until we pass the threshold
// just being extra safe here
if (
absDx > this.props.directionalDistanceChangeThreshold ||
absDy > this.props.directionalDistanceChangeThreshold
) {
// we have enough to determine direction
if (absDy > absDx && !this.horizontalSwipeGestureBegan) {
// user is moving vertically, do nothing, listView will handle
return;
}
// user is moving horizontally
if (this.parentScrollEnabled) {
// disable scrolling on the listView parent
this.parentScrollEnabled = false;
this.props.setScrollEnabled && this.props.setScrollEnabled(false);
}
if (this.swipeInitialX === null) {
// set tranlateX value when user started swiping
this.swipeInitialX = this._translateX._value;
}
if (!this.horizontalSwipeGestureBegan) {
this.horizontalSwipeGestureBegan = true;
this.props.swipeGestureBegan && this.props.swipeGestureBegan();
}
let newDX = this.swipeInitialX + dx;
if (this.props.disableLeftSwipe && newDX < 0) {
newDX = 0;
}
if (this.props.disableRightSwipe && newDX > 0) {
newDX = 0;
}
if (this.props.stopLeftSwipe && newDX > this.props.stopLeftSwipe) {
newDX = this.props.stopLeftSwipe;
}
if (this.props.stopRightSwipe && newDX < this.props.stopRightSwipe) {
newDX = this.props.stopRightSwipe;
}
this._translateX.setValue(newDX);
}
}
_handleReleaseHorizontal(nativeEvent) {
const {
transitionProps: { navigation, position, layout },
} = this.props;
const { index } = navigation.state;
const immediateIndex =
this._immediateIndex == null ? index : this._immediateIndex;
// Calculate animate duration according to gesture speed and moved distance
const distance = layout.width.__getValue();
const movementDirection = this._isMotionInverted() ? -1 : 1;
const movedDistance = movementDirection * nativeEvent.translationX;
const gestureVelocity = movementDirection * nativeEvent.velocityX;
const defaultVelocity = distance / ANIMATION_DURATION;
const velocity = Math.max(Math.abs(gestureVelocity), defaultVelocity);
const resetDuration = this._isMotionInverted()
? (distance - movedDistance) / velocity
: movedDistance / velocity;
const goBackDuration = this._isMotionInverted()
? movedDistance / velocity
: (distance - movedDistance) / velocity;
// Get the current position value and reset to using the statically driven
// (rather than gesture driven) position.
const value = this._computeHorizontalGestureValue(nativeEvent);
position.setValue(value);
this.positionSwitch.setValue(1);
// If the speed of the gesture release is significant, use that as the indication
// of intent
if (gestureVelocity < -50) {
this.props.onGestureCanceled && this.props.onGestureCanceled();
this._reset(immediateIndex, resetDuration);
return;
}
if (gestureVelocity > 50) {
this.props.onGestureFinish && this.props.onGestureFinish();
this._goBack(immediateIndex, goBackDuration);
return;
}
// Then filter based on the distance the screen was moved. Over a third of the way swiped,
// and the back will happen.
if (value <= index - POSITION_THRESHOLD) {
this.props.onGestureFinish && this.props.onGestureFinish();
this._goBack(immediateIndex, goBackDuration);
} else {
this.props.onGestureCanceled && this.props.onGestureCanceled();
this._reset(immediateIndex, resetDuration);
}
}
// property initializers end
// rotation & arc animation
_aniUpdateSpinner() {
const { width, height } = this.state.dimen;
if (!width || !height) {
return;
}
const duration = this.props.spinnerAniDuration || 1500;
this._animatedContainerAngle.setValue(0);
this._animatedArcAngle.setValue(0);
this._updateStrokeColor(() => {
Animated.parallel([
Animated.timing(this._animatedContainerAngle, {
duration,
toValue: 1,
}),
Animated.timing(this._animatedArcAngle, {
duration,
toValue: 1,
}),
]).start(({ finished }) => finished && setImmediate(this._aniUpdateSpinner));
});
}
componentDidUpdate(prevProps) {
const { props } = this;
if (
prevProps.focused !== props.focused ||
prevProps.isNext !== props.isNext
) {
const { pos } = this;
if (props.isNext) {
pos.setValue(1);
} else if (props.focused) {
Animated.spring(pos, { toValue: 0, useNativeDriver: true }).start();
} else {
Animated.spring(pos, { toValue: -1, useNativeDriver: true }).start();
}
}
}
// stretch the line, from center
aniStretchUnderline(focused) {
if (!(this.props.underlineEnabled && focused)) {
return [];
}
this.animatedLeft.setValue(this.state.lineLength / 2);
return [
Animated.timing(this.animatedLeft, {
toValue: 0,
duration: this.props.underlineAniDur,
}),
Animated.timing(this.animatedLineLength, {
toValue: this.state.lineLength,
duration: this.props.underlineAniDur,
}),
];
}
spin() {
const { handleRefresh } = this.props
// perform refresh function
handleRefresh()
// spin
this.spinValue.setValue(0)
Animated.timing(
this.spinValue,
{
toValue: 1,
duration: 2000,
easing: Easing.linear,
useNativeDriver: true
}
).start()
}
componentDidMount() {
this.progress.setValue(0);
this.progress.addListener((progress) => {
this.setState({
progress: parseInt(progress.value) + '%'
});
});
Animated.timing(this.progress, {
duration: 7000,
toValue: 100,
useNativeDriver: false
}).start(() => {
this.setState({
progress: 'Done!'
})
});
}