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

简介: 【Flutter】Animation 动画 ( Flutter 动画类型 | Flutter 动画的核心类 )

文章目录

一、Flutter 动画类型

二、Flutter 动画的核心类

三、相关资源



Flutter Animation 动画 :


Flutter 动画类型

为 Widget 组件添加动画

为动画添加监听器

AnimationWidget

AnimationBuilder

Hero 动画

Flutter 动画参考文档 : https://flutterchina.club/animations/






一、Flutter 动画类型


Flutter 动画类型 :


① 补间动画 ( Tween Animation ) : 定义动画的 开始与结束的状态 , 以及动画运行的 时间曲线 , 由 Flutter 自动计算出动画的整个过程 ;


② 物理动画 : 该动画 基于物理原理 , 运行机制与真实世界类似 ; 如从高处抛出球 , 根据高度 , 抛出速度 , 重力加速度计算球的运行曲线 ;






二、Flutter 动画的核心类


1. Animation : Flutter 动画最核心的类 , 用于生成动画的中间过渡值 ;


组成 : Animation 动画由值和状态组成 ;

动画值 : 该值就是动画的执行过程中计算的值 , 该值可能会按照某种曲线变化 , 也可能单调变化 ;

动画状态 : 状态标记当前的动画的执行顺序 ( 从到到尾 / 从尾到头 ) ;

监听 : 动画的执行过程中可以添加监听器 , 监听动画的执行状态 ;

参考文档 : https://api.flutter.dev/flutter/animation/Animation-class.html


2. CurvedAnimation : 继承自 Animation , 可以将动画过程计算成一个非线性的过程 ;


主要作用 : 将曲线应用于另一个动画的动画 ;


参考文档 : https://api.flutter.dev/flutter/animation/CurvedAnimation-class.html



3. AnimationController : 继承自 Animation , 用于 管理 Animation ;


参考文档 : https://api.flutter.dev/flutter/animation/AnimationController-class.html


4. Tween : 动画执行过程中计算出来的过渡值 ; 如旋转动画 , 计算出来的角度值是 0 00 ~ 360 360360 ;


参考文档 : https://api.flutter.dev/flutter/animation/Tween-class.html





三、相关资源


参考资料 :


Flutter 官网 : https://flutter.dev/

Flutter 插件下载地址 : https://pub.dev/packages

Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )

官方 GitHub 地址 : https://github.com/flutter

Flutter 中文社区 : https://flutter.cn/

Flutter 实用教程 : https://flutter.cn/docs/cookbook

Flutter CodeLab : https://codelabs.flutter-io.cn/

Dart 中文文档 : https://dart.cn/

Dart 开发者官网 : https://api.dart.dev/

Flutter 中文网 : https://flutterchina.club/ , http://flutter.axuer.com/docs/

Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )

GitHub 上的 Flutter 开源示例 : https://download.csdn.net/download/han1202012/15989510

Flutter 实战电子书 : https://book.flutterchina.club/chapter1/


重要的专题 :


Flutter 动画参考文档 : https://flutterchina.club/animations/


博客源码下载 :


GitHub 地址 : https://github.com/han1202012/flutter_image_widget ( 随博客进度一直更新 , 有可能没有本博客的源码 )


博客源码快照 : https://download.csdn.net/download/han1202012/16083326 ( 本篇博客的源码快照 , 可以找到本博客的源码 )


目录
相关文章
|
3天前
|
开发工具 UED 容器
Flutter&鸿蒙next 实现长按录音按钮及动画特效
本文介绍了如何在 Flutter 中实现一个带有动画效果的长按录音按钮。通过使用 `GestureDetector` 监听长按手势,结合 `AnimatedContainer` 和 `AnimationController` 实现按钮的动画效果,以及 `flutter_sound` 插件完成录音功能。文章详细讲解了功能需求、实现思路和代码实现,帮助读者逐步掌握这一实用功能的开发方法。
66 5
|
5天前
|
Dart 安全 编译器
Flutter结合鸿蒙next 中数据类型转换的高级用法:dynamic 类型与其他类型的转换解析
在 Flutter 开发中,`dynamic` 类型提供了灵活性,但也带来了类型安全性问题。本文深入探讨 `dynamic` 类型及其与其他类型的转换,介绍如何使用 `as` 关键字、`is` 操作符和 `whereType<T>()` 方法进行类型转换,并提供最佳实践,包括避免过度使用 `dynamic`、使用 Null Safety 和异常处理,帮助开发者提高代码的可读性和可维护性。
62 1
|
5天前
|
前端开发 开发者
深入探索 Flutter 鸿蒙版的画笔使用与高级自定义动画
本文深入探讨了 Flutter 中的绘图功能,重点介绍了 CustomPainter 和 Canvas 的使用方法。通过示例代码,详细讲解了如何绘制自定义图形、设置 Paint 对象的属性以及实现高级自定义动画。内容涵盖基本绘图、动画基础、渐变动画和路径动画,帮助读者掌握 Flutter 绘图与动画的核心技巧。
60 1
|
11天前
动画控制器在 Flutter 中的工作原理
【10月更文挑战第18天】总的来说,动画控制器 `AnimationController` 在 Flutter 中起着关键的作用,它通过控制动画的数值、速度、节奏和状态,实现了丰富多彩的动画效果。理解它的工作原理对于我们在 Flutter 中创建各种精彩的动画是非常重要的。
|
11天前
|
搜索推荐
Flutter 中的 AnimationController 类
【10月更文挑战第18天】深入了解了 Flutter 中的 `AnimationController`类。它是构建精彩动画效果的重要基石,掌握它的使用方法对于开发具有吸引力的 Flutter 应用至关重要。
|
23天前
|
UED
flutter:动画&状态管理 (十三)
本文档介绍了Flutter中`animatedList`的使用方法和状态管理的示例。`animatedList`用于创建带有动画效果的列表,示例代码展示了如何添加、删除列表项,并执行相应的动画效果。状态管理部分通过一个简单的点击切换颜色的示例,演示了如何在Flutter中管理组件的状态。
|
3月前
|
前端开发
Flutter快速实现自定义折线图,支持数据改变过渡动画
Flutter快速实现自定义折线图,支持数据改变过渡动画
90 4
Flutter快速实现自定义折线图,支持数据改变过渡动画
|
3月前
|
Unix API 开发者
Flutter笔记:使用Flutter私有类涉及的授权协议问题
Flutter笔记:使用Flutter私有类涉及的授权协议问题
43 1
|
4月前
Flutter-实现头像叠加动画效果
Flutter-实现头像叠加动画效果
59 0
|
4月前
Flutter-加载中动画
Flutter-加载中动画
41 0