一、动画基础知识

Animation 是 Flutter 动画库中的核心类，它插入用于引导动画的值。
AnimationController 管理动画。例如控制动画开始、停止、前进、后退等。
CurvedAnimation 将进程定义为非线性曲线。
Tween 在被动画对象使用的数据范围之间进行插值。例如，Tween 可以定义从红色到蓝色或从 0 到 255 的插值。
Listeners 和 StatusListeners 可监控动画状态的变化。
AnimatedWidget 是展示动画的Widget，Flutter提供一些动画Widget让我们快速实现动画效果。例如：DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition
AnimatedBuilder 可自定义AnimatedWidget，实现自定义动画效果

二、自定义Tween

class TextTween extends Tween<String> {TextTween({String end = ''}) : super(begin: '', end: end);@overrideString lerp(double t) {// 在动画过程中 t 的值是从 0 到 1var cutoff = (end.length * t).round();// 返回动画时钟t时刻 对应的文字。return end.substring(0, cutoff);}
}

AnimationController.forward(from: 0); 动画从头再次播放
AnimationController.reverse(); 动画反向播放

实现文字逐一显示

class CustomTextAnimationPage extends StatefulWidget {const CustomTextAnimationPage({Key? key}) : super(key: key);@overrideState<StatefulWidget> createState() => _CustomTextAnimationPageState();
}class _CustomTextAnimationPageState extends State<CustomTextAnimationPage>with SingleTickerProviderStateMixin {final String _text = '风急天高猿啸哀，渚清沙白鸟飞回。''\n无边落木萧萧下，不尽长江滚滚来。''\n万里悲秋常作客，百年多病独登台。''\n艰难苦恨繁霜鬓，潦倒新停浊酒杯。';/// 持续时间为10秒的动画控制器late final AnimationController _controller = AnimationController(vsync: this,duration: const Duration(seconds: 10),)..forward();late final Animation<String> _animation =TextTween(end: _text).animate(_controller);@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Column(mainAxisSize: MainAxisSize.min,children: [AnimatedBuilder(animation: _animation,builder: (context, child) {return Text(_animation.value,style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),);},),const SizedBox(height: 20),Row(mainAxisAlignment: MainAxisAlignment.center,children: [IconButton(tooltip: '重复一次',onPressed: () {_controller.forward(from: 0);},icon: const Icon(Icons.repeat_one),),IconButton(tooltip: '删除古诗',onPressed: () {_controller.reverse();},icon: const Icon(Icons.delete),)],),],),),);}
}

三、竖排文字

CustomPaint(painter: VerticalText(text: "你好，这是垂直排版的文字，排版顺序从上到下，从右到左。",textStyle: TextStyle(color: Colors.red,fontSize: 20,letterSpacing: 4,wordSpacing: 4),width: 200,height: 200,
),
)

四、竖排文字与逐一显示动画结合

AnimatedBuilder(animation: _animation,builder: (context, child) {return Container(padding: EdgeInsets.only(top: 200,left: 60,),child: CustomPaint(painter: VerticalText(text: _animation.value,textStyle: TextStyle(color: Colors.black38,fontWeight: FontWeight.w300,fontFamily: 'QingSong',fontSize: 20,letterSpacing: 10,wordSpacing: 10),width: 200,height: 200,),),);},)

附完整代码块

import 'package:STpolice/ui/login/Login.dart';
import 'package:flustars/flustars.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';import 'MyHomePage.dart';
import 'VerticalText.dart';class TextTween extends Tween<String> {TextTween({String end = ''}) : super(begin: '', end: end);@overrideString lerp(double t) {// 在动画过程中 t 的值是从 0 到 1var cutoff = (end.length * t).round();// 返回动画时钟t时刻 对应的文字。return end.substring(0, cutoff);}
}class CustomTextAnimationPage extends StatefulWidget {const CustomTextAnimationPage({Key key}) : super(key: key);@overrideState<StatefulWidget> createState() => _CustomTextAnimationPageState();
}class _CustomTextAnimationPageState extends State<CustomTextAnimationPage>with SingleTickerProviderStateMixin {final String _text = "不积跬步    无以至千里 不积小流    无以成江河";AnimationController animationController;Animation<String> _animation;@overridevoid initState() {super.initState();/// 持续时间为3秒的动画控制器animationController = AnimationController(vsync: this,duration: const Duration(seconds: 5),)..forward();_animation =TextTween(end: _text).animate(animationController);Future.delayed(Duration(milliseconds: 6000)).then((e) {String token = SpUtil.getString("token");if (token == null || token == "") { //不是登录状Navigator.push(context, MaterialPageRoute(builder: (context) => Login()));}else{// 已登录过,跳转至首页Navigator.push(context, MaterialPageRoute(builder: (context) => MyHomePage(title: '首页')));}});}@overrideWidget build(BuildContext context) {return Scaffold(body: Container(width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height,decoration: new BoxDecoration(image: new DecorationImage(image: new AssetImage('assets/tjProsecutionImages/home/launch_image.png'),fit: BoxFit.fill)),child: AnimatedBuilder(animation: _animation,builder: (context, child) {return Container(padding: EdgeInsets.only(top: 200,left: 60,),child: CustomPaint(painter: VerticalText(text: _animation.value,textStyle: TextStyle(color: Colors.black38,fontWeight: FontWeight.w300,fontFamily: 'QingSong',fontSize: 20,letterSpacing: 10,wordSpacing: 10),width: 200,height: 200,),),);},),));}

flutter 实现文字竖排以及动画效果（文字逐一显示）相关推荐

HTML-浮动与清除浮动、文字属性、动画效果
HTML-浮动与清除浮动.文字属性.动画效果一.浮动与清除浮动 1.浮动可以解决文字保卫图片的问题 2.浮动可以解决莫名其妙的间隔问题 3.浮动可以向左,向右进行排版对齐浮动: 可以设置元素,脱离 ...
android js 开屏动画,利用Flutter实现“孔雀开屏”的动画效果
前言今天分享一个类似"孔雀开屏"的动画效果,打开新的页面时,新的页面从屏幕右上角以圆形逐渐打开到全屏. 先来看下具体的效果不知道这种效果大家叫什么名字?如果有更合适的名字可以在 ...
Vue 顶部栏滚动控制显隐和文字字体闪光动画效果随笔
Vue top栏滚动显隐和文字字体颜色过渡动画效果随笔好长时间没用css动画效果了,今天恰好在封装某个组件时用上,随笔记下. <template><div class=" ...
02 css实现文字下划线动画效果
实现文字下划线从中间向两端延伸的动画效果,主要是通过css的transform和transition属性来实现,下面直接粘贴代码和效果图: <!DOCTYPE html> <html ...
css3 背景大小background-size属性实现鼠标移入文字下划线动画效果
最近看到一个页面有一个很有趣的动画,就是鼠标移入后,在对应的文字下方会出现下划线的动画效果,当鼠标移除后,下划线动画会消失,于是想了下该如何去实现这个动画效果. 第一个想法是想通过with来做,但是这 ...
Flutter ColorTween实现颜色过渡动画效果
志在巅峰的攀登者,不会陶醉在沿途的某个脚印之中,在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的 ...
Flutter AnimatedOpacity 实现透明度渐变动画效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 在Flutter 中实现透明度渐变效果的方式可通过以下通过 AnimatedOpacity 实现就是本文了通过 ...
纯css实现文字跳动的动画效果
以下图片为截图所得,所以为静态展示具体实现的详细代码如下,可直接cv复用: html部分代码: <h1 class="my-words"><span>H& ...
Photoshop文字特效——炫彩效果文字
要制作一个炫彩效果的文字 1. 首先,我们要应用一个深色的背景,以衬托文字的色彩 2. 为文字执行模糊效果,使其产生朦胧的感觉 3. 对已模糊的图像进行"晶格化"设置,从而产 ...
Photoshop文字特效——火球立体效果文字
制作一个带有火球的立体字效果 1. 首先,我们可以利用蒙版来创建选区,并对选区进行设置: 2. 第二步,向选区内填充渐变,从而来创建一个渐变文字: 3. 第三步,使用移动工具来创建文字的立体效果 ...

flutter 实现文字竖排以及动画效果（文字逐一显示）