Date post: | 28-Jan-2018 |
Category: |
Software |
Upload: | react-conf-brasil |
View: | 30 times |
Download: | 0 times |
Henrique Sosa@HiPlatform / São PauloGorgeous Apps with React Motion and Animations
Question to the audience quota
CSS AnimationsJavaScript Animations
Animated & Velocity-ReactReact Motion
CSS Animationsback to basics
class Input extends Component { state = { focused: false }
focus = () => { this.setState((state) => ({ focused: !state.focused })) }
render() { const { focused } = this.state return ( <input onFocus={this.focus} onBlur={this.focus} className={['input', focused && 'input-focused'].join(' ')} /> ); }}
performance
smooth transitions
CSS Classes
few state changes
Pros
not cross-platform
CSS
Cons
JavaScript Animationsspicing things up
class App extends Component {
state = {
disabled: true,
}
onChange = (e) => {
// control the state based on input length
}
render() {
const label = this.state.disabled ? 'Disabled' : 'Submit';
return (
<div className="App">
<button
style={...styles.button, !this.state.disabled && styles.buttonEnabled)}
disabled={this.state.disabled}
>{label}</button>
<input
style={styles.input}
onChange={this.onChange}
/>
</div>
);
}
}
const styles = {
input: {
width: 200,
outline: 'none',
fontSize: 20,
padding: 10,
border: 'none',
backgroundColor: '#ddd',
marginTop: 10,
},
button: {
width: 180,
height: 50,
border: 'none',
borderRadius: 4,
fontSize: 20,
cursor: 'pointer',
transition: '.25s all',
},
buttonEnabled: {
backgroundColor: '#ffc107',
width: 220,
}
}
performance
doesn’t need CSS
Pros
not cross-platform
adds complexity
Cons
Animations LibsAnimated & Velocity React
React-Native friendly ( Animated )
Flexibility
Easy implementation ( Velocity React )
Pros
Not 100% stable on the Web ( Animated )
It is another thing to learn
Performance issues ( Animated )
Auto-prefixing issues ( Animated )
not cross-platform ( Velocity React )
Cons
React MotionA spring that solves your animations
problems
class App extends Component {
state = {
height: 38
}
animate = () => {
this.setState((state) => ({ height: state.height === 233 ? 38 : 233 }))
}
render() {
return (
<div className="App">
<div style={styles.button} onClick={this.animate}>Animate</div>
<Motion style={{ height: spring(this.state.height) }}>
{
({ height }) => <div style={...styles.menu, { height } )}>
<p style={styles.selection}>Selection 1</p>
<p style={styles.selection}>Selection 2</p>
</div>
}
</Motion>
</div>
);
}
}
React Native and React Web friendly
Spring concept
Pros
Performance
It is another thing to learn
Cons
Reference Linksmedium.com/dabit3
@chenglou
Thank You(GIF quota)