乐趣区

关于flutter:在-Flutter-中创建一个动画屏幕

jiezi

原文

https://medium.com/@baran.asl…

代码

https://github.com/ducafecat/…

参考

  • https://pub.flutter-io.cn/pac…
  • https://pub.flutter-io.cn/pac…
  • https://pub.flutter-io.cn/pac…

注释

大家好，明天我要向大家展现如何在 Flutter 中创立一个动画屏幕，就像这样;

装置依赖项

您能够从 pub.dev 取得依赖项

这些是我在我的我的项目中应用的版本:

animated_text_kit: ^4.2.1
simple_animations: ^3.1.1
google_fonts: ^2.1.0

在取得依赖关系之后，咱们在编码之前还有一个步骤。

有一个叫做 Liquid Studio 的应用程序是由 Felix Blaschke 创立的，这个应用程序生成飞镖代码来制作一些动画。

https://felixblaschke.github….

当初是设计局部:

有许多选项和色彩抉择，为此我应用了默认设置和色彩。

当初，为了使它动画化，咱们须要增加另一个层称为 Plasma。

点击增加图层按钮并抉择 Plasma。

当初你能够自定义突变层和 plasma layers，我为本人做了一些定制。

当初要导出，点击左上角的导出按钮。

单击导出场景以导出所有图层。

当初咱们有了彩色动画的代码，咱们将在 IDE 中应用这段代码，但在此之前，让咱们先创立类构造。

让咱们创立一个有状态的小部件并首先返回一个 Scaffold。

当初，咱们心愿跳过动画页当咱们点击屏幕，要做到这一点，咱们能够应用 GestureDetector 小部件。

@override
  Widget build(BuildContext context) {
    return Scaffold(body: GestureDetector(),
    );
  }

当初粘贴咱们在 liquid studio 中导出的代码，作为 GestureDetector 小部件的子部件。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              tileMode: TileMode.mirror,
              begin: Alignment.topRight,
              end: Alignment.bottomRight,
              colors: [Color(0xfff44336),
                Color(0xff2196f3),
              ],
              stops: [
                0,
                1,
              ],
            ),
            backgroundBlendMode: BlendMode.srcOver,
          ),
         PlasmaRenderer(
              type: PlasmaType.infinity,
              particles: 10,
              color: Color(0x442eaeaa),
              blur: 0.31,
              size: 1,
              speed: 1.86,
              offset: 0,
              blendMode: BlendMode.plus,
              particleType: ParticleType.atlas,
              variation1: 0,
              variation2: 0,
              variation3: 0,
              rotation: 0,
            ),
        ),
      ),
    );
  }

它应该看起来像这样，当初你会有一个谬误，这是因为咱们还没有导入简略的动画。

导入类顶部的简略动画库。

import 'package:simple_animations/simple_animations.dart';

当初咱们的动画色彩曾经筹备好了，能够点击导航另一个页面，咱们将应用 GestureDetector 小部件的点击办法。

在 Container Widget 下，create on tap method 并导航到所需的页面。

onTap: (){Navigator.of(context).pushReplacementNamed('/home');
        },

当初，当咱们测试代码时，应该是这样的:

当初只剩下一件事件要做，那就是动画文字局部。

在这段代码中，Container 小部件有一个子元素，那就是 plasma 渲染器，plasma 渲染器能够帮忙咱们创立色彩动画。当初，为了向屏幕增加文本，咱们须要向 Container Widget 增加另一个子元素。要增加子元素，咱们须要应用 Stack Widget 笼罩所有子元素。

点击 PlasmaRenderer Widget，而后点击点击 Widget 后呈现的灯泡。

抉择 wrap with Column 选项。

当初咱们必须在这里停下来！

让我通知你为什么我抉择用列抉择，它也能够是行。

咱们将应用 Stack Widget，这个 Widget 能够帮忙咱们把 Widget 放在彼此之上，基本上就是叠加 Widget。

然而我为什么要抉择专栏呢？

因为堆栈，列和行窗口小部件没有子窗口，他们有子窗口，如果我抉择窗口小部件而不是列，那么我将不得不创立括号和扭转子窗口小部件，所以我抉择列的起因基本上是为了更快地编码。这一点都不重要，但我只是想提一下

所以咱们曾经创立了咱们的堆栈小部件，其中一个子部件是 PlasmaRenderer，当初咱们要增加动画文本作为子部件，但在创立核心小部件之前，让咱们在屏幕地方显示文本。

为了取得动画文本，咱们须要应用 AnimatedTextKit 小部件，因而咱们必须导入库。

import 'package:animated_text_kit/animated_text_kit.dart';Center(child: AnimatedTextKit(),
              ),

在 PlasmaRenderer 之后增加此代码。

取得了一个名为 animatedTexts 的列表，这个列表将蕴含咱们想要在屏幕上显示的所有文本。

在 pub.dev 中，AnimatedTextKit 包中有许多文本动画，我抉择了旋转文本，然而您能够尝试不同的动画。

animatedTexts: [RotateAnimatedText('Hello',textStyle: const TextStyle(fontSize: 32,fontWeight: FontWeight.bold,color: Colors.white)),
                    RotateAnimatedText('Animation screen',textStyle: const TextStyle(fontSize: 32,fontWeight: FontWeight.bold,color: Colors.white)),
                    RotateAnimatedText('Click to get started',textStyle: const TextStyle(fontSize: 32,fontWeight: FontWeight.bold,color: Colors.white)),
                  ],

在这里 RotateAnimatedText 采纳咱们的字符串，你能够增加款式来扭转字体大小和粗体，此外你还能够导入谷歌字体和增加一些自定义字体。对于色彩局部，我抉择了红色，你能够抉择任何你想要的色彩。

当初文本曾经实现，然而咱们须要一些动画工夫的定制。

咱们能够应用一些办法来帮忙咱们定制咱们的动画。

  • totalRepeatCount: 您能够编写心愿动画反复的次数
  • pause: 动画文本之间的暂停工夫 
totalRepeatCount: 1,
pause: const Duration(milliseconds: 3000),

将这些内容写入 AnimatedTextKit 小部件。

我心愿它只执行一次，所以我设置反复计数 1。

Pause 采纳 Duration 办法，我将其设置为 3000 毫秒，也就是 3 秒。

整个代码应该是这样的:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              tileMode: TileMode.mirror,
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [Color(0xffff1100),
                Color(0xff008eff),
              ],
              stops: [
                0,
                1,
              ],
            ),
            backgroundBlendMode: BlendMode.srcOver,
          ),
          child: Stack(
            children:[
               PlasmaRenderer(
              type: PlasmaType.infinity,
              particles: 10,
              color: Color(0x442eaeaa),
              blur: 0.31,
              size: 1,
              speed: 1.86,
              offset: 0,
              blendMode: BlendMode.plus,
              particleType: ParticleType.atlas,
              variation1: 0,
              variation2: 0,
              variation3: 0,
              rotation: 0,
            ),
              Center(
                child: AnimatedTextKit(
                  animatedTexts: [RotateAnimatedText('Hello',textStyle: const TextStyle(fontSize: 32,fontWeight: FontWeight.bold,color: Colors.white)),
                    RotateAnimatedText('Animation screen',textStyle: const TextStyle(fontSize: 32,fontWeight: FontWeight.bold,color: Colors.white)),
                    RotateAnimatedText('Click to get started',textStyle: const TextStyle(fontSize: 32,fontWeight: FontWeight.bold,color: Colors.white)),
                  ],
                      totalRepeatCount: 1,
                      pause: const Duration(milliseconds: 3000),
                ),
              ),],
          ),
        ),
          onTap: (){Navigator.of(context).pushReplacementNamed('/home'); }
      ),
    );
  }

您能够自定义您的动画和应用更多的办法或更多的动画文本依据您的口味。

这就是我明天的全部内容，谢谢浏览，心愿你喜爱，下次写作时再见，祝你有个欢快的一天;

© 猫哥

  • 微信 ducafecat
  • 博客 ducafecat.tech
  • github
  • bilibili

退出移动版