Flutter入门篇(三)— 如何实现登录动画效果

8,136 阅读10分钟

在上一篇的时候,我们讲解了怎么做一个登录界面,但是之后呢?完全是草草结尾的感觉嘛,这不,接下来就是给大家详细说说,这个登录里面不得鸟的故事。先来看一个登录的过程~~

登录失败

分析

可能上面的gif图不是很真切,这上面展示了两个功能:

  • 颜色变换的闪屏页面
  • 动画效果的登录页面

有没有感觉这样的登录好像还不错呢,哈哈哈,接下来就详细分析一下这其中的玄机~~

路由

一般我们的页面跳转都会涉及到路由,路由就是从一个页面跳转到另一个页面的过程,就比如Android中的Activity或IOS中的ViewController的跳转。

在Flutter中所以的路由都使用Navigator来进行管理的,换句话说它就是让这些本来相对独立的个体形成一个完美的整体。那么Navigator是直接管理的就是页面吗?当然不是,实际上它管理是Route对象,而且提供了管理堆栈的相关方法,比如:

  • Navigator.push (入栈)
  • Navigator.pop (出栈)

虽然能够直接创建一个navigator,但是呢,一般不建议这样直接使用,我们常常通过WidgetsApp或者MaterialApp去创建。还记得第一篇的时候,就跟大家提过,Flutter提供了许多widgets,可帮助您构建遵循Material Design的应用程序。Material应用程序以MaterialApp widget开始, 该widget在应用程序的根部创建了一些有用的widget,其中包括一个Navigator, 它管理由字符串标识的Widget栈(即页面路由栈)。Navigator可以让您的应用程序在页面之间的平滑的过渡。 所以我们的应用启动一般这样写:

void main() {
	runApp(MaterialApp(home: MyAppHome()));
}

那么,home所指向的页面也就是我们栈中最底层的路由,那MaterialApp到底是怎么创建这个底层路由的呢?它遵循以下几个原则:

const MaterialApp({
    Key key,
    this.navigatorKey,
    this.home,
    this.routes = const <String, WidgetBuilder>{},
    this.initialRoute,
    this.onGenerateRoute,
    this.onUnknownRoute,
    //省略无关代码
    ...
})
  • 首先使用我们的home所指向的
  • 如果失败,那么就会使用routes路由表
  • 如果路由表为空,那么就会调用onGenerateRoute
  • 如果以上所有都失败了,那么onUnknownRoute将会被调用

所以说如果要创建Navigator,那么以上四个必须有一个被使用。

MaterialPageRoute

一般我们可以使用MaterialPageRoute去进行路由:

Navigator.push(context, MaterialPageRoute<void>(
	builder: (BuildContext context) {
		return Scaffold(
			appBar: AppBar(title: Text('My Page')),
			body: Center(
				child: FlatButton(
					child: Text('POP'),
					onPressed: () {
						Navigator.pop(context);
					},
				),
			),
		);
	},
));

这种方式的就很明显了,它是使用一种build的方式去入栈(或者出栈)。如上可以看出,当我点击 POP按钮的时候又可以将这个页面进行出栈,又可以回到我们的home页面。但是,通常我们不这么去返回上一个页面,在上一章的时候就使用ScaffoldAppBar中可以直接添加一个返回,究其根本这个返回最终也是调用的这个

Navigator.pop(context);

当我们需要在返回的时候带一个返回值的时候,可以像如下的方式进行使用,那么这个时候就不能使用ScaffoldAppBar中的返回了,因为它是不会返回任何结果的。

Navigator.pop(context, true);

pushNamed

上面是通过一个动态的方式去进行路由,我们也可以使用一种静态的方式去路由,那就是pushNamed,从字面意思就是通过页面的名字进行路由的,那么这个名字是从哪里来的呢?这就需要使用我们上面在MaterialApp中的routes路由表了。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Color(0xFFFF786E),
        primaryColorLight: Color(0xFFFF978F),
        accentColor: Color(0xFFFFFFFF)
      ),
      home: Start(),
      debugShowCheckedModeBanner: false,
        routes:{
          "scaffold_page":(context)=>ScaffoldTest(),
          "snack_page":(context)=> SnackTest(),
          "login_page":(context)=> LoginPage(),
          "start_page":(context)=> Start(),
        }
    );
  }
}
Navigator.pushNamed(context, "snack_page");

那么,我们能不能携带参数呢?当然是可以的咯

void _showBerlinWeather() {
   Navigator.pushNamed(
     context,
     '/weather',
     arguments: <String, String>{
       'city': 'Berlin',
       'country': 'Germany',
     },
   );
}

也能携带一个自定义的对象进行遨游~~

class WeatherRouteArguments {
  WeatherRouteArguments({ this.city, this.country });
  final String city;
  final String country;

  bool get isGermanCapital {
    return country == 'Germany' && city == 'Berlin';
  }
}

void _showWeather() {
  Navigator.pushNamed(
    context,
    '/weather',
    arguments: WeatherRouteArguments(city: 'Berlin', country: 'Germany'),
  );
}

当然还有一些其他的方式:

  1. pushReplacementNamed 和 pushReplacement 替换当前页面
  2. popAndPushNamed 当前页面出栈,入栈新的页面
  3. pushNamedAndRemoveUntil 和 pushAndRemoveUntil 入栈新页面并关闭之前的所有页面

动画

在前面gif图中我们可以看到在闪屏页在不同的时间颜色有不同的变化(图片模糊,效果不明显),还有点击登录的时候,按钮的样子也有变化,那么这个是怎么实现的呢?当然是我们的动画了~~

AnimationController

AnimationController用来控制一个动画的正向播放、反向播放和停止动画等操作。在默认情况下AnimationController是按照线性进行动画播放的。 需要注意的是在使用AnimationController的时候需要结合TickerProvider,因为只有在TickerProvider下才能配置AnimationController中的构造参数vsyncTickerProvider是一个抽象类,所以我们一般使用它的实现类TickerProviderStateMixinSingleTickerProviderStateMixin

那么,这两种方式有什么不同呢? 如果整个生命周期中,只有一个AnimationController,那么就使用SingleTickerProviderStateMixin,因为此种情况下,它的效率相对来说要高很多。反之,如果有多个AnimationController,就是用TickerProviderStateMixin

需要注意的是,如果AnimationController不需要使用的时候,一定要将其释放掉,不然有可能造成内存泄露。

class StartState extends State<Start> with SingleTickerProviderStateMixin {

  AnimationController colorController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    colorController = new AnimationController(
        vsync: this, duration: new Duration(seconds: 3));
  }
  
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: Container(
      //省略部分代码
      ...
        ),
    );
  }

  @override
  void dispose() {
    // TODO: implement dispose
    colorController.dispose();
    super.dispose();
  }
}

Animation

有了动画控制器之后,就需要我们的动画效果了哦。但是我们可以发现Animation本身是个抽象类,所以我们需要的是它的实现类。我们可以直接使用Tween或者它的子类去实现一个Animation,在AnimationController中提供了一个drive方法,这个是用来干什么的呢?这个是用来链接一个TweenAnimation并返回一个Animation的实例。

Animation<Alignment> _alignment1 = _controller.drive(
  AlignmentTween(
    begin: Alignment.topLeft,
    end: Alignment.topRight,
  ),
);

为什么要使用Tween呢?Tween就是一个线性的插值器,可以实现一个完整的变化过程

class Tween<T extends dynamic> extends Animatable<T> {
  Tween({ this.begin, this.end });
  T begin;
  T end;
  @protected
  T lerp(double t) {
    assert(begin != null);
    assert(end != null);
    return begin + (end - begin) * t;
  }
  @override
  T transform(double t) {
    if (t == 0.0)
      return begin;
    if (t == 1.0)
      return end;
    return lerp(t);
  }

  @override
  String toString() => '$runtimeType($begin \u2192 $end)';
}

Tween的构造提供了两个参数,一个开始bengin ,一个结束end,就是说让动画可以在这个区间内进行变化,当然它也提供了很多子类,比如:ColorTweenSizeTweenIntTweenCurveTween等等

  • ColorTween 可以实现两个颜色的变化
  • SizeTween 可以实现两个size的变化
  • IntTween 可以实现两个int 值之间的变化
  • CurveTween 可以实现动画非线性变化

CurvedAnimation

CurvedAnimation就是将一个曲线(非线性)变化应用到另一个动画,如果想使用 Curve应用到Tween就可以直接使用上面所说的CurveTween,可以不CurvedAnimation

final Animation<double> animation = CurvedAnimation(
  parent: controller,
  curve: Curves.ease,
);

这里需要两个参数一个是动画控制,也就是我们的AnimationController,另一个就是curve,它描述了到底是按照什么样的曲线进行变化的。在Curves中提供了很多的变化过程,有兴趣的童鞋可以自己去研究一下~~

动画关系
这里总结一下:

  • AnimationController 控制整个动画的播放,停止等操作
  • Tween 动画的变化区间
  • CurvedAniamtion 控制动画按照非线性进行变化

闪屏动画实现

要实现一个动画的,首先肯定需要上面所说的AniamtionControllerAnimation,有这个还不够,还需要一个可以根据 在闪屏页面中,我们的动画是颜色根据时间不同的进行变化,那肯定会用到我们的Tween,这里是颜色的变化,所以使用到了ColorTween

 @override
  void initState() {
    // TODO: implement initState
    super.initState();
    colorController = new AnimationController(
        vsync: this, duration: new Duration(seconds: 3));

    colorAnimation = colorController
        .drive(ColorTween(begin: Color(0xFFFF786E), end: Color(0xFFFFA07A)));
}

一般我们对AniamtionController和Animation的初始化在initState()方法中,然后就需要在动画的运行过程中将widget进行更新,就会使用到我们的setState()

colorAnimation = colorController
        .drive(ColorTween(begin: Color(0xFFFF786E), end: Color(0xFFFFA07A)))
          ..addListener(() {
            setState(() {});
          });

那么接下来就是让整个动画跑起来了~~

Future<Null> playAnimation() async {
  try {
    await colorController.forward();
    await colorController.reverse();
  } on TickerCanceled {}
}

这里使用到了dart语言中的异步,有两个特点:

  • await返回一定是Future,如果不是会报错
  • await 所在的方法必须在有async标记的函数中运行。

上面的意思就是让动画先正向进行,然后在反向进行~~ 但是发现动画写完之后运行,但是没有任何作用,这是因为你没有将动画的变化应用到widget

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: Container(
        decoration: BoxDecoration(color: colorAnimation.value),
        child: Center(
        ...
        //省略无关代码
        ),
     ),
   );
}

在上述代码中的BoxDecoration(color: colorAnimation.value)就是将颜色的值作用于整个Container上,所以颜色就随之变化而变化。

在动画结束的时候不是要进行路由跳转到下一个页面的嘛?这就需要在对动画的监听,当动画结束的时候就进行跳转,就需要修改colorAnimation

colorAnimation = colorController
        .drive(ColorTween(begin: Color(0xFFFF786E), end: Color(0xFFFFA07A)))
          ..addListener(() {
            if (colorController.isDismissed) {
              Navigator.pushAndRemoveUntil(context,
                  new MaterialPageRoute(builder: (context) {
                return LoginPage();
              }), ModalRoute.withName("start_page"));
            }
            setState(() {});
          });

这里需要注意的是,在判断结束的时候,这里使用的是colorController.isDismissed,没有使用colorController.isCompleted是因为在正向动画完成的时候就会调用,还没让这个动画流程运行完成~~

如果需要完整代码,就可以来这儿

登录动画实现

这里和上面是一样的实现动动画,但是直接使用的是Tween,而且使用了另一种将Tween关联到Animation的方式,而且使用

@override
void initState() {
  // TODO: implement initState
  super.initState();
  _animationController = new AnimationController(
      vsync: this, duration: new Duration(milliseconds: 1500));

  _buttonLengthAnimation = new Tween<double>(
    begin: 312.0,
    end: 42.0,
  ).animate(new CurvedAnimation(
      parent: _animationController, curve: new Interval(0.3, 0.6)))
    ..addListener(() {
      if (_buttonLengthAnimation.isCompleted) {
        if(isLogin){
          Navigator.pushNamedAndRemoveUntil(context, "snack_page",ModalRoute.withName('login_page'));
        }else{
          showTips("登录失败");
        }
      }
      setState(() {});
    });
}

这里有一点需要注意,使用的curveInterval,这个的作用就是根据你提供的时间区间进行动画展示。就如上面定的动画时间大小是1500ms,那么只有在1500*0.3 = 500 ms的时候开始,并在1500*0.6=900ms的时候完成。

那么接下来就直接看改变动画的对widget处理

InkWell(
  onTap: login,
  child: Container(
     margin: EdgeInsets.only(top: 30),
     height: 42,
     width: _buttonLengthAnimation.value,
     decoration:BoxDecoration(borderRadius: radius, color: colorWhite),
     alignment: Alignment.center,
     child: _buttonLengthAnimation.value > 75? new Text("立即登录",
            style: TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.bold,
            color: colorRegular))
            : CircularProgressIndicator( valueColor:
                  new AlwaysStoppedAnimation<Color>(colorRegular),
                  strokeWidth: 2,
            ),
    ),
),

① 当点击登录按钮后,动画开始进行,并且对这个按钮的宽度就开始进行变化

 width: _buttonLengthAnimation.value,

② 当动画的值还大于75的时候,中间就显示Text,但是如果小于或等于75的时候,那它的child就是一个就是一个圆形的进度CircularProgressIndicator

child: _buttonLengthAnimation.value > 75? new Text("立即登录",
            style: TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.bold,
            color: colorRegular))
            : CircularProgressIndicator( valueColor:
                  new AlwaysStoppedAnimation<Color>(colorRegular),
                  strokeWidth: 2,
            ),
    ),

其实这就是整个动画的过程,只是其中我做了一个对动画运行的判断,当登录失败,就让动画按钮回到最初的状态,并提示登录失败。如果登录成功,就直接跳转到新的页面~~

总结

在这里规整一下,方便大家整理记忆

  • 路由有很多中方式,可以根据不同的情况进行选择,一般常用的就是pushpushNamed,如果是pushNamed那么一定要在MaterialApp中设置路由表。
  • 动画的使用一般需要跟TickerProvider配合使用,如果在State中就可以直接使用它的实现类SingleTickerProviderStateMixinTickerProviderStateMixin
  • 如果只有一个AnimationController就是用SingleTickerProviderStateMixin,反之,使用TickerProviderStateMixin
  • 动画的建立跟AnimationControllerTweenCurveAnimation有关。
  • AnimationController在不需要的时候一定要进行释放dispose,不然可能会造成内存溢出。