Question

如何创建动画以将图像从中心移到屏幕顶部？客户要求初始屏幕在屏幕中央具有图标，并且显示登录屏幕时，该图标将移至屏幕顶部并显示用于登录的字段。有人可以帮我吗？

Answer 1

这似乎是使用英雄动画的理想选择，因为大多数工作已经为您完成。不过，我有几点要指出。

在android和ios上启动应用程序时显示的启动屏幕直接在iOS和android中定义，并且必须是静态的。
无法使用颤动定义此初始屏幕。

我所建议的是直接在iOS和android中指定一个简单的启动屏幕。然后创建一个看起来与该屏幕相同的页面。这样，您就可以从

本地初始屏幕->颤动初始屏幕----animate--->登录屏幕。

我已经创建了一个快速的样机。

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SplashPage(),
    );
  }
}

enum SplashHeroes { icon }

class SplashPage extends StatefulWidget {
  @override
  SplashPageState createState() {
    return new SplashPageState();
  }
}

class SplashPageState extends State<SplashPage> {
  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 1), _toNext);
  }

  _toNext() {
    Navigator.push(
      context,
      PageRouteBuilder(
        pageBuilder: (context, _, __) => LoginPage(),
        transitionsBuilder: (context, animation, secondaryAnimation, child) => FadeTransition(
              opacity: animation,
              child: child,
            ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Hero(
            tag: SplashHeroes.icon,
            createRectTween: (rect1, rect2) => RectTween(begin: rect1, end: rect2),
            child: Icon(
              Icons.airport_shuttle,
              size: 100.0,
              color: Colors.white,
            ),
          ),
          FlatButton(
            child: Text("Next"),
            onPressed: _toNext,
          ),
        ],
      ),
    );
  }
}

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget>[
          Hero(
            createRectTween: (rect1, rect2) => RectTween(begin: rect1, end: rect2),
            tag: SplashHeroes.icon,
            child: Icon(
              Icons.airport_shuttle,
              color: Colors.white,
            ),
          ),
        ],
      ),
      backgroundColor: Colors.deepPurple,
      body: Center(
        child: Column(
          children: <Widget>[
            Text("Username"),
            TextField(),
            Text("Password"),
            TextField(),
          ],
        ),
      ),
    );
  }
}

此代码中有几点要注意。

它使用PageRouteBuilder，它仅做非常基本的淡入淡出过渡。您可以添加到此，也可以自己覆盖PageRoute。我还假设您想要淡入淡出过渡而不是正常的材质过渡，因为它在初始屏幕上看起来更好->第一个屏幕过渡。
在debug模式下，第一次执行动画时，实际上会跳过要设置动画的帧。要么以发布模式构建，要么等待自动转换发生，然后按返回，然后按下一步。
我添加了createRectTween，以便动画直接从中心移到角落。如果您未定义，则使用弯曲的路线。您的选择。
图标的大小是固定的，我也不用为使它大小而动画，而是从角落到中间设置了大小。如果您使用图片，我相信尺寸也会动起来，尽管我不确定100％。
我只是将图标放入应用栏的“操作”中作为示例。您可以将图标放置在所需的任何位置（如果不想，甚至可以不使用应用程序栏）-英雄过渡将在您放置图标的任何位置起作用。
enum SplashHeroes很重要，因为颤振需要一种能够与其他英雄匹敌的方法。在这种情况下，只有一个，但是从理论上讲，您可以有几个都有自己的过渡类型。使用枚举告诉flutter英雄包含相同的小部件（或至少一个要与之转换的小部件）。

请注意，我并没有真正直接回答您的问题（“如何实现抖动动画”，而是您向您解释了问题所在），因此，如果有帮助，我将标题更改为更合适的名称，以便其他人使用并没有发现如何设置一般的抖动动画。

如何实现抖动动画

1 个答案: