bachelor/wonders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Play with standardizing illustrations-mg

Browse Source
This commit is contained in:
Shawn 2022-11-22 10:59:25 -07:00
parent e9ae67bff5
commit e5854c3dca
3 changed files with 141 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
lib/ui/wonder_illustrations/common/illustration_mg.dart Normal file
View File

@ -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<double> 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,
),
),
),
);
}),
);
}
}

75
lib/ui/wonder_illustrations/great_wall_illustration.dart
View File

@ -1,5 +1,6 @@
import 'package:wonders/common_libs.dart'; import 'package:wonders/common_libs.dart';
import 'package:wonders/ui/common/fade_color_transition.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/paint_textures.dart';
import 'package:wonders/ui/wonder_illustrations/common/wonder_hero.dart'; import 'package:wonders/ui/wonder_illustrations/common/wonder_hero.dart';
import 'package:wonders/ui/wonder_illustrations/common/wonder_illustration_builder.dart'; import 'package:wonders/ui/wonder_illustrations/common/wonder_illustration_builder.dart';
@ -52,41 +53,53 @@ class GreatWallIllustration extends StatelessWidget {
]; ];
} }
List<Widget> _buildMg(BuildContext context, Animation<double> anim) => [ List<Widget> _buildMg(BuildContext context, Animation<double> anim) {
Center( return [
child: FractionalTranslation( IllustrationMg(
translation: Offset(0, config.shortMode ? .1 * anim.value : 0), 'great-wall.png',
child: FractionallySizedBox( type: WonderType.greatWall,
widthFactor: config.shortMode ? null : 1.3, anim: anim,
child: WonderHero( config: config,
config, maxHeight: 800,
'great-wall-mg', heightFraction: .85,
child: Image.asset( ),
'$assetPath/great-wall.png', ];
opacity: anim, return [
width: config.shortMode ? 300 : 500, 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( // child: FractionalTranslation(
// translation: Offset(0, 0), // translation: Offset(0, 0),
// child: Transform.scale( // child: Transform.scale(
// scale: 1, //config.shortMode ? .95 : 1.4 + config.zoom * .2, // scale: 1, //config.shortMode ? .95 : 1.4 + config.zoom * .2,
// child: WonderHero( // child: WonderHero(
// config, // config,
// 'great-wall-mg', // 'great-wall-mg',
// child: Image.asset( // child: Image.asset(
// '$assetPath/great-wall.png', // '$assetPath/great-wall.png',
// opacity: anim, // opacity: anim,
// width: 700, // width: 700,
// ), // ),
// ), // ),
// ), // ),
// ), // ),
) )
]; ];
}
List<Widget> _buildFg(BuildContext context, Animation<double> anim) { List<Widget> _buildFg(BuildContext context, Animation<double> anim) {
final curvedAnim = Curves.easeOut.transform(anim.value); final curvedAnim = Curves.easeOut.transform(anim.value);

88
lib/ui/wonder_illustrations/pyramids_giza_illustration.dart
View File

@ -1,5 +1,6 @@
import 'package:wonders/common_libs.dart'; import 'package:wonders/common_libs.dart';
import 'package:wonders/ui/common/fade_color_transition.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/paint_textures.dart';
import 'package:wonders/ui/wonder_illustrations/common/wonder_hero.dart'; import 'package:wonders/ui/wonder_illustrations/common/wonder_hero.dart';
import 'package:wonders/ui/wonder_illustrations/common/wonder_illustration_builder.dart'; import 'package:wonders/ui/wonder_illustrations/common/wonder_illustration_builder.dart';
@ -51,52 +52,61 @@ class PyramidsGizaIllustration extends StatelessWidget {
List<Widget> _buildMg(BuildContext context, Animation<double> anim) { List<Widget> _buildMg(BuildContext context, Animation<double> anim) {
return [ return [
Align( IllustrationMg(
alignment: Alignment(0, config.shortMode ? 0.9 : 0), 'pyramids.png',
child: WonderHero(config, 'pyramids-mg', type: WonderType.pyramidsGiza,
child: Transform.scale( anim: anim,
scale: 1 + config.zoom * .1, config: config,
child: FractionallySizedBox( maxHeight: 600,
widthFactor: config.shortMode ? 1 : 1.94, heightFraction: .85,
child: Image.asset('$assetPath/pyramids.png', fit: BoxFit.contain, opacity: anim),
),
)),
), ),
// 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<Widget> _buildFg(BuildContext context, Animation<double> anim) { List<Widget> _buildFg(BuildContext context, Animation<double> anim) {
final curvedAnim = Curves.easeOut.transform(anim.value); final curvedAnim = Curves.easeOut.transform(anim.value);
return [ return [
Transform.scale( // Transform.scale(
scale: 1 + config.zoom * .2, // scale: 1 + config.zoom * .2,
child: Transform.translate( // child: Transform.translate(
offset: Offset(0, 10 * (1 - curvedAnim)), // offset: Offset(0, 10 * (1 - curvedAnim)),
child: BottomCenter( // child: BottomCenter(
child: FractionallySizedBox( // child: FractionallySizedBox(
widthFactor: 1.2, // widthFactor: 1.2,
child: FractionalTranslation( // child: FractionalTranslation(
translation: Offset(0, -1.2), // translation: Offset(0, -1.2),
child: Image.asset('$assetPath/foreground-back.png', opacity: anim, fit: BoxFit.cover)), // child: Image.asset('$assetPath/foreground-back.png', opacity: anim, fit: BoxFit.cover)),
), // ),
), // ),
), // ),
), // ),
Transform.scale( // Transform.scale(
scale: 1 + config.zoom * .4, // scale: 1 + config.zoom * .4,
child: Transform.translate( // child: Transform.translate(
offset: Offset(0, 30 * (1 - curvedAnim)), // offset: Offset(0, 30 * (1 - curvedAnim)),
child: BottomCenter( // child: BottomCenter(
child: FractionallySizedBox( // child: FractionallySizedBox(
widthFactor: 1.52, // widthFactor: 1.52,
child: FractionalTranslation( // child: FractionalTranslation(
translation: Offset(0, 0.1), // translation: Offset(0, 0.1),
child: Image.asset('$assetPath/foreground-front.png', opacity: anim, fit: BoxFit.cover), // child: Image.asset('$assetPath/foreground-front.png', opacity: anim, fit: BoxFit.cover),
), // ),
), // ),
), // ),
), // ),
), // ),
]; ];
} }
} }