首页 > 其他分享 >Flutter 显式动画

Flutter 显式动画

时间:2023-12-23 16:55:25浏览次数:29  
标签:动画 const dispose controller animation vsync 显式 override Flutter

创建 AnimationController 的同时,也赋予了一个 vsync 参数。 vsync 的存在防止后台动画消耗不必要的资源。您可以通过添加 SingleTickerProviderStateMixin 到类定义,将有状态的对象用作 vsync

因为addListener() 函数调用 setState(),所以每次 Animation 生成一个新的数字,当前帧就被标记为 dirty,使得 build() 再次被调用。在 build() 函数中,container 会改变大小,因为它的高和宽都读取 animation.value,而不是固定编码值。当 State 对象销毁时要清除控制器以防止内存溢出。

class _AnimateContentState extends State<AnimateContent>
    with SingleTickerProviderStateMixin {
  bool flag = false;
  late AnimationController _controller;
  late Animation<double> animation;

  @override
  void initState() {
    // TODO: implement dispose
    super.initState();
    _controller =
        AnimationController(duration: const Duration(seconds: 1), vsync: this);
    //animate() 方法会返回一个 Animation
    animation = Tween<double>(begin: 0, end: 300).animate(_controller)
      ..addListener(() {
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          margin: const EdgeInsets.symmetric(vertical: 10),
          width: animation.value,
          height: animation.value,
          child: const FlutterLogo(),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller.forward();
        },
        child: const Icon(Icons.add),
      ),
    );
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }
}

标签:动画,const,dispose,controller,animation,vsync,显式,override,Flutter
From: https://www.cnblogs.com/angelwgh/p/17923291.html

相关文章

  • 短视频直播系统,前端比较常见的几种动画实现方式
    短视频直播系统,前端比较常见的几种动画实现方式我整理了如下的6种方式,接下来我们以最简单的例子,一个div从左到右移动一定的距离,分别看看这几种方案的具体实现。如有不妥还望指正。 一、CCSanimation这里省略了html部分,我们直接看css:.box{height:100px;......
  • Flutter-Dart中(){}和()=>{}的细微区别
    ()=>{}在Dart语言中,=>符号是箭头语法的一部分,它用于创建单行函数或表达式的缩写。在你的两个例子中,使用()=>和(){}都是合法的,但有细微的区别。()=>箭头函数(Arrowfunction):这是一种简写形式,适用于只有一条语句的函数体。在这种情况下,函数体的结果就是函数的返回值。示例:on......
  • 一个炫酷的CSS动画
    先不说是啥,直接上代码,想看效果自己复制运行。<!DOCTYPEhtml><html><head><style>html{background:black;}.container{width:300px;height:300px;}.main1{width:500px;......
  • getx路由动画
    getx默认动画配置GetMaterialApp(enableLog:true,defaultTransition:Transition.fade,//修改这里opaqueRoute:Get.isOpaqueRouteDefault,popGesture:Get.isPopGestureEnable,transitionDuration:Get.defaultDurationTransition,defaultGlobalState:Get.d......
  • Flutter子工程编译,Ruby升级及Cocoapods安装问题集
    背景:工程为iOS原生与Flutter混合开发的工程,在编译Flutter子工程的过程中报了一个错,一度让我以为是ruby与pod的版本不兼容导致了一些奇奇怪怪的问题,随即来回折腾了Ruby环境升级与pod的升级安装。问题1:flutter子工程执行了flutterpubget,执行flutterbuildios--no-codesign时,报......
  • Flutter 隐式动画
    通过几行代码就可以实现隐式动画,由于隐式动画背后的实现原理和繁琐的操作细节都被隐去了,所以叫隐式动画,FLutter中提供的[AnimatedContainer]、[AnimatedPadding]、[AnimatedPositioned.AnimatedOpacity]、[AnimatedDefaultTextStyle]、[AnimatedSwitcher]都属于隐式动画隐式动画......
  • Android应用开发长按拖拽-Flutter的LongPressDraggable控件回调函数onDraggableCancel
    onDraggableCanceled介绍LongPressDraggable的onDraggableCanceled回调在拖动被取消时触发。拖动可能会被取消,例如用户在拖动开始后移动了太快或在放置之前取消了拖动。onDraggableCanceled的使用以下是如何使用onDraggableCanceled的示例:LongPressDraggable<int>(//......
  • SVG动画
    一、下载SVG网站:https://undraw.co/点击“browsenow”点击“search”点击第一个点击“DownloadSVGforyourprojects”对代码进行格式化将代码拷贝到vscode中,用快捷键“Shift+Alt+F”进行格式化,格式化之后如下所示:<svgxmlns="http://www.w3.org/2000/svg"data-......
  • Flutter AnimatedList 实现动态列表
    import'dart:async';import'package:flutter/material.dart';finalGlobalKey_globalKey=GlobalKey();classMyAnimatedListextendsStatelessWidget{constMyAnimatedList({super.key});@overrideWidgetbuild(BuildContextcont......
  • Flutter 编译是pod intsall github 资源下载失败
    在fluterr编译报错然后显示github.xxxxx访问超时处理办法podinstall主要是读取profile文件platform:ios,'9.0'target'YourAppName'douse_frameworks!#这是安装依赖位置pod'SomeDependency'#添加其他依赖项...end想办法下载到github的文......