From 349ca7bc6f3168c8cf20d8f140c11cc462c291de Mon Sep 17 00:00:00 2001 From: John Ryan Date: Tue, 13 Aug 2019 14:13:57 -0700 Subject: [PATCH] add TweenSequence sample (#127) * Add TweenSequence sample * rename to TweenSequenceDemo * add copyright headers * remote type * introduce animated builder earlier in basics/ so that other examples can use it * formatting * use async / await, increase animation duration --- animations/lib/main.dart | 11 ++- .../lib/src/basics/01_animated_container.dart | 4 + .../lib/src/basics/02_page_route_builder.dart | 4 + animations/lib/src/basics/04_tweens.dart | 4 + ..._builder.dart => 05_animated_builder.dart} | 6 +- ...custom_tween.dart => 06_custom_tween.dart} | 21 ++++-- .../lib/src/basics/07_tween_sequence.dart | 74 +++++++++++++++++++ 7 files changed, 111 insertions(+), 13 deletions(-) rename animations/lib/src/basics/{06_animated_builder.dart => 05_animated_builder.dart} (88%) rename animations/lib/src/basics/{05_custom_tween.dart => 06_custom_tween.dart} (85%) create mode 100644 animations/lib/src/basics/07_tween_sequence.dart diff --git a/animations/lib/main.dart b/animations/lib/main.dart index 4087e8638..d57e5e6e7 100644 --- a/animations/lib/main.dart +++ b/animations/lib/main.dart @@ -8,8 +8,9 @@ import 'src/basics/01_animated_container.dart'; import 'src/basics/02_page_route_builder.dart'; import 'src/basics/03_animation_controller.dart'; import 'src/basics/04_tweens.dart'; -import 'src/basics/05_custom_tween.dart'; -import 'src/basics/06_animated_builder.dart'; +import 'src/basics/05_animated_builder.dart'; +import 'src/basics/06_custom_tween.dart'; +import 'src/basics/07_tween_sequence.dart'; import 'src/misc/card_swipe.dart'; import 'src/misc/carousel.dart'; import 'src/misc/expand_card.dart'; @@ -35,10 +36,12 @@ final basicDemos = [ Demo('Animation Controller', AnimationControllerDemo.routeName, (context) => AnimationControllerDemo()), Demo('Tweens', TweenDemo.routeName, (context) => TweenDemo()), - Demo('Custom Tween', CustomTweenDemo.routeName, - (context) => CustomTweenDemo()), Demo('AnimatedBuilder', AnimatedBuilderDemo.routeName, (context) => AnimatedBuilderDemo()), + Demo('Custom Tween', CustomTweenDemo.routeName, + (context) => CustomTweenDemo()), + Demo('Tween Sequences', TweenSequenceDemo.routeName, + (context) => TweenSequenceDemo()), ]; final miscDemos = [ diff --git a/animations/lib/src/basics/01_animated_container.dart b/animations/lib/src/basics/01_animated_container.dart index e09b8a46c..a2c7fda50 100644 --- a/animations/lib/src/basics/01_animated_container.dart +++ b/animations/lib/src/basics/01_animated_container.dart @@ -1,3 +1,7 @@ +// Copyright 2019 The Flutter team. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + import 'dart:math'; import 'package:flutter/material.dart'; diff --git a/animations/lib/src/basics/02_page_route_builder.dart b/animations/lib/src/basics/02_page_route_builder.dart index 1180114ab..40967347c 100644 --- a/animations/lib/src/basics/02_page_route_builder.dart +++ b/animations/lib/src/basics/02_page_route_builder.dart @@ -1,3 +1,7 @@ +// Copyright 2019 The Flutter team. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + import 'package:flutter/material.dart'; class PageRouteBuilderDemo extends StatelessWidget { diff --git a/animations/lib/src/basics/04_tweens.dart b/animations/lib/src/basics/04_tweens.dart index 191515990..c029e584e 100644 --- a/animations/lib/src/basics/04_tweens.dart +++ b/animations/lib/src/basics/04_tweens.dart @@ -1,3 +1,7 @@ +// Copyright 2019 The Flutter team. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + import 'package:flutter/material.dart'; class TweenDemo extends StatefulWidget { diff --git a/animations/lib/src/basics/06_animated_builder.dart b/animations/lib/src/basics/05_animated_builder.dart similarity index 88% rename from animations/lib/src/basics/06_animated_builder.dart rename to animations/lib/src/basics/05_animated_builder.dart index 13ce24d88..90f92e1eb 100644 --- a/animations/lib/src/basics/06_animated_builder.dart +++ b/animations/lib/src/basics/05_animated_builder.dart @@ -1,3 +1,7 @@ +// Copyright 2019 The Flutter team. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + import 'package:flutter/material.dart'; class AnimatedBuilderDemo extends StatefulWidget { @@ -32,7 +36,7 @@ class _AnimatedBuilderDemoState extends State appBar: AppBar(), body: Center( child: AnimatedBuilder( - animation: this.animation, + animation: animation, builder: (context, child) { return MaterialButton( color: animation.value, diff --git a/animations/lib/src/basics/05_custom_tween.dart b/animations/lib/src/basics/06_custom_tween.dart similarity index 85% rename from animations/lib/src/basics/05_custom_tween.dart rename to animations/lib/src/basics/06_custom_tween.dart index 5785f7be8..8bd56b354 100644 --- a/animations/lib/src/basics/05_custom_tween.dart +++ b/animations/lib/src/basics/06_custom_tween.dart @@ -1,3 +1,7 @@ +// Copyright 2019 The Flutter team. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + import 'package:flutter/material.dart'; class TypewriterTween extends Tween { @@ -26,11 +30,7 @@ class _CustomTweenDemoState extends State void initState() { super.initState(); - controller = AnimationController(vsync: this, duration: _duration) - ..addListener(() { - // Marks the widget tree as dirty - setState(() {}); - }); + controller = AnimationController(vsync: this, duration: _duration); animation = TypewriterTween(end: message).animate(controller); } @@ -70,9 +70,14 @@ class _CustomTweenDemoState extends State child: Card( child: Container( padding: EdgeInsets.all(8.0), - child: Text('${animation.value}', - style: - TextStyle(fontSize: 16, fontFamily: 'SpecialElite')), + child: AnimatedBuilder( + animation: animation, + builder: (context, child) { + return Text('${animation.value}', + style: TextStyle( + fontSize: 16, fontFamily: 'SpecialElite')); + }, + ), ), ), ), diff --git a/animations/lib/src/basics/07_tween_sequence.dart b/animations/lib/src/basics/07_tween_sequence.dart new file mode 100644 index 000000000..7ad91ac96 --- /dev/null +++ b/animations/lib/src/basics/07_tween_sequence.dart @@ -0,0 +1,74 @@ +// Copyright 2019 The Flutter team. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import 'package:flutter/material.dart'; + +class TweenSequenceDemo extends StatefulWidget { + static const String routeName = '/basics/chaining_tweens'; + + @override + _TweenSequenceDemoState createState() => _TweenSequenceDemoState(); +} + +class _TweenSequenceDemoState extends State + with SingleTickerProviderStateMixin { + static const Duration duration = Duration(seconds: 3); + AnimationController controller; + Animation animation; + + static final colors = [ + Colors.red, + Colors.orange, + Colors.yellow, + Colors.green, + Colors.blue, + Colors.indigo, + Colors.purple, + ]; + + void initState() { + super.initState(); + + final sequenceItems = >[]; + + for (var i = 0; i < colors.length; i++) { + final beginColor = colors[i]; + final endColor = colors[(i + 1) % colors.length]; + final weight = 1 / colors.length; + + sequenceItems.add( + TweenSequenceItem( + tween: ColorTween(begin: beginColor, end: endColor), + weight: weight, + ), + ); + } + + controller = AnimationController(duration: duration, vsync: this); + animation = TweenSequence(sequenceItems).animate(controller); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(), + body: Center( + child: AnimatedBuilder( + animation: animation, + builder: (context, child) { + return MaterialButton( + color: animation.value, + onPressed: () async { + await controller.forward(); + controller.reset(); + }, + child: child, + ); + }, + child: Text('Animate', style: TextStyle(color: Colors.white)), + ), + ), + ); + } +}