Slide 1
Slide 1 text
Flutter Animations
First Step
2018/09/01 () DevFest
@konifar
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
Kyash Inc.
Slide 4
Slide 4 text
yome.fm
Slide 5
Slide 5 text
My First Flutter app
Slide 6
Slide 6 text
Kyash͛મͰ͖Δ
؆୯ʹܾࡁɾૹۚͰ͖ΔΥϨοτΞϓϦɻ
“39ԁ”ૹΔͱͪΐͬͱͨ͠Կ͔͕ى͜Δɻ
https://goo.gl/C594Ri
kyash_id : konifar
Slide 7
Slide 7 text
Flutter Animations
Slide 8
Slide 8 text
Useful Links
- FlutterΞχϝʔγϣϯͷΫϥε֓೦ɺαϯϓϧͷઆ໌
https://flutter.io/tutorials/animation/
https://flutter.io/animations/
- গ͠ෳࡶͳάϥϑΞχϝʔγϣϯΛ࡞ΔνϡʔτϦΞϧ
https://medium.com/flutter-io/zero-to-one-with-flutter-43b13fd7b354
https://medium.com/flutter-io/zero-to-one-with-flutter-part-two-
5aa2f06655cb
- ίʔυϥϘͰͷ؆୯ͳΞχϝʔγϣϯ࣮
https://codelabs.developers.google.com/codelabs/flutter/index.html#6
Slide 9
Slide 9 text
Goal
FlutterͷΞχϝʔγϣϯΛΩϟονΞοϓ͢
Δ࣌ʹɺυΩϡϝϯτνϡʔτϦΞϧ͕ཧղ
͍͢͠Α͏ʹ֓೦Λβοͱཧղ͢Δɻ
Slide 10
Slide 10 text
͢͜ͱ
- ΞχϝʔγϣϯΛ࣮͢ΔجຊͷྲྀΕ
- ࣮͢Δ࣌ͷΫϥεͷׂ
Slide 11
Slide 11 text
͞ͳ͍͜ͱ
- Ξχϝʔγϣϯ෦ͷ࣮ͷ
- ෳࡶͳΞχϝʔγϣϯͷ
- GestureͱΈ߹Θͤͨ߹ͷ
Slide 12
Slide 12 text
ԡ͓͖͑ͯ͘͞
Ϋϥε
Slide 13
Slide 13 text
Basic classes
1. AnimationController
2. Tween
3. CurvedAnimation
4. AnimatedBuilder
Slide 14
Slide 14 text
͜ΕΒͷઆ໌Λ͢Δલʹ
Slide 15
Slide 15 text
ͦͦAnimationͱ
ʰҰఆ࣌ؒͰɺϏϡʔͷϓϩύςΟͷΛมԽ
ͤ͞ɺඳը͢ΔҰ࿈ͷྲྀΕʱ
ͬ͘͟Γݴ͏ͱɺύϥύϥ·Μ͕
Slide 16
Slide 16 text
ྫ͑
2ඵؒʢҰఆ࣌ؒʣͰɺ
width, heightʢϓϩύ
ςΟʣͷΛมԽͤ͞ɺ
ϑϨʔϜ͕ߋ৽͞ΕΔ͝ͱ
ʹඳը͢Δɻ
Slide 17
Slide 17 text
ଞʹ
- colorΛม͑Ε৭͕มΘΔ
- opacityΛม͑Εಁա͕มΘΔ
- x,y࠲ඪΛม͑ΕҠಈ͢Δ
- radiusΛม͑Ε˘͔Β˓ʹมΘΔ
Slide 18
Slide 18 text
Basic classes
- AnimationController
- ࣌ؒΛܾΊɺ։࢝ɾऴྃͳͲͷ੍ޚΛ͢Δ
- Tween
- มߋ͢ΔͷൣғΛܾΊΔ
- CurvedAnimation
- ͷมԽʹ؇ٸΛ͚ͭΔ
- AnimatedBuilder
- มԽͨ͠Λඳը͢Δ
Slide 19
Slide 19 text
Basic classes
- AnimationController
- 2000ms ͷ࣌ؒͰϦϐʔτ
- Tween
- 0~300 ͷ
- CurvedAnimation
- Linearʢʣ
- AnimatedBuilder
- 1ඵؒʹ60ճ˘Λඳը
Slide 20
Slide 20 text
Basic classes
- AnimationController
- 2000ms ͷ࣌ؒͰϦϐʔτ
- Tween
- 0~300 ͷ
- CurvedAnimation
- Linearʢʣ
- AnimatedBuilder
- 1ඵؒʹ60ճ˘Λඳը
Required
Optional
Slide 21
Slide 21 text
؆୯ͳΞχϝʔγϣϯΛ
͜ΕΒͷΫϥεΛͻͱͭͣͭ
͍ͳ͕Βҭ͍͖ͯͯ·͢
Slide 22
Slide 22 text
1. AnimationController͚ͩͰ࡞ͬͯΈΔ
2. TweenΛ͔ͭ͏
3. CurvedAnimationͰ؇ٸΛ͚ͭΔ
4. Animation෦ΛWidgetʹΓग़͢
5. AnimatedBuilderͰϦϑΝΫλϦϯά
6. ࿈ଓͨ͠ΞχϝʔγϣϯΛ࡞Δ
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
AnimationController
͚ͩͰ࡞ͬͯΈΔ
Slide 25
Slide 25 text
AnimationController
- ΞχϝʔγϣϯΛ੍ޚ͢ΔඞਢΫϥε
- AnimationΫϥεΛܧঝ
- ϑϨʔϜ͝ͱʹ0.0 ~ 1.0ͷؒͷΛੜ
- ը໘্Ͳ͏දࣔ͞ΕΔ͔Βͳ͍
Slide 26
Slide 26 text
͜ΕΛ࡞Δ
੨͍˘͕2ඵ͔͚ͯ
300.0ͷେ͖͞·Ͱ
֦େ͞ΕΔΞχϝʔγϣϯ
Slide 27
Slide 27 text
class BasicAnimationApp extends StatefulWidget {
@override
_BasicAnimationAppState createState() => new _BasicAnimationAppState();
}
class _BasicAnimationAppState extends State {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 300.0,
height: 300.0,
decoration: BoxDecoration(
color: Colors.blue[400],
),
),
);
}
}
void main() {
runApp(BasicAnimationApp());
}
Ξχϝʔγϣϯͳ͠
Slide 28
Slide 28 text
class BasicAnimationApp extends StatefulWidget {
@override
_BasicAnimationAppState createState() => new _BasicAnimationAppState();
}
class _BasicAnimationAppState extends State {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 300.0,
height: 300.0,
decoration: BoxDecoration(
color: Colors.blue[400],
),
),
);
}
}
void main() {
runApp(BasicAnimationApp());
}
Ξχϝʔγϣϯͳ͠
buildϝιουͷதͷ width, height ͕
300ݻఆͳͷͰɺͨͩͷ੨͍˘͕දࣔ͞ΕΔ͚ͩɻ
Slide 29
Slide 29 text
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
AnimationController controller;
@override
initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this)
..addListener(() {
setState(() {
});
})
controller.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: controller.value * 300.0,
height: controller.value * 300.0,
decoration: BoxDecoration(color: Colors.blue[400]),
),
);
}
…
Slide 30
Slide 30 text
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
AnimationController controller;
@override
initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this)
..addListener(() {
setState(() {
});
})
controller.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: controller.value * 300.0,
height: controller.value * 300.0,
decoration: BoxDecoration(color: Colors.blue[400]),
),
);
}
…
initState()ͷதͰɺ2000msͰಈ࡞͢Δ
AnimationControllerΠϯελϯεΛੜɻ
Slide 31
Slide 31 text
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
AnimationController controller;
@override
initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this)
..addListener(() {
setState(() {
});
})
controller.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: controller.value * 300.0,
height: controller.value * 300.0,
decoration: BoxDecoration(color: Colors.blue[400]),
),
);
}
…
Ξχϝʔγϣϯ࣌ͷແବͳඳըΛ͙ͨΊʹ
ରͷStateʹTickerProviderΛ࣮ͯ͢͠ɻ
Slide 32
Slide 32 text
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
AnimationController controller;
@override
initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this)
..addListener(() {
setState(() {
});
})
controller.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: controller.value * 300.0,
height: controller.value * 300.0,
decoration: BoxDecoration(color: Colors.blue[400]),
),
);
}
…
initState()ͷதͰΞχϝʔγϣϯͷ։࢝ɻ
දࣔͨ͠Β͙͢ʹಈ͖ग़͢ɻ
Slide 33
Slide 33 text
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
AnimationController controller;
@override
initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this)
..addListener(() {
setState(() {
});
})
controller.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: controller.value * 300.0,
height: controller.value * 300.0,
decoration: BoxDecoration(color: Colors.blue[400]),
),
);
}
…
buildϝιουͷதͰɺcontroller.valueͷΛ
ͬͯWidgetπϦʔΛ࡞Δɻ
controller.value0.0~1.0ͳͷͰɺ
300ഒͯ͠widthͱheightʹηοτ͢Δɻ
Slide 34
Slide 34 text
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
AnimationController controller;
@override
initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this)
..addListener(() {
setState(() {
});
})
controller.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: controller.value * 300.0,
height: controller.value * 300.0,
decoration: BoxDecoration(color: Colors.blue[400]),
),
);
}
…
AnimationController͕Λੜ
͢Δͨͼʹඳը͢ΔͨΊʹɺ
ListenerΛηοτͯ͠setState()
ΛݺͿɻ
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
AnimationController controller;
..
@override
dispose() {
controller.dispose();
super.dispose();
}
}
dispose() ΛΕͣʹ
dispose() ΛݺΜͰ͓͔ͳ͍ͱ
ϝϞϦϦʔΫ͢ΔͷͰҙɻ
Slide 37
Slide 37 text
addStatusListener()
- Ξχϝʔγϣϯͷεςʔλε͕มΘͬͨ࣌ʹ
ݺΕΔListener
- forwardʢਖ਼ํʹಈ͍͍ͯΔʣ
- reverseʢରํʹಈ͍͍ͯΔʣ
- completedʢforwardͰऴྃͨ͠ʣ
- dismissedʢreverseͰऴྃͨ͠ʣ
Slide 38
Slide 38 text
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
AnimationController controller;
@override
initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this)
..addListener(() {
setState(() {
});
})
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
controller.forward();
}
Ξχϝʔγϣϯ͕ऴΘͬͨΒରํʢreverseʣʹ
ಈ͔ͯ͠ɺऴΘͬͨΒ·ͨ։࢝ʢforwardʣ͢Δɻ
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
timeDilationͰΛมߋ
- timeDilation = 2.0 ΛՃ͢Δͱ
1/2ͷ͞ͰΞχϝʔγϣϯ͢Δ
- σόοάͰΞχϝʔγϣϯͷΛมߋ͢Δ
ͷʹศར
Slide 41
Slide 41 text
import 'package:flutter/scheduler.dart';
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
AnimationController controller;
..
@override
Widget build(BuildContext context) {
timeDilation = 2.0;
return Center(
child: Container(
width: controller.value * 300.0,
height: controller.value * 300.0,
decoration: BoxDecoration(color: Colors.blue[400]),
),
);
}
..
scheduler.dartΛimport͠
timeDilationʹΛηοτ͢Δɻ
Slide 42
Slide 42 text
TweenΛ͔ͭ͏
Slide 43
Slide 43 text
Tween
- ΞχϝʔγϣϯͰੜ͢Δʢ0.0 ~ 1.0ʣ
Λଞͷʹม͢Δ
- ઌ΄Ͳͷྫͩͱɺ0.0 ~ 300.0
Slide 44
Slide 44 text
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
AnimationController controller;
final _sizeTween = Tween(begin: 0.0, end: 300.0);
@override
initState() {
super.initState();
controller = AnimationController(
..
controller.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: _sizeTween.evaluate(controller),
height: _sizeTween.evaluate(controller),
// width: controller.value * 300.0,
// height: controller.value * 300.0,
decoration: BoxDecoration(color: Colors.blue[400]),
),
);
}
…
Slide 45
Slide 45 text
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
AnimationController controller;
final _sizeTween = Tween(begin: 0.0, end: 300.0);
@override
initState() {
super.initState();
controller = AnimationController(
..
controller.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: _sizeTween.evaluate(controller),
height: _sizeTween.evaluate(controller),
// width: controller.value * 300.0,
// height: controller.value * 300.0,
decoration: BoxDecoration(color: Colors.blue[400]),
),
);
}
…
0.0 ~ 300.0 ͰΛมԽͤ͞ΔͨΊͷ
doubleܕͷTweenΠϯελϯεΛੜɻ
Slide 46
Slide 46 text
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
AnimationController controller;
final _sizeTween = Tween(begin: 0.0, end: 300.0);
@override
initState() {
super.initState();
controller = AnimationController(
..
controller.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: _sizeTween.evaluate(controller),
height: _sizeTween.evaluate(controller),
// width: controller.value * 300.0,
// height: controller.value * 300.0,
decoration: BoxDecoration(color: Colors.blue[400]),
),
);
}
…
buildϝιουͰWidgetΛΈཱͯΔࡍʹ
Tween͔Β0.0 ~ 300.0ͷΛड͚औΕΔɻ
Slide 47
Slide 47 text
͞·͟·ͳ Tween
- ColorTween
- SizeTween
- RectTween
- BorderRadiusTween
- DecorationTween
- BoxConstraintsTween
- https://docs.flutter.io/flutter/animation/Tween-class.html
Slide 48
Slide 48 text
ColorTween
੨͔ΒԫʹมԽ͢Δ
ΞχϝʔγϣϯΛՃɻ
Slide 49
Slide 49 text
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
AnimationController controller;
final _sizeTween = Tween(begin: 0.0, end: 300.0);
final _colorTween =
ColorTween(begin: Colors.blue[400], end: Colors.yellow[400]);
@override
initState() {
super.initState();
controller = AnimationController(
..
controller.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: _sizeTween.evaluate(controller),
height: _sizeTween.evaluate(controller),
decoration: BoxDecoration(color: Colors.blue[400]),
// decoration: BoxDecoration(color: Colors.blue[400]),
),
);
}
…
Slide 50
Slide 50 text
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
AnimationController controller;
final _sizeTween = Tween(begin: 0.0, end: 300.0);
final _colorTween =
ColorTween(begin: Colors.blue[400], end: Colors.yellow[400]);
@override
initState() {
super.initState();
controller = AnimationController(
..
controller.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: _sizeTween.evaluate(controller),
height: _sizeTween.evaluate(controller),
decoration: BoxDecoration(color: Colors.blue[400]),
// decoration: BoxDecoration(color: Colors.blue[400]),
),
);
}
…
beginʹ੨ɺendʹԫ৭Λͯ͠
ColorTween ΠϯελϯεΛੜɻ
Slide 51
Slide 51 text
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
AnimationController controller;
final _sizeTween = Tween(begin: 0.0, end: 300.0);
final _colorTween =
ColorTween(begin: Colors.blue[400], end: Colors.yellow[400]);
@override
initState() {
super.initState();
controller = AnimationController(
..
controller.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: _sizeTween.evaluate(controller),
height: _sizeTween.evaluate(controller),
decoration: BoxDecoration(color: _colorTween.evaluate(controller)),
// decoration: BoxDecoration(color: Colors.blue[400]),
),
);
}
…
buildϝιουͷதͰɺ
ColorTween ͔Β Color ΛऔΓग़ͯ͠ηοτɻ
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
CurvedAnimation
Ͱ؇ٸΛ͚ͭΔ
Slide 54
Slide 54 text
CurvedAnimation
- ΞχϝʔγϣϯͷͷมԽʹ؇ٸΛ͚ͭΔ
Slide 55
Slide 55 text
Curves.ease
Slide 56
Slide 56 text
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
AnimationController controller;
Animation animation;
..
@override
initState() {
super.initState();
controller = AnimationController(
..
animation = CurvedAnimation(parent: controller, curve: Curves.ease);
controller.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: _sizeTween.evaluate(animation),
height: _sizeTween.evaluate(animation),
decoration: BoxDecoration(color: _colorTween.evaluate(animation)),
),
);
}
..
Slide 57
Slide 57 text
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
AnimationController controller;
Animation animation;
..
@override
initState() {
super.initState();
controller = AnimationController(
..
animation = CurvedAnimation(parent: controller, curve: Curves.ease);
controller.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: _sizeTween.evaluate(animation),
height: _sizeTween.evaluate(animation),
decoration: BoxDecoration(color: _colorTween.evaluate(animation)),
),
);
}
..
initState()ͷதͰɺCurvedAnimationΛੜɻ
ୈೋҾͰCurveΛࢦఆ͢Δɻ
Slide 58
Slide 58 text
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
AnimationController controller;
Animation animation;
..
@override
initState() {
super.initState();
controller = AnimationController(
..
animation = CurvedAnimation(parent: controller, curve: Curves.ease);
controller.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: _sizeTween.evaluate(animation),
height: _sizeTween.evaluate(animation),
decoration: BoxDecoration(color: _colorTween.evaluate(animation)),
),
);
}
..
buildϝιουͷதͰTween͔ΒΛऔΓग़͢ࡍʹ
controllerͷΘΓʹanimationΛࢦఆ͢Δɻ
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
Curves
- bounceIn/bounceInOut/bounceOut
- Decelerate
- ease/easeIn/easeInOut/easeOut
- elasticIn/elasticInOut/elasticOut
- FastOutSlowIn
- Linear
- https://docs.flutter.io/flutter/animation/Curves-class.html
Slide 61
Slide 61 text
Animation෦Λ
WidgetʹΓग़͢
Slide 62
Slide 62 text
͜͜·Ͱͷ
- Animationͷίʔυ͕ࢄΒ͍ͬͯΔ
- Animation͢ΔWidget͕૿͑ͨΓෳࡶʹ
ͳͬͨͱ͖ʹେม
Slide 63
Slide 63 text
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
AnimationController controller;
Animation animation;
final _sizeTween = Tween(begin: 0.0, end: 300.0);
final _colorTween =
ColorTween(begin: Colors.blue[400], end: Colors.yellow[400]);
..
@override
initState() {
super.initState();
controller = AnimationController(
..
animation = CurvedAnimation(parent: controller, curve: Curves.ease);
controller.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: _sizeTween.evaluate(animation),
height: _sizeTween.evaluate(animation),
decoration: BoxDecoration(color: _colorTween.evaluate(animation)),
),
);
}
..
Slide 64
Slide 64 text
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
AnimationController controller;
Animation animation;
final _sizeTween = Tween(begin: 0.0, end: 300.0);
final _colorTween =
ColorTween(begin: Colors.blue[400], end: Colors.yellow[400]);
..
@override
initState() {
super.initState();
controller = AnimationController(
..
animation = CurvedAnimation(parent: controller, curve: Curves.ease);
controller.forward();
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: _sizeTween.evaluate(animation),
height: _sizeTween.evaluate(animation),
decoration: BoxDecoration(color: _colorTween.evaluate(animation)),
),
);
}
..
͜ͷ͋ͨΓΛ1ͭͷWidgetʹ·ͱΊΕ
ݟ௨͠Α͘ͳΔ͠࠶ར༻ՄೳʹͳΔɻ
Slide 65
Slide 65 text
Animation͢Δ෦Λ
Widgetͱͯ͠Γग़͠
Slide 66
Slide 66 text
class SampleAnimation extends StatelessWidget {
SampleAnimation({Key key, this.controller})
: sizeAnimation = Tween(begin: 0.0, end: 300.0).animate(
CurvedAnimation(parent: controller, curve: Curves.ease),
),
colorAnimation =
ColorTween(begin: Colors.blue[400], end: Colors.yellow[400]).animate(
CurvedAnimation(parent: controller, curve: Curves.ease),
),
super(key: key);
final Animation controller;
final Animation sizeAnimation;
final Animation colorAnimation;
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: sizeAnimation.value,
height: sizeAnimation.value,
decoration: BoxDecoration(color: colorAnimation.value),
),
);
}
}
Slide 67
Slide 67 text
class SampleAnimation extends StatelessWidget {
SampleAnimation({Key key, this.controller})
: sizeAnimation = Tween(begin: 0.0, end: 300.0).animate(
CurvedAnimation(parent: controller, curve: Curves.ease),
),
colorAnimation =
ColorTween(begin: Colors.blue[400], end: Colors.yellow[400]).animate(
CurvedAnimation(parent: controller, curve: Curves.ease),
),
super(key: key);
final Animation controller;
final Animation sizeAnimation;
final Animation colorAnimation;
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: sizeAnimation.value,
height: sizeAnimation.value,
decoration: BoxDecoration(color: colorAnimation.value),
),
);
}
}
ҾʹAnimationControllerΛ࣋ͭ
StatelessWidgetɻ
Slide 68
Slide 68 text
class SampleAnimation extends StatelessWidget {
SampleAnimation({Key key, this.controller})
: sizeAnimation = Tween(begin: 0.0, end: 300.0).animate(
CurvedAnimation(parent: controller, curve: Curves.ease),
),
colorAnimation =
ColorTween(begin: Colors.blue[400], end: Colors.yellow[400]).animate(
CurvedAnimation(parent: controller, curve: Curves.ease),
),
super(key: key);
final Animation controller;
final Animation sizeAnimation;
final Animation colorAnimation;
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: sizeAnimation.value,
height: sizeAnimation.value,
decoration: BoxDecoration(color: colorAnimation.value),
),
);
}
}
TweenͱCurvedAnimationΛͬͯ
sizeAnimationͱcolorAnimationΛ
ίϯετϥΫλͰੜ͓ͯ͘͠ɻ
Slide 69
Slide 69 text
class SampleAnimation extends StatelessWidget {
SampleAnimation({Key key, this.controller})
: sizeAnimation = Tween(begin: 0.0, end: 300.0).animate(
CurvedAnimation(parent: controller, curve: Curves.ease),
),
colorAnimation =
ColorTween(begin: Colors.blue[400], end: Colors.yellow[400]).animate(
CurvedAnimation(parent: controller, curve: Curves.ease),
),
super(key: key);
final Animation controller;
final Animation sizeAnimation;
final Animation colorAnimation;
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: sizeAnimation.value,
height: sizeAnimation.value,
decoration: BoxDecoration(color: colorAnimation.value),
),
);
}
}
buildϝιουͷதͰ
sizeAnimationͱColorAnimationͷ
ΛͬͯWidgetπϦʔΛߏஙɻ
Slide 70
Slide 70 text
AnimationController controller;
// Animation animation;
// final _sizeTween = Tween(begin: 0.0, end: 300.0);
// final _colorTween =
// ColorTween(begin: Colors.blue[400], end: Colors.yellow[400]);
@override
initState() {
super.initState();
controller = AnimationController(
..
// animation = CurvedAnimation(parent: controller, curve: Curves.ease);
// _sizeTween.animate(animation);
// _colorTween.animate(animation);
controller.forward();
}
@override
Widget build(BuildContext context) {
// timeDilation = 2.0;
// return Center(
// child: Container(
// width: _sizeTween.evaluate(animation),
// height: _sizeTween.evaluate(animation),
// decoration: BoxDecoration(color: _colorTween.evaluate(animation)),
// ),
// );
return SampleAnimation(controller: controller);
}
ݺͼग़͠ଆcontroller੍͚ͩޚ͢ΕΑ͍ɻ
Slide 71
Slide 71 text
AnimatedBuilder
ͰϦϑΝΫλϦϯά
Slide 72
Slide 72 text
͜͜·Ͱͷ
setState()ΛݺͿͨΊ͚ͩʹListenerΛ
ηοτ͍ͯ͠Δͳίʔυ͕͋Δɻ
Slide 73
Slide 73 text
@override
initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this)
..addListener(() {
setState(() {});
})
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
controller.forward();
}
Slide 74
Slide 74 text
@override
initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this)
..addListener(() {
setState(() {});
})
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
controller.reverse();
} else if (status == AnimationStatus.dismissed) {
controller.forward();
}
});
controller.forward();
}
࠶ඳը͢ΔͨΊʹListenerΛηοτͯ͠
setState()ΛݺͿͳίʔυɻ
=> AnimatedBuilderΛͬͯলུՄೳɻ
Slide 75
Slide 75 text
AnimatedBuilder
- controllerͷมߋΛݕͯ͠࠶ඳը͢͠
AnimatedWidgetΛܧঝ͍ͯ͠Δ
- builderͱcontrollerΛҾʹͯ͠
WidgetΛΈཱͯΔ
Slide 76
Slide 76 text
class SampleAnimation extends StatelessWidget {
..
Widget _buildAnimation(BuildContext context, Widget child) {
return Center(
child: Container(
width: sizeAnimation.value,
height: sizeAnimation.value,
decoration: BoxDecoration(color: colorAnimation.value),
),
);
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
builder: _buildAnimation,
animation: controller,
);
}
}
Slide 77
Slide 77 text
class SampleAnimation extends StatelessWidget {
..
Widget _buildAnimation(BuildContext context, Widget child) {
return Center(
child: Container(
width: sizeAnimation.value,
height: sizeAnimation.value,
decoration: BoxDecoration(color: colorAnimation.value),
),
);
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
builder: _buildAnimation,
animation: controller,
);
}
}
buildϝιουͷதͰ
AnimatedBuilderΛฦ͢ɻ
Slide 78
Slide 78 text
class SampleAnimation extends StatelessWidget {
..
Widget _buildAnimation(BuildContext context, Widget child) {
return Center(
child: Container(
width: sizeAnimation.value,
height: sizeAnimation.value,
decoration: BoxDecoration(color: colorAnimation.value),
),
);
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
builder: _buildAnimation,
animation: controller,
);
}
}
builderʹWidgetΛੜ͢ΔؔΛ͢ɻ
Slide 79
Slide 79 text
class _BasicAnimationAppState extends State
with SingleTickerProviderStateMixin {
..
@override
initState() {
super.initState();
controller = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this)
// ..addListener(() {
// setState(() {});
// })
..
}
ݺͼग़͠ݩͰ
addListenerͱsetState͕ෆཁʹɻ
Slide 80
Slide 80 text
AnimatedWidget ͱ
AnimatedBuilder ͷ͍͚
/// A general-purpose widget for building animations.
///
/// AnimatedBuilder is useful for more complex widgets that wish to include
/// an animation as part of a larger build function. To use AnimatedBuilder,
/// simply construct the widget and pass it a builder function.
///
/// For simple cases without additional state, consider using
/// [AnimatedWidget].
///
/// ## Performance optimizations
///
/// If your [builder] function contains a subtree that does not depend on the
/// animation, it's more efficient to build that subtree once instead of
/// rebuilding it on every animation tick.
///
/// If you pass the pre-built subtree as the [child] parameter, the
/// AnimatedBuilder will pass it back to your builder function so that you
/// can incorporate it into your build.
///
/// Using this pre-built child is entirely optional, but can improve
/// performance significantly in some cases and is therefore a good practice.
Slide 81
Slide 81 text
AnimatedWidget ͱ
AnimatedBuilder ͷ͍͚
/// A general-purpose widget for building animations.
///
/// AnimatedBuilder is useful for more complex widgets that wish to include
/// an animation as part of a larger build function. To use AnimatedBuilder,
/// simply construct the widget and pass it a builder function.
///
/// For simple cases without additional state, consider using
/// [AnimatedWidget].
///
/// ## Performance optimizations
///
/// If your [builder] function contains a subtree that does not depend on the
/// animation, it's more efficient to build that subtree once instead of
/// rebuilding it on every animation tick.
///
/// If you pass the pre-built subtree as the [child] parameter, the
/// AnimatedBuilder will pass it back to your builder function so that you
/// can incorporate it into your build.
///
/// Using this pre-built child is entirely optional, but can improve
/// performance significantly in some cases and is therefore a good practice.
builderͷඞཁͷͳ͍γϯϓϧͳWidgetͷ
߹ʹɺAnimatedWidgetΛ͏ͷ͕Α͍ɻ
Ξχϝʔγϣϯ͠ͳ͍WidgetΛؚΉ߹ʹɺ
AnimatedBuilderΛ͏ํ͕ແବͳ࠶ඳըΛ͠
ͳ͍ͷͰύϑΥʔϚϯε͕Α͍ɻ
Slide 82
Slide 82 text
AnimatedWidget
- RelativePositionedTransition
- SlideTransition
- SizeTransition
- ScaleTransition
- DecoratedBoxTransition
- RotationTransition
- PositionedTransition
- AlignTransition
Slide 83
Slide 83 text
AnimatedBuilder
- BottomSheet
- ExpansionTile
- PopupMenu
- ProgressIndicator
- RefreshIndicator
- Scaffold
- SnackBar
- TabBar
- TextField
Slide 84
Slide 84 text
࿈ଓͨ͠
ΞχϝʔγϣϯΛ࡞Δ
Slide 85
Slide 85 text
ॱ൪ʹΞχϝʔγϣϯ
੨͔ΒԫʹมԽ͠ͳ͕Β
େ͖͞มԽ͢Δ
"
େ͖͕͞มԽ͔ͯ͠Β
੨͔ΒԫʹมԽ͢Δ
Slide 86
Slide 86 text
IntervalΛ͏
- CurveΛܧঝͨ͠Ϋϥε
- 0.0 ~ 1.0ͷؒͰΞχϝʔγϣϯͷ։࢝ͱऴ
ྃλΠϛϯάΛࢦఆ͢Δ
Slide 87
Slide 87 text
class SampleAnimation extends StatelessWidget {
SampleAnimation({Key key, this.controller})
: sizeAnimation = Tween(begin: 0.0, end: 300.0).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.0, 0.5, curve: Curves.ease),
// curve: Curves.ease,
),
),
colorAnimation =
ColorTween(begin: Colors.blue[400], end: Colors.yellow[400])
.animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.5, 0.9, curve: Curves.ease),
// curve: Curves.ease,
),
),
super(key: key);
Slide 88
Slide 88 text
class SampleAnimation extends StatelessWidget {
SampleAnimation({Key key, this.controller})
: sizeAnimation = Tween(begin: 0.0, end: 300.0).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.0, 0.5, curve: Curves.ease),
// curve: Curves.ease,
),
),
colorAnimation =
ColorTween(begin: Colors.blue[400], end: Colors.yellow[400])
.animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.5, 0.9, curve: Curves.ease),
// curve: Curves.ease,
),
),
super(key: key);
0 ~ 1000msͷؒͰΞχϝʔγϣϯ
1000 ~ 1800msͷؒͰΞχϝʔγϣϯ
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
ಉ͡ΓํͰΈ߹ΘͤΒΕΔ
TJ[F d
DPMPS d
SPUBUF d
SBEJVT d
OPOF d
Slide 91
Slide 91 text
sizeAnimation = Tween(begin: 0.0, end: 300.0).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.0, 0.3, curve: Curves.ease),
),
),
colorAnimation =
ColorTween(begin: Colors.blue[400], end: Colors.yellow[400])
.animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.3, 0.7, curve: Curves.ease),
),
),
rotateAnimation = Tween(begin: 0.0, end: 0.75).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.4, 0.7, curve: Curves.ease),
),
),
borderRadiusAnimation = BorderRadiusTween(
begin: BorderRadius.circular(0.0),
end: BorderRadius.circular(150.0),
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.7, 0.9, curve: Curves.ease),
),
),
Slide 92
Slide 92 text
sizeAnimation = Tween(begin: 0.0, end: 300.0).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.0, 0.3, curve: Curves.ease),
),
),
colorAnimation =
ColorTween(begin: Colors.blue[400], end: Colors.yellow[400])
.animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.3, 0.7, curve: Curves.ease),
),
),
rotateAnimation = Tween(begin: 0.0, end: 0.75).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.4, 0.7, curve: Curves.ease),
),
),
borderRadiusAnimation = BorderRadiusTween(
begin: BorderRadius.circular(0.0),
end: BorderRadius.circular(150.0),
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.7, 0.9, curve: Curves.ease),
),
),
sizeAnimation : 0 ~ 0.6ඵͰେ͖͘ͳΔɻ
Slide 93
Slide 93 text
sizeAnimation = Tween(begin: 0.0, end: 300.0).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.0, 0.3, curve: Curves.ease),
),
),
colorAnimation =
ColorTween(begin: Colors.blue[400], end: Colors.yellow[400])
.animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.3, 0.7, curve: Curves.ease),
),
),
rotateAnimation = Tween(begin: 0.0, end: 0.75).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.4, 0.7, curve: Curves.ease),
),
),
borderRadiusAnimation = BorderRadiusTween(
begin: BorderRadius.circular(0.0),
end: BorderRadius.circular(150.0),
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.7, 0.9, curve: Curves.ease),
),
),
colorAnimation : 0.6 ~ 1.4ඵͰ৭Λม͑Δɻ
rotateAnimation : 0.8 ~ 1.4ඵͰ270ճస͢Δɻ
Slide 94
Slide 94 text
sizeAnimation = Tween(begin: 0.0, end: 300.0).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.0, 0.3, curve: Curves.ease),
),
),
colorAnimation =
ColorTween(begin: Colors.blue[400], end: Colors.yellow[400])
.animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.3, 0.7, curve: Curves.ease),
),
),
rotateAnimation = Tween(begin: 0.0, end: 0.75).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.4, 0.7, curve: Curves.ease),
),
),
borderRadiusAnimation = BorderRadiusTween(
begin: BorderRadius.circular(0.0),
end: BorderRadius.circular(150.0),
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.7, 0.9, curve: Curves.ease),
),
),
borderRadiusAnimation :
1.4 ~ 1.8ඵͰ˘Λ˓ʹมԽͤ͞Δɻ
Slide 95
Slide 95 text
Widget _buildAnimation(BuildContext context, Widget child) {
return Center(
child: Transform(
transform: Matrix4.rotationZ(rotateAnimation.value * math.pi * 2.0),
alignment: Alignment.center,
child: Container(
width: sizeAnimation.value,
height: sizeAnimation.value,
decoration: BoxDecoration(
color: colorAnimation.value,
borderRadius: borderRadiusAnimation.value),
),
),
);
}
֤animationͷΛͬͯWidgetπϦʔΛߏஙɻ
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
·ͱΊ
Slide 98
Slide 98 text
AnimationController
Ξχϝʔγϣϯͷ࣌ؒ
։࢝ɾऴྃͳͲΛ੍ޚ͢Δɻ
Slide 99
Slide 99 text
Tween
ΞχϝʔγϣϯͰมߋ͢Δ
(0.0 ~ 0.1)Λɺผͷ
ࣈ৭ͳͲͷʹม͢Δɻ
Slide 100
Slide 100 text
CurvedAnimation
ΞχϝʔγϣϯͰมԽ͢Δ
ͷ؇ٸΛ͚ͭΔɻ
IntervalΛ࣮͑ߦλΠ
ϛϯάม͑ΒΕΔɻ
Slide 101
Slide 101 text
AnimatedBuilder
AnimationControllerͷ
͕มߋ͞ΕΔ͝ͱʹ
ඳը͢ΔWidgetΛͭ͘ΔϏ
ϧμʔɻ
Slide 102
Slide 102 text
ͬͱΓ͍ͨํͪ͜Β
- FlutterΞχϝʔγϣϯͷΫϥε֓೦ɺͦΕΒΛΈ߹Θͤͨ
αϯϓϧͷઆ໌
https://flutter.io/tutorials/animation/
https://flutter.io/animations/
- TweenͷΧελϚΠζAnimatedBuilderͷೖΕࢠͳͲɺগ͠
ෳࡶͳάϥϑΞχϝʔγϣϯΛ࡞ΔνϡʔτϦΞϧ
https://medium.com/flutter-io/zero-to-one-with-flutter-43b13fd7b354
https://medium.com/flutter-io/zero-to-one-with-flutter-part-two-
5aa2f06655cb
Slide 103
Slide 103 text
Thanks!
Enjoy Flutter!