首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter -如何创建wiggly动画?

Flutter是一种跨平台的移动应用开发框架,可以用于快速构建高性能、美观的应用程序。在Flutter中,可以使用动画来增强用户界面的交互性和吸引力。创建wiggly动画的步骤如下:

  1. 导入动画库:在Flutter中,可以使用flutter/animation.dart库来实现动画效果。需要在项目中的pubspec.yaml文件中添加依赖项flutter: sdk: flutter
  2. 创建动画控制器:动画控制器用于控制动画的状态和时间。可以使用AnimationController类来创建动画控制器,并设置动画的持续时间、曲线等属性。
  3. 定义动画数值范围:使用Tween类来定义动画的起始值和结束值。可以根据需要选择不同的Tween类,如Tween<double>Tween<Color>等。
  4. 创建动画:使用动画控制器和动画数值范围来创建动画。可以使用Tween.animate()方法将动画数值范围与动画控制器关联起来。
  5. 监听动画状态:可以通过添加监听器来监听动画的状态变化。例如,可以在动画开始时执行某些操作,或在动画结束时执行其他操作。
  6. 构建动画:使用动画的当前值来构建UI。可以使用AnimatedBuilder小部件来构建动画,该小部件会自动重建其子部件,并在动画值发生变化时更新UI。

以下是一个示例代码,演示如何创建一个wiggly动画:

代码语言:txt
复制
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Wiggly Animation'),
        ),
        body: Center(
          child: WigglyAnimation(),
        ),
      ),
    );
  }
}

class WigglyAnimation extends StatefulWidget {
  @override
  _WigglyAnimationState createState() => _WigglyAnimationState();
}

class _WigglyAnimationState extends State<WigglyAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0, end: 100).animate(_controller);
    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Transform.translate(
          offset: Offset(_animation.value, 0),
          child: child,
        );
      },
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    );
  }
}

在上述示例中,我们创建了一个名为WigglyAnimation的小部件,它继承自StatefulWidget。在_WigglyAnimationState类中,我们创建了一个动画控制器_controller和一个动画_animation。在initState方法中,我们初始化了动画控制器和动画,并设置动画的持续时间为2秒。然后,我们使用Tween类来定义动画的起始值和结束值,并使用_controller_animation来创建动画。最后,我们使用AnimatedBuilder小部件来构建动画,将动画的当前值应用于Transform.translate小部件,以实现平移效果。

这只是一个简单的示例,您可以根据需要自定义动画的属性和效果。如果您想了解更多关于Flutter动画的信息,可以参考腾讯云的Flutter相关产品和文档:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 )

文章目录 ◯、AnimatedWidget 组件引入 一、创建 AnimatedWidget 动画组件 二、创建动画控制器 三、创建动画 四、动画运行 五、完整代码示例 六、相关资源 AnimatedWidget...动画使用流程 : ① 创建 AnimatedWidget 动画组件 ② 创建动画控制器 ③ 创建动画动画运行 ◯、AnimatedWidget 组件引入 ---- 在上一篇博客 【Flutter...】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 ) 中 , 使用动画时 , 需要给动画添加值监听器...duration 参数即可 ; 创建动画控制器代码示例 : /// 1....// 动画持续时间 2 秒 duration: Duration(seconds: 3), ); 三、创建动画 ---- 这里创建 Tween 补间动画 , 设置动画的初始值

1.9K10

Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )

文章目录 ◯、AnimatedBuilder 引入 一、创建动画控制器 二、创建动画 三、创建动画作用的组件 四、创建 AnimatedBuilder 关联动画与组件 五、动画运行 六、完整代码示例 七...、相关资源 AnimatedBuilder 动画使用流程 : ① 创建动画控制器 ② 创建动画创建动画作用的组件 ④ 创建 AnimatedBuilder 关联动画与组件 ⑤ 执行动画 ◯、AnimatedBuilder...引入 ---- 在上一篇博客 【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件...duration 参数即可 ; 创建动画控制器代码示例 : /// 1....// 动画持续时间 2 秒 duration: Duration(seconds: 3), ); 二、创建动画 ---- 这里创建 Tween 补间动画 , 设置动画的初始值

1.7K10
  • Flutter】Hero 动画 ( Hero 动画使用流程 | 创建 Hero 动画核心组件 | 创建源页面 | 创建目的页面 | 页面跳转 )

    文章目录 ◯、Hero 动画简介 一、创建 Hero 动画核心组件 二、创建源页面 三、创建目的页面 四、页面跳转 五、完整代码示例 六、相关资源 ◯、Hero 动画简介 ---- Hero Widget...动画涉及到的 API 较多 ; 一、创建 Hero 动画核心组件 ---- Hero 动画 tag 标识 : Hero 动画作用的组件在两个界面中都存在 , 给这两个 Hero 组件都设置相同的标识 ,...---- 创建目的界面 : 这里直接在代码中创建 , 该界面中也封装了 HeroWidget 组件 , 其 tag 与源界面 HeroWidget 组件相同 , 这样就可以保证这两个界面互相跳转时 ,...官网 : https://flutter.dev/ Flutter 插件下载地址 : https://pub.dev/packages Flutter 开发文档 : https://flutter.cn...动画参考文档 : https://flutterchina.club/animations/ 博客源码下载 : GitHub 地址 : https://github.com/han1202012/flutter_animation

    92420

    Flutter】Animation 动画 ( Flutter 动画类型 | Flutter 动画的核心类 )

    文章目录 一、Flutter 动画类型 二、Flutter 动画的核心类 三、相关资源 Flutter Animation 动画 : Flutter 动画类型 为 Widget 组件添加动画动画添加监听器...AnimationWidget AnimationBuilder Hero 动画 Flutter 动画参考文档 : https://flutterchina.club/animations/ 一、Flutter...动画类型 ---- Flutter 动画类型 : ① 补间动画 ( Tween Animation ) : 定义动画的 开始与结束的状态 , 以及动画运行的 时间曲线 , 由 Flutter 自动计算出动画的整个过程...Animation : Flutter 动画最核心的类 , 用于生成动画的中间过渡值 ; 组成 : Animation 动画由值和状态组成 ; 动画值 : 该值就是动画的执行过程中计算的值 , 该值可能会按照某种曲线变化...Tween : 动画执行过程中计算出来的过渡值 ; 如旋转动画 , 计算出来的角度值是 0 ~ 360 ; 参考文档 : https://api.flutter.dev/flutter/animation

    85920

    Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )

    文章目录 一、创建动画控制器 二、创建动画 三、设置值监听器 四、设置状态监听器 五、布局中使用动画值 六、动画运行 七、完整代码示例 八、相关资源 Flutter 动画基本流程 : ① 创建动画控制器...② 创建动画 ③ 设置值监听器 ④ 设置状态监听器 ⑤ 布局中使用动画值 ⑥ 动画运行 一、创建动画控制器 ---- AnimationController 构造函数参数说明 : AnimationController...duration 参数即可 ; 创建动画控制器代码示例 : /// 1....// 动画持续时间 2 秒 duration: Duration(seconds: 3), ); 二、创建动画 ---- 这里创建 Tween 补间动画 , 设置动画的初始值...0 , 结束值 300 , 动画在执行的 3 秒时间内 ( 动画控制器中指定的动画持续时间 ) , 自动计算出每个时间点的 0 ~ 300 之间的动画值 ; 创建动画代码示例 : /// 2

    1.4K40

    Flutter | 动画

    ,所以在 UI 系统中,动画的平均帧数是重要的指标,而在 Flutter 中,理想状态下是可以实现 60FPS 的,这和原生应用基本是持平的 Flutter动画抽象 为了方便开发者创建动画,不同的...builder: (context)=>PageB(), )); 复制代码 CupertinoPageRoute 是 Cupertino 组件库提供的 IOS 风格路由切换组件,它实现的就是左右滑动切换,那么如何自定义路由切换动画呢...这种场景中包含了多种动画,要实现这种效果,我们可以使用交织动画( Stagger Animation) 会非常简单, 使用交织动画需要注意以下几点: 创建交织动画,需要多个动画对象(Animation...对于间隔中设置动画的每个属性,需要分别创建 Tween 用于指定该属性的开始和结束值。...AnimatedSwitch实现原理 要实现新旧的 child 动画切换,只需要明确一个问题:动画执行的时机是如何对新旧 child 执行的动画 从 AnimatedSwitch 可以看到,当 child

    1.7K10

    Flutter 动画系列》组合动画

    老孟导读:在项目中动画效果很多时候是几种动画的组合,比如颜色、大小、位移等属性同时变化或者顺序变化,这篇文章讲解如何实现组合动画。...Flutter中组合动画使用Interval,Interval继承自Curve,用法如下: Animation _sizeAnimation = Tween(begin: 100.0, end: 300.0...animate(CurvedAnimation( parent: _animationController, curve: Interval(0.5, 1.0))); 表示_sizeAnimation动画从...0.5(一半)开始到结束,如果动画时长为6秒,_sizeAnimation则从第3秒开始。...想象下面的场景,一个红色的盒子,动画时长为6秒,前40%的时间大小从100->200,然后保持200不变20%的时间,最后40%的时间大小从200->300,这种效果通过TweenSequence实现,

    1.2K10

    Flutter动画【3】

    前言 在前面的文章中我们看了下Flutter中的补间动画Flutter Widgets,今天我们来看下页面过渡动画,也可以叫做共享元素动画,页面A的元素过渡到页面B元素的过场效果。...Hero 在Flutter中我们可以使用Hero来帮助实现这个共享元素动画的效果 hero 动画代码具有以下结构: 定义一个起始 hero widget,称为源 hero 。...重要的是两个 hero widget都使用相同的标签创建,通常是代表底层数据的对象。为了获得最佳效果, hero 应该有几乎相同的 widget树。 创建一个包含目标 hero 的路由。...Flutter计算从起点到终点对 hero 界限进行动画处理的补间(生成每一帧大小和位置) 例如在第一个页面中声明Widget1 然后再第二个界面同样的声明Widget2 可以看到我们的Widget...举个例子 在前面得文章中我们学习了很多的Widget比如button、TextField、ProgressIndicator等组件,今天我们就用相关的组件来做一个登陆的例子如何

    1.2K40

    Flutter动画【1】

    Flutter中的动画分为补间(Tween)动画和基于物理(Physics-based)的动画,由于篇幅原因我们今天就先来看下补间动画,当然也是我们接触比较多的动画类型。...补间动画的基本支持类 在Flutter中Animation对象是Flutter动画库中的一个核心类,它生成指导动画的值,没错它仅仅用来生成动画的值,这些值并不会直接没改变界面的展示效果。...在Flutter中我们使用AnimationController来管理动画,控制动画的开始、结束与快慢。...…… I/flutter ( 6616): 99.87325 I/flutter ( 6616): 100.0 好吧,我们还是把动画的值设置给floatcationbar再来看下效果。...为了解决这个问题,该示例创建了自己的Tween对象并显式计算了这些值。 其build方法.evaluate()在父级的动画对象上调用Tween函数以计算所需的size和opacity值。 ?

    80830

    Flutter | 动画概述、类型

    实现方式 Tween动画 缩放、旋转、平移、透明度、淡入淡出等 AnimatedBuilder Animated的建造者类, 可以把需要添加动画的组件传进去, 然后借助它实现一些动画效果; AnimatedContainer...在Container的基础上,加了一些动画效果, 让Container中的组件等,也可以实现动画; Hero动画 一种共享动画的形式, 通过它,我们可以在不同的界面中,共享 共享元素的内容,...这样当 一个界面 跳到 另外一个界面 的时候, 这些共享元素 就可以实现 一些无缝对接的动画效果; Flare动画 通过加载Flare文件、引入Flare相关库,轻松实现一些动画效果; Flutter...动画主要API架构图解 Flutter中有非常多的关于动画的API, 这里主要是一些主要的: ?...Animatable接口; TweenSequence是对Tween做了一些封装; 通过TweenSequence就可以间接地操作Tween; Tween和Animation比较核心; ---- 参考自CSDN的Flutter

    47520

    Flutter 动画之 Animation

    1.前言 1.1:Flutter动画中: 首先要看的是Flutter动画的几个类之间的关系: 主角当然是我们的Animation类了,它可以借助Animatable进行强化 Animatable...1.2:Animation和Animation体系一览 整个Flutter的Animation相比Android还是比较简单的 1.3:介绍今天的主角nStarPath 我们通过变动这个函数中的参数让路径动态变化实现动画...对于动画的演示,最好的当然是绘制了,绘制中最好的当然是我的五角星了 感觉创建StatefulWidget的代码开始时基本一致,写了一篇模板解析器 玩转字符串篇--Gradle+代码生成器=懒人必备...的动画之旅 2.Flutter动画基本使用 这里再贴一下这张Animation使用图: 2.1:动画的基本使用:Tween+AnimationController 1.让_AnimPageState...I/flutter ( 9073): 147.20725 I/flutter ( 9073): 148.3288125 I/flutter ( 9073): 149.4503125 I/flutter

    2.1K20

    Flutter》-- 8.动画

    ) 使用AnimationController 创建的Animation动画对象,默认情况下不会启动,要让动画运行,需要调用AnimationController 的forward()方法。...8.1.4 Tween 默认情况下,AnimationController创建动画对象的取值范围是[0.0, 1.0],可以使用Tween来自定义范围。...在Flutter中,渐变、平移、缩放和旋转动画都属于基础动画,如果要实现一些复杂的动画效果,可以把这些基础动画组合起来形成一个动画序列或重叠动画Flutter将这些动画序列或重叠动画称为交错动画。...在Flutter开发中,使用交错动画需要满足以下几点: 1)创建交错动画时需要创建多个动画对象; 2)一个AnimationController动画控制器控制所有的动画对象; 3)给每一个动画对象指定时间间隔...使用交错动画实现Flutter图标缩放和渐变的动画示例。

    1.2K30

    Flutter实现雨滴动画

    Flutter实现雨滴动画 目的 写了几个Flutter的demo,但是对Flutter的自定义view和动画都不太了解,看到一个类似效果在android的实现,就尝试用Flutter做一下。...同时也是学习Flutter的自定义view和动画相关的知识。 效果 [效果动图] 在蓝色区域点击,会产品水波纹动画。...扩散动画 Flutter中提供了很多的动画实现,这里用到的是AnimationController。...手势识别 上述基本实现了多个雨滴的展示和动画,然后我们要来实现对用户点击的响应。 Flutter提供了GestureDetector这个widget来做手势识别。...然后在注释(2)处启动动画,就可以看到我们文章开头的动画效果啦~ 总结 Flutter动画实现起来真的很简单,提供一个差值回调,然后不停的更新即可。

    3.5K50

    flutter系列之:如何自定义动画路由

    但是MaterialPageRoute太普通了,如果我们想要做点不同的跳转特效应该如何处理呢?一起来看看吧。...flutter动画基础flutter中有个专门的动画包叫做flutter/animation.dart, flutter中所有动画的核心叫做Animation。...forward表示动画在从头到尾播放。reverse表示动画在从尾到头播放。completed表示动画播放完毕,停在了结尾。有了动画的表示之后,如何动画进行控制呢?...实现一个自定义的route这里我们使用flutter中的SlideTransition,SlideTransition是一个AnimatedWidget,它表示的是一个组件的位置变化的动画。...总结最后程序运行的结果如下:其实flutter中的动画很简单,大家记住就是widget位置沿不同的曲线变化即可。

    72530

    如何快速提升 Flutter App 中的动画性能

    观前提醒:本文假设你已经有一定的 Flutter 开发经验,对Flutter 的 Widget,RenderObject 等概念有所了解,并且知道如何开启 DevTools。...涉及到动画,有状态,用 StatefulWidget ,State 里创建一个 AnimationController,用两个 Container 对应两个圈,外圈的 Container 的宽高监听动画跟着更新就行...毕竟这个动画很简单,内圈完全不变的,只有外圈随时间累加而放大/缩小。这个外圈动画自己画行不行?...由CustomPaint创建的 RenderObject 对象 RenderCustomPaint 会监听这个 repaint,而该对象是外部传入的 _controller,动画更新触发markNeedsPaint...结语 恭喜你,又离资深 Flutter 开发更近了一步。通过本文,你应该学会了如何Flutter 动画动得更有效率。关注公众号 逆锋起笔,回复 pdf,下载你需要的各种学习资料。

    1.5K20

    Flutter】Animation 动画 ( Flutter 动画的核心类 | Animation | CurvedAnimation | AnimationController | Tween )

    一、动画的核心类 Animation ---- Animation : Flutter 动画最核心的类 , 用于生成动画的中间过渡值 ; 组成 : Animation 动画由值和状态组成 ; 动画值 :...://api.flutter.dev/flutter/animation/CurvedAnimation-class.html CurvedAnimation 将动画制作成非线性的曲线动画 , 即...时间-动画值 的二维图像是曲线 ; 下面的代码是将 AnimationController 创建的线性动画 转为非线性的曲线动画的过程 ; 这里的线性 , 非线性指的是 在时间为横轴 , 值为纵轴的坐标系中..., 如旋转角度定义为 0 ~ 360 ; 物理引擎 : 使用物理引擎创建一个投掷动画 ; 默认情况下 , AnimationController 在给定的动画时间内 , 生成 0.0 ~ 1.0 区间内的值...Tween 对象 ; 这与调用 Tween 对象的 animate 方法多次效果是不同的 ; 创建一个由 AnimationController _controller 控制的动画 Animation

    64740
    领券