當給定 onTap 時，我想在動畫過渡中將圖像（一只蜜蜂）從第 1 頁的左上角移動到第 2 頁的右下角

Question

我正在開發一個應用程序，我想以動畫方式移動資產，在這種情況下是蜜蜂的圖像，從第 1 頁的左上角到第 2 頁的右下角，顯示蜜蜂飛到第 2 頁，所有這一切都發生在用戶單擊封裝在手勢檢測器中的 onTap 按鈕並且頁面從第 1 頁轉換到第 2 頁時。

我附上代碼以供參考。 這是第 1 頁

 // ignore_for_file: prefer_const_constructors

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:learn_n_fun/landingScreens/page2.dart';

import '../animation/slidingAnimationForward.dart';

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

  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  @override
  Widget build(BuildContext context) {
    var height = MediaQuery.of(context).size.height;
    var width = MediaQuery.of(context).size.width;
    return Scaffold(
        backgroundColor: Colors.white,
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Expanded(
                flex: 2,
                child: Padding(
                  padding: EdgeInsets.fromLTRB(
                      width / 25, height / 10, width / 20, 0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "Welcome",
                        style: TextStyle(
                          // fontSize: height / 20,
                          fontSize: 55,
                          fontWeight: FontWeight.w800,
                          fontFamily: "Playfair Display",
                        ),
                      ),
                      SizedBox(
                        height: height / 100,
                      ),
                      Text(
                        "Have you ever wondered what a Business Model Canvas is?",
                        style: TextStyle(
                          // fontWeight: FontWeight.w400,
                          // fontSize: height / 35,
                          fontSize: 22,
                          fontFamily: "Lato",
                        ),
                      )
                    ],
                  ),
                )),
            Padding(
                padding: EdgeInsets.all(0),
                // flex: 4,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      height: height / 8,
                      child: RotationTransition(
                        turns: AlwaysStoppedAnimation(-70 / 360),
                        child: Image.asset(
                          "assets/images/bee.png",
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.fromLTRB(width / 9.5, 0, 0, 0),
                      child: Image.asset(
                        "assets/images/florist16.png",
                        fit: BoxFit.cover,
                      ),
                    ),
                  ],
                )),
            Expanded(
                flex: 1,
                child: Container(
                  margin: EdgeInsets.fromLTRB(
                      width / 25, height / 80, width / 25, 0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        children: [
                          CircleAvatar(
                            radius: width / 100,
                            backgroundColor: Colors.black,
                          ),
                          const SizedBox(
                            width: 4,
                          ),
                          CircleAvatar(
                            radius: width / 100,
                            backgroundColor: Colors.grey.withOpacity(.5),
                          ),
                          const SizedBox(
                            width: 4,
                          ),
                          CircleAvatar(
                            radius: width / 100,
                            backgroundColor: Colors.grey.withOpacity(.5),
                          )
                        ],
                      ),
                      GestureDetector(
                          onTap: () {
                            Navigator.push(
                                context, SlidingPageF(child: const Page2()));
                          },
                          child: const ImageIcon(
                            AssetImage("assets/images/Front_arrow.png"),
                            size: 50,
                            color: Colors.black,
                          ))
                    ],
                  ),
                )),
          ],
        ));
  }
}

關於我如何實現這一目標的任何想法？

Answer 1

我認為有 AnimatedAlign 小部件適用於您的情況。 https://api.flutter.dev/flutter/widgets/AnimatedAlign-class.html

Answer 2

你可以用Hero小部件來做到這一點。 https://api.flutter.dev/flutter/widgets/Hero-class.html