This is Pure CSS Dog.
Inspired by : https://dribbble.com/shots/2167068-Man-s-best-friend
A Pen by Narendra N Shetty on CodePen.
This is Pure CSS Dog.
Inspired by : https://dribbble.com/shots/2167068-Man-s-best-friend
A Pen by Narendra N Shetty on CodePen.
... | |
onSwipeLeft() { | |
const { _counter } = this.state; | |
let newCounter = _counter < screens.length - 1 ? _counter + 1 : 0; | |
this.swipeTo(newCounter); | |
} | |
onSwipeRight() { | |
const { _counter } = this.state; | |
let newCounter = _counter === 0 ? screens.length - 1 : _counter - 1; | |
this.swipeTo(newCounter); |
componentWillMount() { | |
this.panResponder = PanResponder.create({ | |
onStartShouldSetPanResponder: () => true, | |
onPanResponderRelease: (evt, gestureState) => { | |
const swipeDirection = this._getSwipeDirection(gestureState); | |
this._triggerSwipeHandlers(swipeDirection, gestureState); | |
} | |
}); | |
} | |
_triggerSwipeHandlers(swipeDirection, gestureState) { |
const swipeDirections = { | |
SWIPE_LEFT: 'SWIPE_LEFT', | |
SWIPE_RIGHT: 'SWIPE_RIGHT' | |
}; | |
function isValidSwipe(velocity, | |
velocityThreshold, | |
directionalOffset, | |
directionalOffsetThreshold) { | |
return Math.abs(velocity) >= velocityThreshold && | |
Math.abs(directionalOffset) < directionalOffsetThreshold; |
... | |
export default class Swipe extends React.Component { | |
componentWillMount() { | |
this.panResponder = PanResponder.create({ | |
onStartShouldSetPanResponder: () => true, | |
onPanResponderRelease: () => {} | |
}); | |
} | |
render() { | |
return ( |
... | |
render() { | |
return ( | |
<Swipe | |
style={[styles.container, { | |
backgroundColor: this.state.currentbg | |
}]} | |
> | |
<CircleTransition | |
ref={(circle) => { this.circleTransition = circle }} |
... | |
this.circleTransition.start(newColor, this.changeColor.bind(this, newColor)); | |
... | |
changeColor(newColor) { | |
this.setState({ | |
currentbg: newColor | |
}); | |
} | |
... |
start(color, callback) { | |
... | |
this.animate(callback); | |
... | |
} | |
animate(callback) { | |
Animated.timing(this.state.scale, { | |
... | |
}).start(() => { | |
callback(); |
... | |
start(color) { | |
this.setState({ | |
color: color | |
}, () => { | |
this.animate(); | |
}); | |
} | |
animate() { | |
Animated.timing(this.state.scale, { |
... | |
const screens = [{ | |
id: 0, | |
bgcolor: '#698FB2' | |
}, { | |
id: 1, | |
bgcolor: '#68B0B3' | |
}, { | |
id: 2, | |
bgcolor: '#9B91BA' |