Flutter - 相对位置动画

Question

伙计们，你们好吗？

我正在使用 Flutter 制作应用，遇到了与动画相关的问题。

根据我的研究，我想制作一个动画，其中动画后屏幕上的中心图像位于顶部（topcenter）。

但我没有找到一种方法来使用相对值（例如实际屏幕高度值）仅使用我将描述的值（这会导致不同尺寸的屏幕出现问题）进行动画处理。

有人有解决办法吗？

 AnimatedLogo({this.controller}) : 
    imagePosition = Tween(
      begin: (Use screen size here without context), 
      end: (0 to topcenter)
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(0.0, 0.150),
      )
 );

Answer 1

你有一些选择，你可以使用 AnimatedContainer 或 AnimatedPositioned
所有这些选项都可以使用 AlignmentDirectional.bottomCenter 、 topCenter

其他选项可以参考这个https://medium.com/aubergine-solutions/options-to-animate-in-flutter-2cec6612c207

AnimatedContainer 的完整代码

import 'package:flutter/material.dart';
import 'dart:ui';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: Option5()
    );
  }
}



class Option5 extends StatefulWidget {
  @override
  _Option5State createState() => _Option5State();
}

class _Option5State extends State<Option5> with TickerProviderStateMixin {

  AlignmentDirectional _ironManAlignment = AlignmentDirectional.bottomCenter; //AlignmentDirectional(0.0, 0.7);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage('assets/images/person-96.png'),
                  fit: BoxFit.cover)),
        ),
        AnimatedContainer(
          duration: Duration(seconds: 3),
          alignment: _ironManAlignment,
          child: Container(
            height: 250,
            width: 150,
            child: Image.asset('assets/images/alarm-80.png'),
          ),
        ),
        Align(
          alignment: AlignmentDirectional.bottomCenter,
          child: RaisedButton(
            onPressed: () {
              _flyIronMan();
            },
            child: Text('Go'),
            color: Colors.red,
            textColor: Colors.yellowAccent,
            shape: BeveledRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(20))),
          ),
        )
      ],
    );
  }

  void _flyIronMan() {
    setState(() {
      _ironManAlignment = AlignmentDirectional.topCenter; //AlignmentDirectional(0.0,-0.7);
    });
  }

}