心若磐石|Flutter编写漂亮的动画,Android iOS 可以运行 建议收藏

本头条核心宗旨欢迎来到「技术刚刚好」作者 , 「技术刚刚好」是个人维护 , 每天至少更新一篇Flutter技术文章 , 实时为大家播报Flutter最新消息 。 如果你刚好也在关注Flutter这门技术 , 那就跟我一起学习进步吧 , 你的赞 , 收藏 , 转发是对我个人最大的支持 , 维护不易 , 欢迎关注 。
技术刚刚好经历近几年 , 移动端跨平台开发技术层出不穷 , 从Facebook家的ReactNative , 到阿里家WEEX , 前端技术在移动端跨平台开发中大展身手 , 技术刚刚好作为一名Android开发 , 经历了从Reactjs到Vuejs的不断学习 。 而在2018年 , 我们的主角变成了Flutter , 这是Goolge开源的一个移动端跨平台解决方案 , 可以快速开发精美的移动App 。 希望跟大家一起学习 , 一起进步!
本文核心要点今天这篇文章介绍一些关于flutter的知识点 , 最近也在研究一些动画 , 这里给大家分享一些我学习的动画 , 代码可以直接拿过去用 。
第一个动画ColorizeAnimated 。
心若磐石|Flutter编写漂亮的动画,Android iOS 可以运行 建议收藏flutter漂亮的动画
import 'package:flutter/material.dart';import 'dart:async';class ColorizeAnimatedTextKit extends StatefulWidget {final List text;final TextStyle textStyle;//表示从一个时间点到另一个时间点的时间差final Duration speed;final Duration pause;final VoidCallback onTap;final VoidCallback onFinished;final void Function(int, bool) onNext;final AlignmentGeometry alignment;final TextAlign textAlign;final bool isRepeatingAnimation;final bool repeatForever;final double totalRepeatCount;final List colors;const ColorizeAnimatedTextKit({Key key,@required this.text,this.textStyle,@required this.colors,this.speed,this.pause,this.onTap,this.onNext,this.onFinished,this.alignment = AlignmentDirectional.topStart,this.textAlign = TextAlign.start,this.totalRepeatCount = 3,this.repeatForever = false,this.isRepeatingAnimation = true}): super(key: key);@override_ColorizeTextState createState() => _ColorizeTextState();}class _ColorizeTextState extends Statewith TickerProviderStateMixin {AnimationController _controller;Animation _colorShifter, _fadeIn, _fadeOut;double _tuning;Duration _speed;Duration _pause;List _texts = [];int _index;bool _isCurrentlyPausing = false;int _currentRepeatCount;@overridevoid initState() {super.initState();_speed = widget.speed ?? const Duration(milliseconds: 200);_pause = widget.pause ?? const Duration(milliseconds: 1000);_index = -1;_currentRepeatCount = 0;widget.text.forEach((text) {_texts.add({'text': text, 'speed': _speed, 'pause': _pause});});_nextAnimation();}@overridevoid dispose() {_controller?.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return GestureDetector(onTap: widget.onTap,child: _isCurrentlyPausing || !_controller.isAnimating? Text(_texts[_index]['text'],style: widget.textStyle,textAlign: widget.textAlign,): AnimatedBuilder(animation: _controller,builder: (BuildContext context, Widget child) {Shader linearGradient = LinearGradient(colors: widget.colors).createShader(Rect.fromLTWH(0.0, 0.0, _colorShifter.value, 0.0));return Opacity(opacity:_fadeIn.value != 1.0 ? _fadeIn.value : _fadeOut.value,child: Text(_texts[_index]['text'],style: widget.textStyle != null? widget.textStyle.merge(TextStyle(foreground: Paint()..shader = linearGradient)): widget.textStyle,textAlign: widget.textAlign,),);},),);}void _nextAnimation() {final bool isLast = _index == widget.text.length - 1;_isCurrentlyPausing = false;// Handling onNext callbackif (_index > -1) {widget.onNext?.call(_index, isLast);}if (isLast) {if (widget.isRepeatingAnimationif (!widget.repeatForever) {_currentRepeatCount++;}} else {widget.onFinished?.call();return;}} else {_index++;}if (mounted) setState(() {});_controller = AnimationController(duration: _texts[_index]['speed'] * _texts[_index]['text'].length,vsync: this,);_tuning = (300.0 * widget.colors.length) *(widget.textStyle.fontSize / 24.0) *0.75 *(_texts[_index]['text'].length / 15.0);_fadeIn = Tween


推荐阅读