iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >Flutter Animation实现缩放和滑动动画效果
  • 816
分享到

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

2024-04-02 19:04:59 816人浏览 泡泡鱼
摘要

本文实例为大家分享了Flutter Animation实现缩放和滑动动画的具体代码,供大家参考,具体内容如下 Animation对象是Flutter动画库中的一个核心类,它生成指导动

本文实例为大家分享了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();
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: Flutter Animation实现缩放和滑动动画效果

本文链接: https://www.lsjlt.com/news/143499.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Flutter Animation实现缩放和滑动动画效果
    本文实例为大家分享了Flutter Animation实现缩放和滑动动画的具体代码,供大家参考,具体内容如下 Animation对象是Flutter动画库中的一个核心类,它生成指导动...
    99+
    2022-11-13
  • Flutter实现不同缩放动画效果详解
    目录需求背景可缩放组件介绍ScaleTransitionSizeTransitionAnimatedSizeAnimatedBuilder小结需求背景 组件缩放可以向着一个方向进行缩...
    99+
    2022-11-13
  • Flutter怎么实现不同缩放动画效果
    本篇内容主要讲解“Flutter怎么实现不同缩放动画效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Flutter怎么实现不同缩放动画效果”吧!需求背景组件缩放可以向着一个方向进行缩放,放大列...
    99+
    2023-07-02
  • Android利用ViewPager实现可滑动放大缩小画廊效果
    画廊在很多的App设计中都有,如下图所示: 该例子是我没事的时候写的一个小项目,具体源码地址请访问https://github.com/AlexSmille/YingMi。...
    99+
    2022-06-06
    viewpager 画廊 Android
  • css3怎么实现缩放动画效果
    这篇文章主要介绍css3怎么实现缩放动画效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! css中,可利用“@keyframes”规则、animatio...
    99+
    2022-10-19
  • css3如何实现旋转缩放动画效果
    这篇文章主要介绍了css3如何实现旋转缩放动画效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 方法:1、利用...
    99+
    2022-10-19
  • Flutter 利用CustomScrollView实现滑动效果
    目录CustomScrollView 简介 改造原代码 让导航栏更有趣 改造后的代码 其他效果 总结 我们在之前的文章中//www.jb51.net/article/213709.h...
    99+
    2022-11-12
  • vue+animation动画实现跑马灯效果
    本文实例为大家分享了vue+animation动画实现跑马灯效果的具体代码,供大家参考,具体内容如下 1、单行显示,每行只显示一条 效果图 上代码 <template>...
    99+
    2022-11-13
  • CSS动画:如何实现元素的抖动缩放效果
    CSS动画:如何实现元素的抖动缩放效果在网页设计中,元素的动画效果能够增加用户的视觉体验,为平淡的页面增添活力。而CSS动画正是实现这些效果的强大工具之一。本文将详细介绍如何使用CSS动画实现元素的抖动缩放效果,并提供具体的代码示例供读者参...
    99+
    2023-11-21
    动画 CSS 缩放
  • Android实现手势滑动和简单动画效果
    一、手势滑动Activity都具有响应触摸事件,也就是说只要触摸Activity,他都会回调一个onTouchEvent()方法。但是在这个方法里无法处理事件,需要配合使用手势识别器(GestureDetector)中的方法onTouchE...
    99+
    2023-05-31
    android 手势滑动 roi
  • CSS+jQuery实现的一个放大缩小动画效果
    今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来。 都是定死了的。因为需求就只有4个元素。如果是要用CSS的class来处理,那就需要用到CSS3动画...
    99+
    2022-11-15
    jQuery+CSS 放大缩小动画
  • Android列表实现单选点击缩放动画效果
    recycleView单选的时候,一般的处理就是选中的item做个stroke或者字体颜色改变,但要提升用户体验就得加点动画了。也就是点击选中的元素放大,同时之前选中的item缩小,...
    99+
    2022-11-12
  • Android实现缩放动画
    本文实例为大家分享了Android实现缩放动画的具体代码,供大家参考,具体内容如下 核心方法 public void startAnimation(Animation animati...
    99+
    2022-11-13
  • vue+threejs写物体动画之物体缩放动画效果
    目录写在前面代码说明写在最后写在前面 本文用vue+threejs写物体动画:物体缩放动画。 实现原理:让缩放值根据秒数的增加呈函数式变化,以达到动画展示的效果。 下面是演示gif:...
    99+
    2022-11-13
  • Android Flutter如何实现3D动画效果
    这篇文章主要讲解了“Android Flutter如何实现3D动画效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Android Flutter如何实现3D动画效果”吧...
    99+
    2023-06-29
  • vue实现滑动和滚动效果
    本文实例为大家分享了vue实现滑动和滚动效果的具体代码,供大家参考,具体内容如下 面板滑动效果,父组件是resultPanel,子组件是resultOption,仿照了iview中,...
    99+
    2022-11-13
  • Android列表怎么实现单选点击缩放动画效果
    本篇内容介绍了“Android列表怎么实现单选点击缩放动画效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!recycleView单选的时候...
    99+
    2023-06-20
  • Android实现手势滑动多点触摸放大缩小图片效果
    网上文章虽多,但是这种效果少之又少,我真诚的献上以供大家参考 实现原理:自定义ImageView对此控件进行相应的layout(动态布局). 这里你要明白几个方法执行的流程: ...
    99+
    2022-06-06
    小图 图片 手势 Android
  • Android实现手势滑动多点触摸缩放平移图片效果
    现在app中,图片预览功能肯定是少不了的,用户基本已经形成条件反射,看到小图,点击看大图,看到大图两个手指开始进行放大,放大后,开始移动到指定部位。 一、概述 想要做到图片支持...
    99+
    2022-06-06
    图片 手势 Android
  • Flutter实现心动的动画特效
    目录实现动画混入 SingleTickerProviderStateMixin创建动画抽离成小组件完整代码为了追求更好的用户体验,有时候我们需要一个类似心跳一样跳动着的控件来吸引用户...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作