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

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

@ -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,7 +53,18 @@ class GreatWallIllustration extends StatelessWidget {
];
}
List<Widget> _buildMg(BuildContext context, Animation<double> anim) => [
List<Widget> _buildMg(BuildContext context, Animation<double> 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),
@ -87,6 +99,7 @@ class GreatWallIllustration extends StatelessWidget {
// ),
)
];
}
List<Widget> _buildFg(BuildContext context, Animation<double> anim) {
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/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<Widget> _buildMg(BuildContext context, Animation<double> 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<Widget> _buildFg(BuildContext context, Animation<double> 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),
// ),
// ),
// ),
// ),
// ),
];
}
}