【Flutter】【packages】simple_animations 简单的实现动画

在这里插入图片描述

package：simple_animations

导入包到项目中去

  • 可以实现简单的动画，
  • 快速实现，不需要自己过多的设置
  • 有多种样式可以实现
  • [ ]

功能：

简单的用例：具体需要详细可以去 pub 链接地址

1. PlayAnimationBuilder

PlayAnimationBuilder<double>(tween: Tween(begin: 100.0, end: 200.0), //数值是100 到00duration: const Duration(seconds: 1), // 动画的时间，是1s 完成动画builder: (context, value, _) {return Container(width: value, // 使用tween 的数值height: value,color: Colors.blue,);},onCompleted: () {// 结束的时候做什么操作},onStarted: (){//在开始的时候运行什么，做什么操作},)

新增child 参数，静态的child ,减少资源的浪费，其他的build 同样可以这样使用

PlayAnimationBuilder<double>(tween: Tween(begin: 50.0, end: 200.0),duration: const Duration(seconds: 5),child: const Center(child: Text('Hello!')), // pass in static childbuilder: (context, value, child) {return Container(width: value,height: value,color: Colors.green,child: child, // use child inside the animation);},)

2.LoopAnimationBuilder 循环动画

该用例，是一个正方形旋转360度，并且持续的转动

Center(child: LoopAnimationBuilder<double>(tween: Tween(begin: 0.0, end: 2 * pi), // 0° to 360° (2π)duration: const Duration(seconds: 2), // for 2 seconds per iterationbuilder: (context, value, _) {return Transform.rotate(angle: value, // use valuechild: Container(color: Colors.blue, width: 100, height: 100),);},),)

3.MirrorAnimationBuilder 镜像动画

        MirrorAnimationBuilder<double>(tween:Tween(begin: -100.0, end: 100.0), // x 轴的数值duration: const Duration(seconds: 2),//动画时间curve: Curves.easeInOutSine, // 动画曲线builder: (context, value, child) {return Transform.translate(offset: Offset(value, 0), // use animated value for x-coordinatechild: child,);},child: Container(width: 100,height: 100,color: Colors.green,),)

4.CustomAnimationBuilder 自定义动画，可以在stl 无状态里面使用

        CustomAnimationBuilder<double>(control: Control.mirror,tween: Tween(begin: 100.0, end: 200.0),duration: const Duration(seconds: 2),delay: const Duration(seconds: 1),//延迟1s才开始动画curve: Curves.easeInOut,startPosition: 0.5,animationStatusListener: (status) {//状态的监听，可以在这边做一些操作debugPrint('status updated: $status');},builder: (context, value, child) {return Container(width: value,height: value,color: Colors.blue,child: child,);},child: const Center(child: Text('Hello!',style: TextStyle(color: Colors.white, fontSize: 24))),)

带控制器

        CustomAnimationBuilder<double>(duration: const Duration(seconds: 1),control: control, // bind state variable to parametertween: Tween(begin: -100.0, end: 100.0),builder: (context, value, child) {return Transform.translate(// animation that moves childs from left to rightoffset: Offset(value, 0),child: child,);},child: MaterialButton(// there is a buttoncolor: Colors.yellow,onPressed: () {setState(() {control = (control == Control.play)? Control.playReverse: Control.play;});}, // clicking button changes animation directionchild: const Text('Swap'),),)

5.MovieTween 补间动画，可并行的动画

可以一个widget 多个动画同时或者不同时的运行

final MovieTween tween = MovieTween()..scene(begin: const Duration(milliseconds: 0),end: const Duration(milliseconds: 1000)).tween('width', Tween(begin: 0.0, end: 100.0)) //0-1秒的的 width 的数值..scene(begin: const Duration(milliseconds: 1000),end: const Duration(milliseconds: 1500)).tween('width', Tween(begin: 100.0, end: 200.0)) //1-1。5秒的的 width 的数值..scene(begin: const Duration(milliseconds: 0),duration: const Duration(milliseconds: 2500)).tween('height', Tween(begin: 0.0, end: 200.0)) //0-2.5秒的的 height 的数值..scene(begin: const Duration(milliseconds: 0),duration: const Duration(milliseconds: 3000)) //0-3 秒的的 颜色 的数值.tween('color', ColorTween(begin: Colors.red, end: Colors.blue));PlayAnimationBuilder<Movie>(tween: tween, // Pass in tweenduration: tween.duration, // Obtain durationbuilder: (context, value, child) {return Container(width: value.get('width'), // Get animated valuesheight: value.get('height'),color: value.get('color'),);},),

6.MovieTween 串行的动画补间

简单的意思就是，按照设计的动画一个一个执行，按照顺序来执行，可以设置不同的数值或者是参数来获取，然后改变动画

final signaltween = MovieTween()..tween('x', Tween(begin: -100.0, end: 100.0),duration: const Duration(seconds: 1)).thenTween('y', Tween(begin: -100.0, end: 100.0),duration: const Duration(seconds: 1)).thenTween('x', Tween(begin: 100.0, end: -100.0),duration: const Duration(seconds: 1)).thenTween('y', Tween(begin: 100.0, end: -100.0),duration: const Duration(seconds: 1));LoopAnimationBuilder<Movie>(tween: signaltween,builder: (ctx, value, chid) {return Transform.translate(offset: Offset(value.get('x'), value.get('y')),child: Container(width: 100,height: 100,color: Colors.green,));},duration: signaltween.duration,
),

总的代码：

import 'dart:math';import 'package:flutter/material.dart';
import 'package:simple_animations/simple_animations.dart';void main() {runApp(const MaterialApp(home: Scaffold(body: MyPage())));
}class MyPage extends StatefulWidget {const MyPage({Key? key}) : super(key: key);@overrideState<MyPage> createState() => _MyPageState();
}class _MyPageState extends State<MyPage> {Control control = Control.play; // state variablevoid toggleDirection() {// toggle between control instructionssetState(() {control = (control == Control.play) ? Control.playReverse : Control.play;});}@overrideWidget build(BuildContext context) {
//电影样式的动画final MovieTween tween = MovieTween()..scene(begin: const Duration(milliseconds: 0),end: const Duration(milliseconds: 1000)).tween('width', Tween(begin: 0.0, end: 100.0)) //0-1秒的的 width 的数值..scene(begin: const Duration(milliseconds: 1000),end: const Duration(milliseconds: 1500)).tween('width', Tween(begin: 100.0, end: 200.0)) //1-1。5秒的的 width 的数值..scene(begin: const Duration(milliseconds: 0),duration: const Duration(milliseconds: 2500)).tween('height', Tween(begin: 0.0, end: 200.0)) //0-2.5秒的的 height 的数值..scene(begin: const Duration(milliseconds: 0),duration: const Duration(milliseconds: 3000)) //0-3 秒的的 颜色 的数值.tween('color', ColorTween(begin: Colors.red, end: Colors.blue));final signaltween = MovieTween()..tween('x', Tween(begin: -100.0, end: 100.0),duration: const Duration(seconds: 1)).thenTween('y', Tween(begin: -100.0, end: 100.0),duration: const Duration(seconds: 1)).thenTween('x', Tween(begin: 100.0, end: -100.0),duration: const Duration(seconds: 1)).thenTween('y', Tween(begin: 100.0, end: -100.0),duration: const Duration(seconds: 1));return SingleChildScrollView(child: Column(children: [LoopAnimationBuilder<Movie>(tween: signaltween,builder: (ctx, value, chid) {return Transform.translate(offset: Offset(value.get('x'), value.get('y')),child: Container(width: 100,height: 100,color: Colors.green,));},duration: signaltween.duration,),PlayAnimationBuilder<Movie>(tween: tween, // Pass in tweenduration: tween.duration, // Obtain durationbuilder: (context, value, child) {return Container(width: value.get('width'), // Get animated valuesheight: value.get('height'),color: value.get('color'),);},),PlayAnimationBuilder<double>(tween: Tween(begin: 100.0, end: 200.0), //数值是100 到00duration: const Duration(seconds: 1), // 动画的时间，是1s 完成动画builder: (context, value, _) {return Container(width: value, // 使用tween 的数值height: value,color: Colors.blue,);},onCompleted: () {// 结束的时候做什么操作},onStarted: () {//在开始的时候运行什么，做什么操作},),MirrorAnimationBuilder<Color?>(tween:ColorTween(begin: Colors.red, end: Colors.blue), // 颜色的渐变 红色到蓝色duration: const Duration(seconds: 5), // 动画时长5秒builder: (context, value, _) {return Container(color: value, // 使用该数值width: 100,height: 100,);},),//实现一个绿色箱子从左到右，从右到走MirrorAnimationBuilder<double>(tween: Tween(begin: -100.0, end: 100.0), // x 轴的数值duration: const Duration(seconds: 2), //动画时间curve: Curves.easeInOutSine, // 动画曲线builder: (context, value, child) {return Transform.translate(offset: Offset(value, 0), // use animated value for x-coordinatechild: child,);},child: Container(width: 100,height: 100,color: Colors.green,),),CustomAnimationBuilder<double>(control: Control.mirror,tween: Tween(begin: 100.0, end: 200.0),duration: const Duration(seconds: 2),delay: const Duration(seconds: 1),curve: Curves.easeInOut,startPosition: 0.5,animationStatusListener: (status) {debugPrint('status updated: $status');},builder: (context, value, child) {return Container(width: value,height: value,color: Colors.blue,child: child,);},child: const Center(child: Text('Hello!',style: TextStyle(color: Colors.white, fontSize: 24))),),CustomAnimationBuilder<double>(duration: const Duration(seconds: 1),control: control, // bind state variable to parametertween: Tween(begin: -100.0, end: 100.0),builder: (context, value, child) {return Transform.translate(// animation that moves childs from left to rightoffset: Offset(value, 0),child: child,);},child: MaterialButton(// there is a buttoncolor: Colors.yellow,onPressed: () {setState(() {control = (control == Control.play)? Control.playReverse: Control.play;});}, // clicking button changes animation directionchild: const Text('Swap'),),)],),);}
}

混合多种动画

import 'dart:math';import 'package:flutter/material.dart';
import 'package:simple_animations/simple_animations.dart';void main() {runApp(const MaterialApp(home: Scaffold(body: MyPage())));
}class MyPage extends StatefulWidget {const MyPage({Key? key}) : super(key: key);@overrideState<MyPage> createState() => _MyPageState();
}class _MyPageState extends State<MyPage> {Control control = Control.play; // state variable@overrideWidget build(BuildContext context) {final x = MovieTweenProperty<double>();final y = MovieTweenProperty<double>();final color = MovieTweenProperty<Color>();final tween = MovieTween()..scene(begin: const Duration(seconds: 0),duration: const Duration(seconds: 1)).tween(x, Tween(begin: -100.0, end: 100.0),curve: Curves.easeInOutSine).tween(color, ColorTween(begin: Colors.red, end: Colors.yellow))..scene(begin: const Duration(seconds: 1),duration: const Duration(seconds: 1)).tween(y, Tween(begin: -100.0, end: 100.0),curve: Curves.easeInOutSine)..scene(begin: const Duration(seconds: 2),duration: const Duration(seconds: 1)).tween(x, Tween(begin: 100.0, end: -100.0),curve: Curves.easeInOutSine)..scene(begin: const Duration(seconds: 1),end: const Duration(seconds: 3)).tween(color, ColorTween(begin: Colors.yellow, end: Colors.blue))..scene(begin: const Duration(seconds: 3),duration: const Duration(seconds: 1)).tween(y, Tween(begin: 100.0, end: -100.0),curve: Curves.easeInOutSine).tween(color, ColorTween(begin: Colors.blue, end: Colors.red));return MaterialApp(home: Scaffold(backgroundColor: Colors.white,body: Center(child: LoopAnimationBuilder<Movie>(tween: tween, // Pass in tweenduration: tween.duration, // Obtain durationbuilder: (context, value, child) {return Transform.translate(// Get animated offsetoffset: Offset(x.from(value), y.from(value)),child: Container(width: 100,height: 100,color: color.from(value), // Get animated color),);},),),),);}
}

边运动便改变颜色

同原生的动画混合开发

以下代码实现，一个container 的宽高的尺寸变化

class MyPage extends StatefulWidget {const MyPage({Key? key}) : super(key: key);@overrideState<MyPage> createState() => _MyPageState();
}class _MyPageState extends State<MyPage> with AnimationMixin {//同原生的混合使用// Control control = Control.play; // state variablelate Animation<double> size;@overridevoid initState() {super.initState();// controller 不需要重新定义，AnimationMixin 里面已经自动定义了个size = Tween(begin: 0.0, end: 200.0).animate(controller);controller.play(); //运行}@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(backgroundColor: Colors.white,body: Center(child: Container(width: size.value,height: size.value,color: Colors.red,),),),);}
}

实现图

多个控制器控制一个widget的实现多维度的动画实现

import 'dart:math';import 'package:flutter/material.dart';
import 'package:simple_animations/simple_animations.dart';void main() {runApp(const MaterialApp(home: Scaffold(body: MyPage())));
}class MyPage extends StatefulWidget {const MyPage({Key? key}) : super(key: key);@overrideState<MyPage> createState() => _MyPageState();
}class _MyPageState extends State<MyPage> with AnimationMixin {//同原生的混合使用late AnimationController widthcontrol; //宽度控制late AnimationController heigthcontrol; //高度控制器late AnimationController colorcontrol; //颜色控制器late Animation<double> width; //宽度控制late Animation<double> heigth; //高度控制late Animation<Color?> color; //颜色控制@overridevoid initState() {
// mirror 镜像widthcontrol = createController()..mirror(duration: const Duration(seconds: 5));heigthcontrol = createController()..mirror(duration: const Duration(seconds: 3));colorcontrol = createController()..mirror(duration: const Duration(milliseconds: 1500));width = Tween(begin: 100.0, end: 200.0).animate(widthcontrol);heigth = Tween(begin: 100.0, end: 200.0).animate(heigthcontrol);color = ColorTween(begin: Colors.green, end: Colors.black).animate(colorcontrol);super.initState();}@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(backgroundColor: Colors.white,body: Center(child: Container(width: width.value,height: heigth.value,color: color.value,),),),);}
}

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/83700.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

递归神经网络简介

递归神经网络简介

一、说明 说起递归神经网络&#xff0c;递归神经网络&#xff08;RNN&#xff09;主要包括以下几种类型&#xff1a; 简单的RNN&#xff08;Simple RNN&#xff09;&#xff1a;最基本的RNN类型&#xff0c;每个时刻的输出都与前面时刻的状态有关。 循环神经网络&#xff08;R…
阅读更多...
Blazor前后端框架Known-V1.2.10

Blazor前后端框架Known-V1.2.10

V1.2.10 Known是基于C#和Blazor开发的前后端分离快速开发框架&#xff0c;开箱即用&#xff0c;跨平台&#xff0c;一处代码&#xff0c;多处运行。 Gitee&#xff1a; https://gitee.com/known/KnownGithub&#xff1a;https://github.com/known/Known 概述 基于C#和Blazo…
阅读更多...
Kafka：springboot集成kafka收发消息

Kafka：springboot集成kafka收发消息

kafka环境搭建参考Kafka&#xff1a;安装和配置_moreCalm的博客-CSDN博客 1、springboot中引入kafka依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><…
阅读更多...
Python-OpenCV中的图像处理-形态学转换

Python-OpenCV中的图像处理-形态学转换

Python-OpenCV中的图像处理-形态学转换 形态学转换腐蚀膨胀开运算闭运算形态学梯度礼帽黑帽形态学操作之间的关系 形态学代码例程 形态学转换 形态学操作:腐蚀&#xff0c;膨胀&#xff0c;开运算&#xff0c;闭运算&#xff0c;形态学梯度&#xff0c;礼帽&#xff0c;黑帽等…
阅读更多...
B树的插入与删除过程

B树的插入与删除过程

B树的插入 原树&#xff1a; 插入key后&#xff0c;若导致原节点关键字数超过上限&#xff0c;则从中间位置&#xff08; ⌈ m 2 ⌉ \lceil\frac{m}{2}\rceil ⌈2m​⌉&#xff09;将关键字分成两部分&#xff0c;左部分包含的关键字放在原节点中&#xff0c;右部分包含的关键…
阅读更多...
前端下载文化部几种方法(excel,zip,html,markdown、图片等等)和导出 zip 压缩包

前端下载文化部几种方法(excel,zip,html,markdown、图片等等)和导出 zip 压缩包

文章目录 1、location.href2、location.href3、a标签4、请求后端的方式5、文件下载的方式6、Blob和Base647、下载附件方法(excel,zip,html,markdown)8、封装下载函数9、导出 zip 压缩包相关方法(流方式) 总结 1、location.href //get请求 window.location.href url;2、locati…
阅读更多...
死锁的成因,和解决方案总结

死锁的成因,和解决方案总结

何为死锁 死锁是多线程或并发程序中的一种情况&#xff0c;当多个线程因为竞争资源而相互等待&#xff0c;并且无法继续执行的情况。在死锁中&#xff0c;每个线程都在等待其他线程释放资源&#xff0c;从而导致所有线程都陷入无限等待状态&#xff0c;无法继续向前执行&#…
阅读更多...
0805hw

0805hw

1. #include <myhead.h> void Bub_sort(int *arr,int n)//冒泡排序 {for(int i1;i<n;i){int count0;for(int j0;j<n-i;j){if(arr[j]>arr[j1]){int temparr[j];arr[j]arr[j1];arr[j1]temp;count;}}if(count0){break;}}printf("冒泡排序后输出结果:\n"…
阅读更多...
uni-app离线打包高德地图导入android studio不能正常显示

uni-app离线打包高德地图导入android studio不能正常显示

本人使用的uni-app SDK版本&#xff1a;Android-SDK3.8.7.81902_20230704 1.导入以上文件&#xff0c;依赖已经自动添加了 2.确保这个正常引入 3.修改AndroidMainifest.xml,添加自己的密钥
阅读更多...
整理mongodb文档:删

整理mongodb文档:删

个人博客 整理mongodb文档:删 求关注&#xff0c;哪儿不足&#xff0c;求大佬们指出&#xff0c;哪儿写的不够通俗易懂跟清晰&#xff0c;也求指出 文章概叙 本文主要是介绍了删除数据的几个方法&#xff0c;主要还是在介绍deleteMany、deleteOne以及remove&#xff0c;对于…
阅读更多...
JAVA基础之放弃使用Random

JAVA基础之放弃使用Random

随机是日常生活中经常遇到的非常有趣的东西&#xff0c;比如说抛硬币&#xff0c;他的不可预知性总是让我们特别着迷&#xff0c;在拿不定主意时&#xff0c;有些人就喜欢用抛硬币的方式来帮助我们做决定。体育领域也喜欢用喜欢用抛硬币的方式来猜先。随机数功能是Java非常非常…
阅读更多...
14个前端开发者应该知道的实用网站

14个前端开发者应该知道的实用网站

在本文中&#xff0c;我将分享一些非常有用的网站合集&#xff0c;这些网站可以在你的日常工作中极大地帮助你。这些网站已经成为我各种任务的首选资源&#xff0c;节省了我的时间&#xff0c;提高了工作效率 文档自动化 Documatic 是一款专为开发人员设计的非常高效的搜索引擎…
阅读更多...
Pytorch深度学习-----现有网络模型的使用及修改（VGG16模型）

Pytorch深度学习-----现有网络模型的使用及修改（VGG16模型）

系列文章目录 PyTorch深度学习——Anaconda和PyTorch安装 Pytorch深度学习-----数据模块Dataset类 Pytorch深度学习------TensorBoard的使用 Pytorch深度学习------Torchvision中Transforms的使用&#xff08;ToTensor&#xff0c;Normalize&#xff0c;Resize &#xff0c;Co…
阅读更多...
STM32 CubeMX USB_MSC(存储设备U盘)

STM32 CubeMX USB_MSC(存储设备U盘)

STM32 CubeMX STM32 CubeMX USB_MSC(存储设备U盘&#xff09; STM32 CubeMX前言 《使用内部Flash》——U盘一、STM32 CubeMX 设置USB时钟设置USB使能UBS功能选择FATFS功能 二、代码部分修改代码"usbd_storage_if.c"修改代码"user_diskio.c"main函数初始化插…
阅读更多...
每天一道leetcode：剑指 Offer 27. 二叉树的镜像（适合初学者递归树）

每天一道leetcode：剑指 Offer 27. 二叉树的镜像（适合初学者递归树）

今日份题目&#xff1a; 请完成一个函数&#xff0c;输入一个二叉树&#xff0c;该函数输出它的镜像。 例如输入&#xff1a; 4 / \ 2 7 / \ / \ 1 3 6 9 镜像输出&#xff1a; 4 / \ 7 2 / \ / \ 9 6 3 1 示例 输入&#xff1a;root [4,2,7…
阅读更多...
c基础扫雷

c基础扫雷

和三子棋一样&#xff0c;主函数先设计游戏菜单界面&#xff0c;这里就不做展示了。 初始化棋盘 初级扫雷大小为9*9的棋盘&#xff0c;但排雷是周围一圈进行排雷(8格)&#xff0c;而边界可能会越界。数组扩大了一圈,行和列都加了2&#xff0c;所以我们用一个11*11的数组来初始化…
阅读更多...
数据结构—树和二叉树

数据结构—树和二叉树

5.树和二叉树 5.1树和二叉树的定义 树形结构&#xff08;非线性结构&#xff09;&#xff1a;结点之间有分支&#xff0c;具有层次关系。 5.1.1树的定义 树&#xff08;Tree&#xff09;是n&#xff08;n≥0&#xff09;个结点的有限集。 若n0&#xff0c;称为空树&#x…
阅读更多...
Vue2嵌入HTML页面空白、互相传参、延迟加载等问题解决方案

Vue2嵌入HTML页面空白、互相传参、延迟加载等问题解决方案

一、需求分析 最近做的一个用H5加原生开发的html项目&#xff0c;现需要集成到Vue2.0项目里面来。遇到的相关问题做个记录和总结&#xff0c;以便能帮到大家避免踩坑。 二、问题记录 1、页面空白问题 将html页面通过iframe的方式嵌入进来之后&#xff0c;发现页面是空白的&am…
阅读更多...
面试热题（倒数第k个结点）

面试热题（倒数第k个结点）

输入一个链表&#xff0c;输出该链表中倒数第k个节点。为了符合大多数人的习惯&#xff0c;本题从1开始计数&#xff0c;即链表的尾节点是倒数第1个节点。 例如&#xff0c;一个链表有 6 个节点&#xff0c;从头节点开始&#xff0c;它们的值依次是 1、2、3、4、5、6。这个链表…
阅读更多...
opencv动态目标检测

opencv动态目标检测

文章目录 前言一、效果展示二、实现方法构造形态学操作所需的核:创建背景减除模型:形态学操作:轮廓检测: 三、代码python代码C代码 总结参考文档 前言 很久没更新文章了&#xff0c;这次因为工作场景需要检测动态目标&#xff0c;特此记录一下。 一、效果展示 二、实现方法 基…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023