没有过渡动画效果
来源:7-10 动画Animation开发指南-Hero动画-2
慕斯8050152
2021-11-02
老师,为啥我运行没有动画过渡效果,安卓和苹果模拟器和苹果真机都不行。
以下是我运行的代码:
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart' show timeDilation;
import 'dart:math' as math;
void main() =>
runApp(MaterialApp(
home: RadialExpansionDemo(),
));
class Photo extends StatelessWidget {
final String? photo;
final VoidCallback? onTap;
final double? width;
Photo({Key? key, this.photo, this.onTap, this.width}) : super(key: key);
@override
Widget build(BuildContext context) {
return Material(
color: Theme
.of(context)
.primaryColor
.withOpacity(0.25),
child: InkWell(
onTap: onTap,
child: LayoutBuilder(
builder: (context, size) {
return Image.network(
photo!,
fit: BoxFit.contain,
);
},
),
),
);
}
}
class RadialExpansion extends StatelessWidget {
final double? maxRadius;
final clipRectSize;
final Widget? child;
@override
Widget build(BuildContext context) {
return ClipOval(
child: Center(
child: SizedBox(
width: clipRectSize,
height: clipRectSize,
child: ClipRect(
child: child,
),
),
),
);
}
RadialExpansion({Key? key, this.maxRadius, this.child})
: clipRectSize = 2.0 * (maxRadius! / math.sqrt2),
super(key: key);
}
class RadialExpansionDemo extends StatelessWidget {
static const double kMinRadius = 32.0;
static const double kMaxRadius = 128.0;
static const opacityCurve =
const Interval(0.0, 0.75, curve: Curves.fastOutSlowIn);
static RectTween _createRectTween(Rect? begin, Rect? end) {
return MaterialRectCenterArcTween(begin: begin, end: end);
}
static Widget _buildPage(BuildContext context, String imageName,
String description) {
return Container(
color: Theme
.of(context)
.canvasColor,
child: Center(
child: Card(
elevation: 8,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
width: kMaxRadius * 2,
height: kMaxRadius * 2,
child: Hero(
createRectTween: _createRectTween,
tag: imageName,
child: RadialExpansion(
maxRadius: kMaxRadius,
child: Photo(
photo: imageName,
onTap: () {
Navigator.of(context).pop();
},
),
),
),
),
Text(
description,
style: TextStyle(fontWeight: FontWeight.bold),
textScaleFactor: 3.0,
),
const SizedBox(height: 16),
],
),
),
),
);
}
Widget _buildHero(BuildContext context, String imageName,
String description) {
return Container(
width: kMinRadius * 2.0,
height: kMinRadius * 2.0,
child: Hero(
createRectTween: _createRectTween,
tag: imageName,
child: RadialExpansion(
maxRadius: kMaxRadius,
child: Photo(
photo: imageName,
onTap: () {
Navigator.of(context).push(PageRouteBuilder(
pageBuilder: (BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation) {
return AnimatedBuilder(
animation: animation, builder: (context, child) {
return Opacity(
opacity: opacityCurve.transform(animation.value), child
:_buildPage(context, imageName, description),);
});
}));
},
),
),
),
);
}
@override
Widget build(BuildContext context) {
timeDilation = 5.0;
return Scaffold(
appBar: AppBar(
title: const Text('Radial Transition Demo'),
),
body: Container(
padding: EdgeInsets.all(32),
alignment: FractionalOffset.bottomLeft,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_buildHero(context, 'http://www.devio.org/img/avatar.png', 'Chair'),
_buildHero(context, 'http://www.devio.org/img/avatar.png', 'Binoculars'),
_buildHero(context, 'http://www.devio.org/img/avatar.png', 'Beach ball'),
],
),
),
);
}
}
写回答
1回答
-
CrazyCodeBoy
2021-11-03
对照下这块课程源码检查下你的代码实现看是否有出入的地方:https://git.imooc.com/coding-321/flutter_trip/src/master/doc/%E5%8A%A8%E7%94%BBAnimation%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97.md
012021-11-03
相似问题