一、動(dòng)畫基礎(chǔ)知識(shí)

Animation 是 Flutter 動(dòng)畫庫(kù)中的核心類，它插入用于引導(dǎo)動(dòng)畫的值。
AnimationController 管理動(dòng)畫。例如控制動(dòng)畫開始、停止、前進(jìn)、后退等。
CurvedAnimation 將進(jìn)程定義為非線性曲線。
Tween 在被動(dòng)畫對(duì)象使用的數(shù)據(jù)范圍之間進(jìn)行插值。 例如，Tween 可以定義從紅色到藍(lán)色或從 0 到 255 的插值。
Listeners 和 StatusListeners 可監(jiān)控動(dòng)畫狀態(tài)的變化。
AnimatedWidget 是展示動(dòng)畫的Widget，Flutter提供一些動(dòng)畫Widget讓我們快速實(shí)現(xiàn)動(dòng)畫效果。例如：DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition
AnimatedBuilder 可自定義AnimatedWidget，實(shí)現(xiàn)自定義動(dòng)畫效果

二、自定義Tween

class TextTween extends Tween<String> {TextTween({String end = ''}) : super(begin: '', end: end);@overrideString lerp(double t) {// 在動(dòng)畫過程中 t 的值是從 0 到 1var cutoff = (end.length * t).round();// 返回動(dòng)畫時(shí)鐘t時(shí)刻 對(duì)應(yīng)的文字。return end.substring(0, cutoff);} }

AnimationController.forward(from: 0); 動(dòng)畫從頭再次播放
AnimationController.reverse(); 動(dòng)畫反向播放

實(shí)現(xiàn)文字逐一顯示

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 = '風(fēng)急天高猿嘯哀，渚清沙白鳥飛回。''\n無邊落木蕭蕭下，不盡長(zhǎng)江滾滾來。''\n萬里悲秋常作客，百年多病獨(dú)登臺(tái)。''\n艱難苦恨繁霜鬢，潦倒新停濁酒杯。';/// 持續(xù)時(shí)間為10秒的動(dòng)畫控制器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: '重復(fù)一次',onPressed: () {_controller.forward(from: 0);},icon: const Icon(Icons.repeat_one),),IconButton(tooltip: '刪除古詩(shī)',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, ), )

四、豎排文字與逐一顯示動(dòng)畫結(jié)合

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) {// 在動(dòng)畫過程中 t 的值是從 0 到 1var cutoff = (end.length * t).round();// 返回動(dòng)畫時(shí)鐘t時(shí)刻 對(duì)應(yīng)的文字。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();/// 持續(xù)時(shí)間為3秒的動(dòng)畫控制器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{// 已登錄過,跳轉(zhuǎn)至首頁(yè)Navigator.push(context, MaterialPageRoute(builder: (context) => MyHomePage(title: '首頁(yè)')));}});}@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,),),);},),));}

總結(jié)

以上是生活随笔為你收集整理的flutter 实现文字竖排以及动画效果（文字逐一显示）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。