Flutter Animation实现缩放和滑动动画效果
本文实例为大家分享了Flutter Animation实现缩放和滑动动画的具体代码,供大家参考,具体内容如下
Animation对象是Flutter动画库中的一个核心类,它生成指导动画的值。
Animation对象知道动画的当前状态(例如,它是开始、停止还是向前或向后移动),但它不知道屏幕上显示的内容。
AnimationController管理Animation。
CurvedAnimation 将过程抽象为一个非线性曲线.
Tween在正在执行动画的对象所使用的数据范围之间生成值。例如,Tween可能会生成从红到蓝之间的色值,或者从0到255。
使用Listeners和StatusListeners监听动画状态改变。
import 'package:flutter/animation.dart'; import 'package:flutter/material.dart'; void main() { runApp(new LogoApp()); } class LogoApp extends StatefulWidget { _LogoAppState createState() => new _LogoAppState(); } class _LogoAppState extends State<LogoApp> with SingleTickerProviderStateMixin { AnimationController controller; Animation<double> animation; initState() { super.initState(); controller = new AnimationController( duration: const Duration(milliseconds: 10000), vsync: this); animation = new Tween(begin: 0.0, end: 300.0).animate(controller); controller.forward(); } Widget build(BuildContext context) { return new AnimatedLogo(animation: animation); } dispose() { controller.dispose(); super.dispose(); } } class AnimatedLogo extends AnimatedWidget { AnimatedLogo({Key key, Animation<double> animation}) : super(key: key, listenable: animation); Widget build(BuildContext context) { final Animation<double> animation = listenable; return new Center( child: new Container( margin: new EdgeInsets.symmetric(vertical: 10.0), height: animation.value, width: animation.value, child: new FlutterLogo(), ), ); } }
缩放功能
class ScaleAnimatedContent extends StatefulWidget { final Widget child; final bool show; const ScaleAnimatedContent({Key key, this.child, this.show = false}) : super(key: key); @override ScaleAnimatedContentState createState() => ScaleAnimatedContentState(); } class ScaleAnimatedContentState extends State<ScaleAnimatedContent> with TickerProviderStateMixin { AnimationController animationController; Animation<double> animation; @override void initState() { animationController = new AnimationController( vsync: this, duration: new Duration(milliseconds: 600), ); // animationSlideUp = new Tween(begin: 0.0,end: 1.0).animate(animationController); animation = Tween(begin: 0.0, end: 1.0).animate(animationController); if (widget.show) { animationController.forward(); } super.initState(); } @override void didUpdateWidget(ScaleAnimatedContent oldWidget) { if (widget != oldWidget) { if (widget.show && !oldWidget.show) { animationController.forward(from: 0.0); } else if (!widget.show) { animationController.reverse(); } } super.didUpdateWidget(oldWidget); } @override Widget build(BuildContext context) { return ScaleTransition( scale: animation, child: widget.child, ); } @override void dispose() { animationController.dispose(); super.dispose(); } }
滑动效果
class SlideAnimatedContent extends StatefulWidget { final Widget child; final bool show; const SlideAnimatedContent({Key key, this.child, this.show = false}) : super(key: key); @override SlideAnimatedContentState createState() => SlideAnimatedContentState(); } class SlideAnimatedContentState extends State<SlideAnimatedContent> with TickerProviderStateMixin { AnimationController animationController; Animation<Offset> animationSlideUp; @override void initState() { animationController = new AnimationController( vsync: this, duration: new Duration(milliseconds: 600), ); animationSlideUp = new Tween( begin: Offset(0.0, 5.0), end: Offset(0.0, 0.0), ).animate(CurvedAnimation(parent: animationController, curve: Curves.ease)); if (widget.show) { animationController.forward(); } super.initState(); } @override void didUpdateWidget(SlideAnimatedContent oldWidget) { if (widget != oldWidget) { if (widget.show && !oldWidget.show) { animationController.forward(from: 0.0); } else if (!widget.show) { animationController.reverse(); } } super.didUpdateWidget(oldWidget); } @override Widget build(BuildContext context) { return SlideTransition( position: animationSlideUp, child: FadeTransition( opacity: animationController, child: widget.child, ), ); } @override void dispose() { animationController.dispose(); super.dispose(); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Android中button实现onclicklistener事件的两种方式
本文介绍下Android中button实现onclicklistener事件的两种方法,感兴趣的朋友可以参考下2013-04-04Android解析JSON格式数据的两种方式(JSONObject和Gson)
json数据的解析相对而言,还是比较容易的,实现的代码也十分简单,下面这篇文章主要给大家介绍了关于Android解析JSON格式数据的两种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07Android App中使用ListFragment的实例教程
这篇文章主要介绍了Android App中使用ListFragment的实例教程,ListFragment的内容是以列表(list)的形式显示的Fragment,需要的朋友可以参考下2016-05-0520行Android代码写一个CircleImageView
这篇文章主要介绍了20行Android代码写一个CircleImageView,制作圆形头像,感兴趣的小伙伴们可以参考一下2016-08-08
最新评论