如何動畫徽標從應用欄到抽屜的過渡？

Question

當我打開或滑動抽屜時，我想要從藍色徽標到黑色徽標的動畫交錯過渡。

SilverAppBar中的藍色徽標：

黑色 flutter 標志：

我想知道是否有一種方法可以使 animation 在單擊漢堡菜單或滑動抽屜時將藍色 flutter 徽標移動到抽屜菜單，並且在移動時我希望它改變顏色，我該怎么做？

代碼：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final _scaffoldKey = GlobalKey<ScaffoldState>();
  bool _pinned = true;
  bool _snap = false;
  bool _floating = false;

// [SliverAppBar]s are typically used in [CustomScrollView.slivers], which in
// turn can be placed in a [Scaffold.body].
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              leading: IconButton(
                icon: const Icon(Icons.menu,
                    size: 40), // change this size and style
                onPressed: () => _scaffoldKey.currentState?.openDrawer(),
              ),
              actions: const [
                Padding(
                  padding: EdgeInsets.fromLTRB(5, 20, 80, 5),
                )
              ],
              pinned: _pinned,
              snap: _snap,
              floating: _floating,
              expandedHeight: 160.0,
              flexibleSpace: const FlexibleSpaceBar(
                title: FlutterLogo(
                  size: 100,
                ),
              ),
            ),
          ],
        ),
        drawer: Drawer(
          child: ListView(
            children: [
              DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Center(child: Image.asset("assets/cib-flutter.png")),
              )
            ],
          ),
        ));
  }
}

編輯

我認為我不應該完全使用Drawer()並且應該從 SilverAppBar 視圖向右進行自定義動畫轉換？

Answer 1

我認為使用hero小部件

像這樣：

在應用欄中：

Hero(
  child: Image.asset('your_img_path'),
  tag: 'logo',
)

在抽屜里：

Hero(
  child: Image.asset('your_img_path'),
  tag: 'logo',
)

檢查它們是否與制作 animation 的tag相同