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