animation - Flutter-相对位置动画

Question

糟糕，您好吗？

我正在使用Flutter开发应用程序，遇到了与动画有关的问题。

根据我的研究，我想制作一个动画，动画后的屏幕中心图像位于顶部(顶部中心)。

但是我没有找到一种方法来只使用我要描述的相对值(例如，实际的屏幕高度值)进行动画处理(这会在尺寸不同的屏幕上引起问题)。

有没有人有解决方案？

 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);
    });
  }

}