Flutter Dojo设计之道——骚气的闪屏动画是如何实现的

专辑

Flutter Dojo的设计之道

Flutter Dojo设计之道——利用Github打造完善的开源项目

Flutter Dojo设计之道——骚气的闪屏动画是如何实现的

Flutter Dojo设计之道——如何打造一个通用的Playground

 

这篇文章是对Flutter动画实现思路的一篇剖析，用一个简单的动画，分析Flutter创建动画的一般步骤

 

闪屏，实际上有两个作用。

• 宣传。通过Logo、广告等形式，在启动时，展示要宣传的广告等内容。
• 后台初始化。借助这个时间做一些后台操作，初始化一些SDK或者代码。

 

Flutter Dojo的闪屏动画，参考了著名大厂——P站的App闪屏，相信大家应该都不陌生。

 

 

动画其实比较简单，只是一个从两边向中间靠拢的动画。

 

一般来说，Flutter的动画创作，有下面几个步骤。

1. 创建静态布局
2. 创建Tween，标记动画的起始值
3. 给静态代码添加AnimatedBuilder，驱动动画

 

静态布局

这个布局没有什么太大难度，这个效果其实有很多实现方案，比如Center-Row的方式，让【Flutter】Text和【Dojo】Text在Row中居中即可。或者可以用Stack-Positioned的方式，通过left、right来定位。

 

相比来说，Center-Row的方式会比较直观，所以我这里准备使用Stack-Positioned的方式来进行演示。

 

不管使用哪种方案，需要注意的一点是，【Flutter】Text和【Dojo】Text是整体居中的，并不是分别居中，因为【Flutter】Text比【Dojo】Text要长，所以沿屏幕中线居中会很不协调。

 

布局之外，需要稍微提下【Dojo】Text的实现，实际上就是通过BoxDecoration来实现的，代码如下所示。

 

decoration: BoxDecoration(
  borderRadius: BorderRadius.circular(8),
  color: Color.fromARGB(255, 253, 152, 39),
),

 

定义动画

这里的动画分为两部分，左边和右边，如果使用Center-Row的方式，由于两个Text并不在屏幕中线对齐，所以实际上是有个offset的，然后再通过Transform.translate来进行偏移。另一种方式，Stack-Positioned实际上也是如此，但是可以通过Positioned中的left和right来进行动画。

 

所以首先一步，需要获取【Flutter】Text和【Dojo】Text的宽度差，这里又有多种方式来获取一个Widget的Size了。

• LayoutBuilder。由于需要提前创建动画，所以这个方案不是很好。
• TextPainter。对于文字，可以使用TextPainter来进行文本的测量。
• Key。通过Key来获取RenderBox，从而获取Widget的Size。

 

Key的方式比较简单，所以这里我准备用TextPainter的方式来演示。下面这个函数就演示了如何获取一个特定TextStyle下Text的计算宽度。

 

double getTextWidth(String text) {
  final textPainter = TextPainter(
    text: TextSpan(
      text: text,
      style: TextStyle(
        fontSize: 60,
        fontWeight: FontWeight.w600,
      ),
    ),
    textDirection: TextDirection.ltr,
  );
  textPainter.layout(minWidth: 0, maxWidth: double.infinity);
  return textPainter.width;
}

 

经过简单的计算，【Flutter】Text和【Dojo】Text偏移的值实际上就是两个文本的宽度差的一半。

 

由于前面使用的是Stack-Positioned的方式进行的布局，所以动画也需要根据静态布局来定义。

 

先看【Flutter】Text的动画，它从屏幕左边作用到中间带偏移的地方，所以其动画值的范围是：

 

begin: screenWidth, end: screenWidth / 2 - offset

 

相应的，【Dojo】Text的动画，也类似：

 

begin: screenWidth, end: screenWidth / 2 + offset

 

动画管理

在确定的动画值的范围之后，实际上Tween就已经确定了，这里介绍一个动画管理的技巧，通过一个类来封装Widget所需要的不同的Tween，这样可以将动画的逻辑和Widget进行解耦，代码如下所示。

 

import 'package:flutter/material.dart';

class SplashAnimManager {
  final AnimationController controller;
  final Animation<double> animLeft;
  final Animation<double> animRight;
  final double screenWidth;
  final double offset;

  SplashAnimManager(this.controller, this.screenWidth, this.offset)
      : animLeft = Tween(begin: screenWidth, end: screenWidth / 2 - offset).animate(
          CurvedAnimation(
            parent: controller,
            curve: Curves.easeIn,
          ),
        ),
        animRight = Tween(begin: screenWidth, end: screenWidth / 2 + offset).animate(
          CurvedAnimation(
            parent: controller,
            curve: Curves.easeIn,
          ),
        );
}

 

这里仅仅是为了演示这种动画管理的思想，才将仅仅两个动画写在了管理类中。

 

实际上Flutter Dojo中有很多地方都是这样，不仅仅可以从App上学习Flutter的相关知识，通过阅读Dojo的源码，你会发现更多。

 

动画组装

最后就是通过AnimatedBuilder来进行组装，动画的本质实际上就是不断修改某个属性的值，从而产生动画的效果。【Flutter】Text和【Dojo】Text也是一样，以【Flutter】Text为例，实际上就是right属性从Tween的begin到end进行变化，所以，给静态布局套上AnimatedBuilder，再给相应的属性设置Tween的值就可以了，

 

代码如下所示。

 

@override
Widget build(BuildContext context) {
  final double screenWidth = MediaQuery.of(context).size.width;
  _splashAnimManager = SplashAnimManager(
    _animationController,
    screenWidth,
    (getTextWidth('Flutter') - getTextWidth('Dojo') - 4) / 2,
  );
  return Container(
    alignment: Alignment.center,
    color: Colors.black,
    child: Stack(
      fit: StackFit.expand,
      alignment: Alignment.center,
      children: <Widget>[
        AnimatedBuilder(
          animation: _animationController,
          builder: (context, widget) {
            return Positioned(
              right: _splashAnimManager.animLeft.value,
              child: Text(
                'Flutter',
                style: TextStyle(
                  fontSize: 60,
                  color: Colors.white,
                  fontWeight: FontWeight.w600,
                ),
              ),
            );
          },
        ),
        AnimatedBuilder(
          animation: _animationController,
          builder: (context, widget) {
            return Positioned(
              left: _splashAnimManager.animRight.value,
              child: Container(
                padding: EdgeInsets.symmetric(
                  horizontal: 4,
                ),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                  color: Color.fromARGB(255, 253, 152, 39),
                ),
                child: Text(
                  'Dojo',
                  style: TextStyle(
                    fontSize: 60,
                    fontWeight: FontWeight.w600,
                    color: Colors.black,
                  ),
                ),
              ),
            );
          },
        ),
      ],
    ),
  );
}

 

以上，一个骚气的闪屏动画就完成了。

 

代码地址

https://github.com/xuyisheng/flutter_dojo/blob/master/lib/pages/splash/slpash.dart

 

项目地址

https://github.com/xuyisheng/flutter_dojo

 

 

 

作者：xuyisheng
来源：掘金