introduction to React Native Animated

Transcript

1. @nolick1219 React Native Meetup#5 introduction to React Native Animated
2. ࣗݾ঺հ @nolick1219 ๭SierͰհޢධՁݕࡧαʔϏεͷ্ཱͪ͛த ීஈ͸Ruby on RailsͩͬͨΓΠϯϑϥͳͲ ্هαʔϏεͰReact NativeͰΞϓϦΛ ϦϦʔε͢Δ͜ͱʹͳͬͨͨΊઈࢍֶशத
3. React Nativeʹ͓͚ΔΞχϝʔγϣϯ ϝδϟʔͳAPIͱͯ͠͸ҎԼͷ2ͭ Animated LayoutAnimation
4. ΞχϝʔγϣϯͷྲྀΕ 1. ΞχϝʹΑΓมԽ͢Δ஋(ม਺)Λఆٛ͢Δ 2. ม਺ʹCSSϓϩύςΟΛͻ΋͚ͮΔ 3. ม਺ΛAnimated.timing()౳ʹ౉ͯ͠start() Λ࣮ߦ͢Δ 4. ม਺ͷ஋ͷมԽʹ͋ΘͤͯCSSϓϩύςΟ ஋͕มԽ͠Ξχϝʔγϣϯ͢Δ
5. 1. ΞχϝʹΑΓมԽ͢Δ஋(ม਺)Λఆٛ͢Δ Animated.Value() Animated.ValueXY() ※Ґஔ৘ใʹͻ΋͚͍ͮͨ৔߹ export default class RNMeetup5Demo extends Component { constructor(props){ super(props); this.state = { animatedValue: new Animated.Value(0), //0ͰॳظԽ } }
6. 2. ม਺ʹCSSϓϩύςΟΛͻ΋͚ͮΔ return( <View> <Animated.Image style={{ opacity: this.state.animatedValue }} /> </View> )
7. 3. ม਺ΛAnimated.timing()౳ʹ౉ͯ͠start() Λ࣮ߦ͢Δ 4. ม਺ͷ஋ͷมԽʹ͋ΘͤͯCSSϓϩύςΟ ஋͕มԽ͠Ξχϝʔγϣϯ͢Δ animate(){ Animated.timing( this.state.animatedValue, { toValue: 1, duration: 1000, easing: Easing.linear, } ).start(() => this.animate()) }
8. Animated.Imageͱ͸ ΞχϝʔγϣϯͰ͖Δίϯϙʔωϯτ ଞʹ͸ҎԼͷ3ͭ ɾAnimated.ScrollView ɾAnimated.Text ɾAnimated.View createAnimatedComponent()ͰΞχϝʔγϣ ϯͰ͖ΔίϯϙʔωϯτΛͭ͘ΕΔ(ະݕূ)
9. Animated.timing()౳ͱ͸ ɾAnimated.timing() //Πʔδϯά(Ұൠత) ɾAnimated.spring() //͹ͶͬΆ͘ ɾAnimated.decay() //ঃʑʹݮ଎
10. Animated.timing()
11. Animated.spring()
12. ม਺ͱ͸ผͷϨϯδͰCSSϓϩύςΟʹͻ΋͚͍ͮͨ render(){ const marginLeft = this.state.animatedValue.interpolate({ inputRange: [0, 1], outputRange: [0, 300] }) const opacity = this.state.animatedValue.interpolate({ inputRange: [0, 0.5, 1], outputRange: [0, 1, 0] }) const movingMargin = this.state.animatedValue.interpolate({ inputRange: [0, 0.5, 1], outputRange: [0, 300, 0] }) return ( <View style={styles.container}> <Animated.Image style={{ marginLeft, }} /> <Animated.Image style={{ opacity, }} /> <Animated.Image style={{ marginLeft: movingMargin, }} /> /> </View> ) } } interpolate()Λ͔ͭ͏
13. ม਺ͱ͸ผͷϨϯδͰCSSϓϩύςΟʹͻ΋͚͍ͮͨ
14. ࿈ଓ͢ΔΞχϝʔγϣϯ ɾAnimated.parallel() ɾAnimated.sequence() ɾAnimated.stagger() //nඵ͝ͱʹύϥϨϧ
15. Animated.parallel()
16. Animated.sequence()
17. Animated.stagger()
18. ͦͷଞ(ະݕূ) ɾAnimated.Valueಉ࢜Λ଍ͨ͠Γֻ͚ࢉͨ͠ Γআࢉͨ͠Γͯ͠৽͍͠Animated.ValueΛ࡞ Δ͜ͱ͕Ͱ͖ΔΒ͍͠ ɾAnimated.event(): ϢʔβͷδΣενϟʔ ͷ஋ΛAnimated.Valueʹͻ΋͚ͮΔ͜ͱ͕Ͱ ͖ΔΒ͍͠
19. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ