SwiftUIのアニメーション_ちょっと触ってみた話

Transcript

1. SwiftUIͷΞχϝʔγϣϯɺͪΐͬͱ৮ͬͯΈͨ࿩ 2025/06/27 mobile.stmn#12
2. ࣗݾ঺հ ɾࣾձਓ3೥໨ͷΫϥ΢υΤϯδχΞ(23೥ೖࣾ) riataso @riataso_kebin ɾίʔώʔΛ೩ྉʹಈ͍͍ͯ·͢☕
3. ໨࣍ ɾΞχϝʔγϣϯͬͯ೉ͦ͠͏ʁ࣮͸... ɾSwiftUiΞχϝʔγϣϯͷ֓ཁ ɾ୅දతΞχϝʔγϣϯ঺հ ɾ࣮ࡍʹ࡞ͬͯΈͨʂσϞΞϓϦ঺հ ɾ·ͱΊ
4. ݸਓ։ൃͷΞϓϦʹΞχϝʔγϣϯɺೖΕͯ·͔͢ʁ
5. Ξχϝʔγϣϯͬͯ೉ͦ͠͏ʁ࣮͸... 😅׬੒͢Ε͹OKͬͯࢥͬͯͯɺ Ξχϝʔγϣϯ͸શવ৮ͬͯ·ͤΜͰͨ͠ɻ ɾ·ͣ͸ػೳΛ׬੒ͤ͞Α͏ ɾΞχϝʔγϣϯ΍σβΠϯ͸༨༟͕͋ͬͨΒ… ɾͳͯ͘΋ಈ͘͠ɺ͍͍͔ͳɻ ΞχϝʔγϣϯΛޙճ͠ʢ࣮૷͠ͳ͍ɻɻʣঢ়ଶͰऴΘΔ
6. Ξχϝʔγϣϯͬͯ೉ͦ͠͏ʁ࣮͸... ΞχϝʔγϣϯΛ࢖ͬͯΈͯ ɾجຊతͳ΋ͷͳΒҙ֎ͱ؆୯ ɾΞϓϦ͕ͪΌΜͱͯ͠ݟ͑Δʂ ͦΜͳSwiftUIΞχϝʔγϣϯͷ ໘ന͞Λগ͠Ͱ΋ײͯ͡΋Β͑ͨΒͱࢥ͍·͢ɻ
7. SwiftUiΞχϝʔγϣϯͷ֓ཁ
8. SwiftUIΞχϝʔγϣϯͷ֓ཁ SwiftUIͷΞχϝʔγϣϯͱ͸ʁ • ঢ়ଶมԽΛࣗಈతʹิؒͯ͠ΞχϝʔγϣϯԽ • એݴతͳهड़Ͱෳࡶͳ੍ޚ͕ෆཁ • @StateͳͲͷঢ়ଶ؅ཧͱ࿈ܞͯ͠ಈ࡞
9. ୅දతͳΞχϝʔγϣϯ঺հ
10. ୅දతͳΞχϝʔγϣϯ SwiftUIͰΑ͘࢖ΘΕΔجຊతͳΞχϝʔγϣϯख๏ɿ 1. ҉໧తΞχϝʔγϣϯ (.animation) • Ϗϡʔͷঢ়ଶมԽΛࣗಈͰΞχϝʔγϣϯ • ࢖༻ྫɿϘλϯͷ৭มߋɺαΠζมߋ 2. ໌ࣔతΞχϝʔγϣϯ (withAnimation) • ಛఆͷλΠϛϯάͰΞχϝʔγϣϯ࣮ߦ • ࢖༻ྫɿෳ਺ཁૉͷಉظΞχϝʔγϣϯ 3. τϥϯδγϣϯ (.transition) • Ϗϡʔͷදࣔ/ඇදࣔ࣌ͷΞχϝʔγϣϯ • ࢖༻ྫɿը໘ભҠɺཁૉͷग़ݱ/ফࣦ
11. ୅දతͳΞχϝʔγϣϯ SwiftUIͰΑ͘࢖ΘΕΔجຊతͳΞχϝʔγϣϯख๏ɿ 1. ҉໧తΞχϝʔγϣϯ (.animation) • Ϗϡʔͷঢ়ଶมԽΛࣗಈͰΞχϝʔγϣϯ • ࢖༻ྫɿϘλϯͷ৭มߋɺαΠζมߋ 2. ໌ࣔతΞχϝʔγϣϯ (withAnimation) • ಛఆͷλΠϛϯάͰΞχϝʔγϣϯ࣮ߦ • ࢖༻ྫɿෳ਺ཁૉͷಉظΞχϝʔγϣϯ 3. τϥϯδγϣϯ (.transition) • Ϗϡʔͷදࣔ/ඇදࣔ࣌ͷΞχϝʔγϣϯ • ࢖༻ྫɿը໘ભҠɺཁૉͷग़ݱ/ফࣦ
12. ୅දతͳΞχϝʔγϣϯ
13. ୅දతͳΞχϝʔγϣϯ 1. ҉໧తΞχϝʔγϣϯ (.animation) λοϓͰԁ͕มԽ͢ΔΞχϝʔγϣϯ ʲಈ࡞಺༰ʳ • ԁλοϓͰ isAnimated ͷঢ়ଶ͕੾ΓସΘΔ • ৭: ੨ ⁶ ੺ɺαΠζ: 100×100 ⁶ 200×200 • 0.5ඵͷͳΊΒ͔ͳΠʔζΠϯΞ΢τ ʲ҉໧తΞχϝʔγϣϯͷಛ௃ʳ ✅ ঢ়ଶมԽΛࣗಈͰݕ஌ ✅ .animationϞσΟϑΝΠΞҰͭͰ࣮૷ ✅ ෳ਺ͷϓϩύςΟΛಉ࣌ʹΞχϝʔγϣϯ
14. ୅දతͳΞχϝʔγϣϯ Ξχϝʔγϣϯ ͳ͠ Ξχϝʔγϣϯ ͋Γ
15. ୅දతͳΞχϝʔγϣϯ SwiftUIͰΑ͘࢖ΘΕΔجຊతͳΞχϝʔγϣϯख๏ɿ 1. ҉໧తΞχϝʔγϣϯ (.animation) • Ϗϡʔͷঢ়ଶมԽΛࣗಈͰΞχϝʔγϣϯ • ࢖༻ྫɿϘλϯͷ৭มߋɺαΠζมߋ 2. ໌ࣔతΞχϝʔγϣϯ (withAnimation) • ಛఆͷλΠϛϯάͰΞχϝʔγϣϯ࣮ߦ • ࢖༻ྫɿෳ਺ཁૉͷಉظΞχϝʔγϣϯ 3. τϥϯδγϣϯ (.transition) • Ϗϡʔͷදࣔ/ඇදࣔ࣌ͷΞχϝʔγϣϯ • ࢖༻ྫɿը໘ભҠɺཁૉͷग़ݱ/ফࣦ
16. ୅දతͳΞχϝʔγϣϯ
17. ୅දతͳΞχϝʔγϣϯ 2. ໌ࣔతΞχϝʔγϣϯ (withAnimation) withAnimationΛ࢖ͬͨϘλϯϑΟʔυόοΫ ϘλϯΛԡ͢ͱʮॖΜͰ໭Δʯಈ࡞Ͱ ࢹ֮తϑΟʔυόοΫΛఏڙ͠·͢ɻ ʲಈ࡞಺༰ʳ 1. ϘλϯλοϓͰ90%ʹॖখ (0.1ඵɺeaseIn) 2. completionޙɺݩαΠζʹ෮ؼ (0.1ඵɺeaseOut) ʲwithAnimationͷಛ௃ʳ ✅ ஈ֊తͳΞχϝʔγϣϯ੍ޚ ✅ completionػೳͰ࿈ଓ࣮ߦ ✅ λΠϛϯάͱॱংΛࡉ͔͘ࢦఆՄೳ
18. ୅දతͳΞχϝʔγϣϯ Ξχϝʔγϣϯ ͳ͠ Ξχϝʔγϣϯ ͋Γ
19. ୅දతͳΞχϝʔγϣϯ SwiftUIͰΑ͘࢖ΘΕΔجຊతͳΞχϝʔγϣϯख๏ɿ 1. ҉໧తΞχϝʔγϣϯ (.animation) • Ϗϡʔͷঢ়ଶมԽΛࣗಈͰΞχϝʔγϣϯ • ࢖༻ྫɿϘλϯͷ৭มߋɺαΠζมߋ 2. ໌ࣔతΞχϝʔγϣϯ (withAnimation) • ಛఆͷλΠϛϯάͰΞχϝʔγϣϯ࣮ߦ • ࢖༻ྫɿෳ਺ཁૉͷಉظΞχϝʔγϣϯ 3. τϥϯδγϣϯ (.transition) • Ϗϡʔͷදࣔ/ඇදࣔ࣌ͷΞχϝʔγϣϯ • ࢖༻ྫɿը໘ભҠɺཁૉͷग़ݱ/ফࣦ
20. ୅දతͳΞχϝʔγϣϯ
21. ୅දతͳΞχϝʔγϣϯ 3. τϥϯδγϣϯ(transition) .transitionΛ࢖ͬͨϏϡʔͷදࣔɾඇදࣔ ϘλϯΛλοϓ͢Δͱ੨͍ԁ͕ εέʔϧΞχϝʔγϣϯͰొ৔ɾୀ৔͠·͢ɻ ʲಈ࡞಺༰ʳ 1. ৚݅෼ذ (if showCircle) ʹΑΔදࣔ/ඇදࣔ੾Γସ͑ 2. .transition(.scale)ͰαΠζมԽΞχϝʔγϣϯ 3. withAnimationͰ0.5ඵͷΠʔζΠϯΞ΢τ ʲ.transitionͷಛ௃ʳ ✅ Ϗϡʔͷग़ݱɾফࣦʹ࢖͑ΔΞχϝʔγϣϯ ✅ ৚݅෼ذʹΑΔදࣔ੾Γସ͑Ͱࣗಈద༻
22. ࣮ࡍʹ࡞ͬͯΈͨʂσϞΞϓϦ঺հ
23. ࣮ࡍʹ࡞ͬͯΈͨʂσϞΞϓϦ঺հ
24. ࣮ࡍʹ࡞ͬͯΈͨʂσϞΞϓϦ঺հ ʮը໘දࣔ࣌ͷ࿈ଓεϥΠυΠϯʯ ɾvisibleItemsͰ֤ΞΠςϜͷදࣔঢ়ଶΛ؅ཧ ɾoffsetͰҐஔΛ੍ޚʢը໘֎ → ը໘಺ʣ ɾdelayͰ0.1ඵͣͭͣΒͯ͠ॱ൪ʹදࣔ ɾSwiftUI͕ࣗಈͰ׈Β͔ͳΞχϝʔγϣϯΛੜ੒
25. ࣮ࡍʹ࡞ͬͯΈͨʂσϞΞϓϦ঺հ ʮλοϓ࣌ͷεϜʔζͳঢ়ଶมԽʯ ɾwithAnimationͰғΉ͚ͩͰࣗಈΞχϝʔγϣϯ ɾΞΠίϯมԽɺ৭มԽɺςΩετ૷০͕࿈ಈ ɾεϓϦϯάΞχϝʔγϣϯͰࣗવͳಈ͖
26. ࣮ࡍʹ࡞ͬͯΈͨʂσϞΞϓϦ঺հ ʮঢ়ଶมԽʹԠͨ͡ݟͨ໨ͷࣗಈߋ৽ʯ ɾ৚݅෼ذͰݟͨ໨Λ੾Γସ͑ ɾSwiftUI͕ࠩ෼Λݕ஌ͯࣗ͠ಈΞχϝʔγϣϯ
27. ·ͱΊ
28. ·ͱΊ ɾSwiftUIͰ͸؆୯ʹΞχϝʔγϣϯΛಋೖ͢Δ͜ͱ͕Ͱ͖Δ ɾঢ়ଶมԽ΍Viewͷ੾Γସ͑ʹԠͨࣗ͡વͳಈ͖Λ࣮ݱ ɾ҉໧తɾ໌ࣔతΞχϝʔγϣϯɺτϥϯδγϣϯͳͲ͕͋Δ
29. ͝ਗ਼ௌ͍͖ͨͩ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
30. ࢀߟࢿྉ ɾhttps://developer.apple.com/jp/videos/play/wwdc2023/10156/ ɾhttps://qiita.com/ichikawa7ss/items/164a2dfd3c3ab2b1eae8