From e5854c3dca2d8b68f98a969bcc1d1e96d9cedd38 Mon Sep 17 00:00:00 2001 From: Shawn Date: Tue, 22 Nov 2022 10:59:25 -0700 Subject: [PATCH] Play with standardizing illustrations-mg --- .../common/illustration_mg.dart | 48 ++++++++++ .../great_wall_illustration.dart | 75 +++++++++------- .../pyramids_giza_illustration.dart | 88 +++++++++++-------- 3 files changed, 141 insertions(+), 70 deletions(-) create mode 100644 lib/ui/wonder_illustrations/common/illustration_mg.dart diff --git a/lib/ui/wonder_illustrations/common/illustration_mg.dart b/lib/ui/wonder_illustrations/common/illustration_mg.dart new file mode 100644 index 00000000..f3957723 --- /dev/null +++ b/lib/ui/wonder_illustrations/common/illustration_mg.dart @@ -0,0 +1,48 @@ +import 'package:wonders/common_libs.dart'; +import 'package:wonders/ui/wonder_illustrations/common/wonder_hero.dart'; +import 'package:wonders/ui/wonder_illustrations/common/wonder_illustration_config.dart'; + +class IllustrationMg extends StatelessWidget { + const IllustrationMg( + this.imagePath, { + Key? key, + required this.config, + required this.anim, + required this.type, + required this.heightFraction, + this.maxHeight = 700, + }) : super(key: key); + + final String imagePath; + final WonderIllustrationConfig config; + final Animation anim; + final WonderType type; + final double maxHeight; + final double heightFraction; + String get assetPath => type.assetPath; + + @override + Widget build(BuildContext context) { + return Padding( + padding: EdgeInsets.only(top: $styles.insets.sm), + child: LayoutBuilder(builder: (_, constraints) { + final height = min(maxHeight, constraints.maxHeight) * heightFraction; + return Center( + child: WonderHero( + config, + '$imagePath-hero', + child: Transform.scale( + scale: 4 + config.zoom * .5, + child: Image.asset( + '$assetPath/$imagePath', + opacity: anim, + height: height * .25, + fit: BoxFit.cover, + ), + ), + ), + ); + }), + ); + } +} diff --git a/lib/ui/wonder_illustrations/great_wall_illustration.dart b/lib/ui/wonder_illustrations/great_wall_illustration.dart index da866034..67682ae8 100644 --- a/lib/ui/wonder_illustrations/great_wall_illustration.dart +++ b/lib/ui/wonder_illustrations/great_wall_illustration.dart @@ -1,5 +1,6 @@ import 'package:wonders/common_libs.dart'; import 'package:wonders/ui/common/fade_color_transition.dart'; +import 'package:wonders/ui/wonder_illustrations/common/illustration_mg.dart'; import 'package:wonders/ui/wonder_illustrations/common/paint_textures.dart'; import 'package:wonders/ui/wonder_illustrations/common/wonder_hero.dart'; import 'package:wonders/ui/wonder_illustrations/common/wonder_illustration_builder.dart'; @@ -52,41 +53,53 @@ class GreatWallIllustration extends StatelessWidget { ]; } - List _buildMg(BuildContext context, Animation anim) => [ - Center( - child: FractionalTranslation( - translation: Offset(0, config.shortMode ? .1 * anim.value : 0), - child: FractionallySizedBox( - widthFactor: config.shortMode ? null : 1.3, - child: WonderHero( - config, - 'great-wall-mg', - child: Image.asset( - '$assetPath/great-wall.png', - opacity: anim, - width: config.shortMode ? 300 : 500, - ), + List _buildMg(BuildContext context, Animation anim) { + return [ + IllustrationMg( + 'great-wall.png', + type: WonderType.greatWall, + anim: anim, + config: config, + maxHeight: 800, + heightFraction: .85, + ), + ]; + return [ + Center( + child: FractionalTranslation( + translation: Offset(0, config.shortMode ? .1 * anim.value : 0), + child: FractionallySizedBox( + widthFactor: config.shortMode ? null : 1.3, + child: WonderHero( + config, + 'great-wall-mg', + child: Image.asset( + '$assetPath/great-wall.png', + opacity: anim, + width: config.shortMode ? 300 : 500, ), ), ), + ), - // child: FractionalTranslation( - // translation: Offset(0, 0), - // child: Transform.scale( - // scale: 1, //config.shortMode ? .95 : 1.4 + config.zoom * .2, - // child: WonderHero( - // config, - // 'great-wall-mg', - // child: Image.asset( - // '$assetPath/great-wall.png', - // opacity: anim, - // width: 700, - // ), - // ), - // ), - // ), - ) - ]; + // child: FractionalTranslation( + // translation: Offset(0, 0), + // child: Transform.scale( + // scale: 1, //config.shortMode ? .95 : 1.4 + config.zoom * .2, + // child: WonderHero( + // config, + // 'great-wall-mg', + // child: Image.asset( + // '$assetPath/great-wall.png', + // opacity: anim, + // width: 700, + // ), + // ), + // ), + // ), + ) + ]; + } List _buildFg(BuildContext context, Animation anim) { final curvedAnim = Curves.easeOut.transform(anim.value); diff --git a/lib/ui/wonder_illustrations/pyramids_giza_illustration.dart b/lib/ui/wonder_illustrations/pyramids_giza_illustration.dart index fd94556f..480fd111 100644 --- a/lib/ui/wonder_illustrations/pyramids_giza_illustration.dart +++ b/lib/ui/wonder_illustrations/pyramids_giza_illustration.dart @@ -1,5 +1,6 @@ import 'package:wonders/common_libs.dart'; import 'package:wonders/ui/common/fade_color_transition.dart'; +import 'package:wonders/ui/wonder_illustrations/common/illustration_mg.dart'; import 'package:wonders/ui/wonder_illustrations/common/paint_textures.dart'; import 'package:wonders/ui/wonder_illustrations/common/wonder_hero.dart'; import 'package:wonders/ui/wonder_illustrations/common/wonder_illustration_builder.dart'; @@ -51,52 +52,61 @@ class PyramidsGizaIllustration extends StatelessWidget { List _buildMg(BuildContext context, Animation anim) { return [ - Align( - alignment: Alignment(0, config.shortMode ? 0.9 : 0), - child: WonderHero(config, 'pyramids-mg', - child: Transform.scale( - scale: 1 + config.zoom * .1, - child: FractionallySizedBox( - widthFactor: config.shortMode ? 1 : 1.94, - child: Image.asset('$assetPath/pyramids.png', fit: BoxFit.contain, opacity: anim), - ), - )), + IllustrationMg( + 'pyramids.png', + type: WonderType.pyramidsGiza, + anim: anim, + config: config, + maxHeight: 600, + heightFraction: .85, ), + + // Align( + // alignment: Alignment(0, config.shortMode ? 0.9 : 0), + // child: WonderHero(config, 'pyramids-mg', + // child: Transform.scale( + // scale: 1 + config.zoom * .1, + // child: FractionallySizedBox( + // widthFactor: config.shortMode ? 1 : 1.94, + // child: Image.asset('$assetPath/pyramids.png', fit: BoxFit.contain, opacity: anim), + // ), + // )), + // ), ]; } List _buildFg(BuildContext context, Animation anim) { final curvedAnim = Curves.easeOut.transform(anim.value); return [ - Transform.scale( - scale: 1 + config.zoom * .2, - child: Transform.translate( - offset: Offset(0, 10 * (1 - curvedAnim)), - child: BottomCenter( - child: FractionallySizedBox( - widthFactor: 1.2, - child: FractionalTranslation( - translation: Offset(0, -1.2), - child: Image.asset('$assetPath/foreground-back.png', opacity: anim, fit: BoxFit.cover)), - ), - ), - ), - ), - Transform.scale( - scale: 1 + config.zoom * .4, - child: Transform.translate( - offset: Offset(0, 30 * (1 - curvedAnim)), - child: BottomCenter( - child: FractionallySizedBox( - widthFactor: 1.52, - child: FractionalTranslation( - translation: Offset(0, 0.1), - child: Image.asset('$assetPath/foreground-front.png', opacity: anim, fit: BoxFit.cover), - ), - ), - ), - ), - ), + // Transform.scale( + // scale: 1 + config.zoom * .2, + // child: Transform.translate( + // offset: Offset(0, 10 * (1 - curvedAnim)), + // child: BottomCenter( + // child: FractionallySizedBox( + // widthFactor: 1.2, + // child: FractionalTranslation( + // translation: Offset(0, -1.2), + // child: Image.asset('$assetPath/foreground-back.png', opacity: anim, fit: BoxFit.cover)), + // ), + // ), + // ), + // ), + // Transform.scale( + // scale: 1 + config.zoom * .4, + // child: Transform.translate( + // offset: Offset(0, 30 * (1 - curvedAnim)), + // child: BottomCenter( + // child: FractionallySizedBox( + // widthFactor: 1.52, + // child: FractionalTranslation( + // translation: Offset(0, 0.1), + // child: Image.asset('$assetPath/foreground-front.png', opacity: anim, fit: BoxFit.cover), + // ), + // ), + // ), + // ), + // ), ]; } }