Flutter Animation实现缩放和滑动动画效果

 更新时间:2022年03月23日 08:02:27   作者:GalenWu  
这篇文章主要为大家详细介绍了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自定义View的一些独家技巧

    Android自定义View的一些独家技巧

    很多人把自定义View想得复杂了,以为有多高深,主要还是没有实践过,下面这篇文章主要给大家介绍了关于Android自定义View的一些独家技巧,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • Android中button实现onclicklistener事件的两种方式

    Android中button实现onclicklistener事件的两种方式

    本文介绍下Android中button实现onclicklistener事件的两种方法,感兴趣的朋友可以参考下
    2013-04-04
  • 简述Android中SELinux的TE

    简述Android中SELinux的TE

    SELinux使用类型强制来改进强制访问控制。这篇文章给大家介绍了Android中SELinux的TE的相关知识,感兴趣的朋友一起看看吧
    2018-03-03
  • Android解析JSON格式数据的两种方式(JSONObject和Gson)

    Android解析JSON格式数据的两种方式(JSONObject和Gson)

    json数据的解析相对而言,还是比较容易的,实现的代码也十分简单,下面这篇文章主要给大家介绍了关于Android解析JSON格式数据的两种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • Android实现轮播图片展示效果

    Android实现轮播图片展示效果

    这篇文章主要为大家详细介绍了Android实现轮播图片展示效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-01-01
  • Android实现扫描二维码功能

    Android实现扫描二维码功能

    这篇文章主要为大家详细介绍了Android实现扫描二维码功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • Android App中使用ListFragment的实例教程

    Android App中使用ListFragment的实例教程

    这篇文章主要介绍了Android App中使用ListFragment的实例教程,ListFragment的内容是以列表(list)的形式显示的Fragment,需要的朋友可以参考下
    2016-05-05
  • Android延时操作的三种方法

    Android延时操作的三种方法

    这篇文章主要为大家详细介绍了Android延时操作的三种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • android实现扫码枪功能

    android实现扫码枪功能

    这篇文章主要为大家详细介绍了android实现扫码枪功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 20行Android代码写一个CircleImageView

    20行Android代码写一个CircleImageView

    这篇文章主要介绍了20行Android代码写一个CircleImageView,制作圆形头像,感兴趣的小伙伴们可以参考一下
    2016-08-08

最新评论