一、動畫基礎知識

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 实现文字竖排以及动画效果（文字逐一显示）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。