【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.mzph.cn/news/28994.shtml

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

相关文章

勘探开发人工智能应用：人工智能概述

勘探开发人工智能应用：人工智能概述

0 提纲 机器学习、深度学习、计算机视觉等技术已在勘探开发、油气生产、炼油炼化、经营管理等重点环节进行应用与推广。请思考&#xff1a; 输入&#xff1a;数据是什么(数字、文本、图)&#xff1f;如何理解数据&#xff1f;如何清洗数据&#xff1f;(需要专业领域知识)输出&…
阅读更多...
实习碎碎念

实习碎碎念

话说实习一周多了&#xff0c;学到的比自学一个月都多~~~加油狗子你最棒&#xff01;&#xff01;&#xff01; 环境搭建坑死了 SSM框架环境配置 Ideamavenjdktomcatnavicat https://www.cnblogs.com/seigann/p/14528551.htmlhttps://www.cnblogs.com/seigann/p/14528551.h…
阅读更多...
模板初阶以及string类使用

模板初阶以及string类使用

模板初阶以及string类使用 模板的简单认识1.泛型编程2.函数模板模板的原理图函数模板格式函数模板实例化非模板函数和模板函数的匹配原则 3.类模板类模板的定义格式类模板的实例化 string1.string简介2.string常用的接口 题目练习1.字符串相加2.字符串里面最后一个单词的长度3.…
阅读更多...
【瑞吉外卖】Git部分学习

【瑞吉外卖】Git部分学习

Git简介 Git是一个分布式版本控制工具&#xff0c;通常用来对软件开发过程中的源代码文件进行管理。通过Git仓库来存储和管理这些文件&#xff0c;Git仓库分为两种&#xff1a; 本地仓库&#xff1a;开发人员自己电脑上的Git仓库 远程仓库&#xff1a;远程服务器上的Git仓库…
阅读更多...
CVE漏洞复现-CVE-2021-3493 Linux 提权内核漏洞

CVE漏洞复现-CVE-2021-3493 Linux 提权内核漏洞

CVE-2021-3493 Linux 提权内核漏洞 漏洞描述 CVE-2021-3493 用户漏洞是 Linux 内核中没有文件系统中的 layfs 中的 Ubuntu over 特定问题&#xff0c;在 Ubuntu 中正确验证有关名称空间文件系统的应用程序。buntu 内核代码允许低权限用户在使用 unshare() 函数创建的用户命名…
阅读更多...
线上电影购票选座H5小程序源码开发

线上电影购票选座H5小程序源码开发

搭建一个线上电影购票选座H5小程序源码需要一些基本的技术和步骤。以下是一个大致的搭建过程&#xff0c;可以参考&#xff1a; 1. 确定需求和功能&#xff1a;首先要明确你想要的电影购票选座H5小程序的需求和功能&#xff0c;例如用户登录注册、电影列表展示、选座购票、订单…
阅读更多...
【Java可执行命令】（二十一）线程快照生成工具 jstack：帮助开发人员分析和排查线程相关问题（死锁、死循环、线程阻塞...）

【Java可执行命令】（二十一）线程快照生成工具 jstack：帮助开发人员分析和排查线程相关问题（死锁、死循环、线程阻塞...）

Java可执行命令之jstack 1️⃣ 概念2️⃣ 优势和缺点3️⃣ 使用3.1 语法格式3.2 使用步骤及技巧3.3 使用案例 4️⃣ 应用场景&#x1f33e; 总结 1️⃣ 概念 jstack 命令是 Java Development Kit&#xff08;JDK&#xff09;中提供的一项诊断工具&#xff0c;用于生成Java虚拟…
阅读更多...
WHQL认证中HCK和HLK的区别

WHQL认证中HCK和HLK的区别

开发者或硬件制造商要通过WHQL认证获得微软数字签名或是Windows徽标的使用权限&#xff0c;就需要使用WHQL认证的测试工具&#xff08;HCK或HLK&#xff09;对硬件设备或驱动程序进行测试。HCK和HLK其实是一个系列的测试工具&#xff0c;HCK和HLK的主要区别是用于测试不同Windo…
阅读更多...
pytest测试框架之fixture测试夹具详解

pytest测试框架之fixture测试夹具详解

fixture的优势 ​ pytest框架的fixture测试夹具就相当于unittest框架的setup、teardown&#xff0c;但相对之下它的功能更加强大和灵活。 命名方式灵活&#xff0c;不限于unittest的setup、teardown可以实现数据共享&#xff0c;多个模块跨文件共享前置后置可以实现多个模块跨…
阅读更多...
JAVA SpringBoot 项目 多线程、线程池的使用。

JAVA SpringBoot 项目 多线程、线程池的使用。

1.1 线程&#xff1a; 线程就是进程中的单个顺序控制流&#xff0c;也可以理解成是一条执行路径 单线程&#xff1a;一个进程中包含一个顺序控制流&#xff08;一条执行路径&#xff09; 多线程&#xff1a;一个进程中包含多个顺序控制流&#xff08;多条执行路径&#xff0…
阅读更多...
天津农商银行智能加密锁管理工具常见问题

天津农商银行智能加密锁管理工具常见问题

天津农商银行智能加密锁管理工具&#xff0c;在使用过程中&#xff0c;可能出现一些莫名的错误&#xff0c;针对亲身遇到的坑&#xff0c;分享给大家&#xff0c;以备不时之需。 一、转账业务导入文件中文汉字出现乱码&#xff0c;如下图。 原因是文件编码不正确&#xff0c;…
阅读更多...
Java项目作业~ 创建基于Maven的Java项目，连接数据库，实现对站点信息的管理，即实现对站点的新增，修改，删除，查询操作

Java项目作业~ 创建基于Maven的Java项目，连接数据库，实现对站点信息的管理，即实现对站点的新增，修改，删除，查询操作

需求&#xff1a; 创建基于Maven的Java项目&#xff0c;连接数据库&#xff0c;实现对站点信息的管理&#xff0c;即实现对站点的新增&#xff0c;修改&#xff0c;删除&#xff0c;查询操作。 以下是站点表的建表语句&#xff1a; CREATE TABLE websites (id int(11) NOT N…
阅读更多...
收钱吧与火山引擎VeDI合作一年后 有了哪些新变化？

收钱吧与火山引擎VeDI合作一年后 有了哪些新变化？

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 收钱吧正在和火山引擎数智平台&#xff08;VeDI&#xff09;跑出一条业务提效新通路。 相关数据显示&#xff0c;收钱吧的日服务人次就近5000万&#xff0c;累计服务…
阅读更多...
测评HTTP代理的透明匿名？

测评HTTP代理的透明匿名？

在我们日常的网络冒险中&#xff0c;你是否曾听说过HTTP代理的透明匿名特性&#xff1f;这些神秘的工具就像是网络世界中的隐身斗士&#xff0c;让我们能够在互联网的迷雾中保护自己的身份和隐私。那么&#xff0c;让我们一起揭开HTTP代理的面纱&#xff0c;探索其中的奥秘吧&a…
阅读更多...
el-table实现指定列合并

el-table实现指定列合并

table传入span-method方法可以实现合并行或列&#xff0c;方法的参数是一个对象&#xff0c;里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组&#xff0c;第一个元素代表rowspan&#xff0c;第二个元素…
阅读更多...
Qt多线程编程

Qt多线程编程

本章介绍Qt多线程编程。 1.方法 Qt多线程编程通常有2种方法&#xff1a; 1)通过继承QThread类&#xff0c;实现run()方法。 2)采用QObject::moveToThread()方法。 方法2是Qt官方推荐的方法&#xff0c;本文介绍第2种。 2.步骤 1)创建Worker类 这里的Worker类就是我们需要…
阅读更多...
数学·包含学科简介

数学·包含学科简介

数学包含学科简介 14 逻辑与基础 ▪ 1410:演绎逻辑学 ▪ 1420:证明论 ▪ 1430:递归论 ▪ 1440:模型论 ▪ 1450:公理集合论 ▪ 1460:数学基础 ▪ 1499:数理逻辑与数学基础其他学科 17 数论 ▪ 1710:初等数论 ▪ 1720:解析数论 ▪ 1730:代数数论 ▪ 1740:超越数论 ▪ 1750:丢…
阅读更多...
FPGA开发：音乐播放器

FPGA开发：音乐播放器

FPGA开发板上的蜂鸣器可以用来播放音乐&#xff0c;只需要控制蜂鸣器信号的方波频率、占空比和持续时间即可。 1、简谱原理 简谱上的4/4表示该简谱以4分音符为一拍&#xff0c;每小节4拍&#xff0c;简谱上应该也会标注每分钟多少拍。音符时值对照表如下图所示&#xff0c;这表…
阅读更多...
大模型老是胡说八道怎么办？哈佛大学提出推理干预ITI技术有效缓解模型幻觉现象

大模型老是胡说八道怎么办？哈佛大学提出推理干预ITI技术有效缓解模型幻觉现象

论文链接&#xff1a;https://arxiv.org/abs/2306.03341 代码仓库&#xff1a;https://github.com/likenneth/honest_llama 近来与ChatGPT有关的大模型的话题仍然处于风口浪尖&#xff0c;但是大家讨论的方向已经逐渐向大语言模型的实际应用、安全、部署等方面靠近。虽然大模型…
阅读更多...
Gartner发布《2023年全球RPA魔力象限》：90%RPA厂商，将提供生成式AI自动化

Gartner发布《2023年全球RPA魔力象限》：90%RPA厂商，将提供生成式AI自动化

8月3日&#xff0c;全球著名咨询调查机构Gartner发布了《2023年全球RPA魔力象限》&#xff0c;通过产品能力、技术创新、市场影响力等维度&#xff0c;对全球16家卓越RPA厂商进行了深度评估。 弘玑Cyclone&#xff08;Cyclone Robotics&#xff09;、来也&#xff08;Laiye&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023