没有过渡动画效果

来源: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

0
1
慕斯8050152
多次尝试发现是这句代码的问题: _buildHero(context, 'http://www.devio.org/img/avatar.png', 'Chair'), 如果直接复制老师的代码是有动画的,我自己手动敲上去这句代码就不好使
2021-11-03
共1条回复

Flutter从入门到进阶 实战携程网App 一网打尽核心技术

解锁Flutter开发新姿势,,系统掌握Flutter开发核心技术。

4788 学习 · 3270 问题

查看课程