Flutter文本形态变换插件morphing_text的使用

Flutter文本形态变换插件morphing_text的使用

简介

Morphing Text 是一个受 LTMorphingLabel 启发的文本动画集合。

动画类型

ScaleMorphingText

以下是 ScaleMorphingText 的示例：

// 创建一个缩放形态变换文本
ScaleMorphingText(
    texts: text, // 文本列表
    loopForever: true, // 是否无限循环
    onComplete: () {}, // 完成时的回调函数
    textStyle: TextStyle(fontSize: 40.0), // 文本样式
),

EvaporateMorphingText

以下是 EvaporateMorphingText 的示例：

// 创建一个蒸发形态变换文本
EvaporateMorphingText(
    texts: text, // 文本列表
    loopForever: true, // 是否无限循环
    onComplete: () {}, // 完成时的回调函数
    yDisplacement: 1.2, // y方向位移因子
    textStyle: TextStyle(fontSize: 40.0), // 文本样式
),

所有参数

以下是所有可用参数的详细信息：

注意： 更改曲线是纯粹实验性的，请根据需要选择适当的曲线或保留默认值。

自定义动画

1. 要创建自定义动画，请扩展您的类 MorphingText。

class CustomFooMorphingText extends MorphingText {
  ...
}

1. 覆盖 incomingText 和 outgoingText 方法以分别处理下一个文本的进入和前一个文本的退出，并将 text、textStyle 和 progress 传递给父类。

class CustomFooMorphingText extends MorphingText {
  CustomFooMorphingText(
      String text,
      TextStyle textStyle,
      double progress,
  ) : super(text, textStyle, progress);

  [@override](/user/override)
  TextProperties morphingText(TextProperties textProperties) {
    // 可选：更改移动文本的运动方式
  }

  [@override](/user/override)
  TextProperties incomingText(TextProperties textProperties) {
    // 编写下一个文本的逻辑
  }

  [@override](/user/override)
  TextProperties outgoingText(TextProperties textProperties) {
    // 编写离开文本的逻辑
  }
}

1. 在构建方法中将您的自定义动画传递给 CustomMorphingText。

CustomMorphingText(
  morphingText: CustomFooMorphingText(
    texts[index],
    DefaultTextStyle.of(context).style.merge(widget.textStyle),
    _progress.value,
  ),
);

1. 例如，您可以在 GitHub 上查看 CustomScaleMorphingText 的实现。

示例代码

以下是一个完整的示例 demo，展示如何在 Flutter 应用中使用 morphing_text 插件。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Morhing text',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const List<String> text = [
    "Design",
    "Design is not just",
    "what it looks like",
    "and feels like.",
    "Design",
    "Design is how it works.",
    "- Steve Jobs",
  ];

  List<Widget> animations = [
    EvaporateMorphingText(
      texts: text, // 文本列表
      loopForever: true, // 是否无限循环
      onComplete: () {
        print("Completed"); // 完成时的回调函数
      },
      textStyle: TextStyle(fontSize: 30.0), // 文本样式
    ),
    ScaleMorphingText(
      texts: text, // 文本列表
      loopForever: true, // 是否无限循环
      onComplete: () {
        print("Completed"); // 完成时的回调函数
      },
      textStyle: TextStyle(fontSize: 30.0), // 文本样式
    ),
  ];

  int index = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: animations[index % animations.length], // 显示当前索引的动画
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            index++; // 点击按钮后增加索引
          });
        },
        child: Icon(Icons.arrow_forward_ios), // 按钮图标
      ),
    );
  }
}