【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.hqwc.cn/news/61785.html

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

相关文章

MemFire教程｜FastAPI+MemFire Cloud+LangChain开发ChatGPT应用-Part2

MemFire教程｜FastAPI+MemFire Cloud+LangChain开发ChatGPT应用-Part2

基本介绍 上篇文章我们讲解了使用FastAPIMemFire CloudLangChain进行GPT知识库开发的基本原理和关键路径的代码实现。目前完整的实现代码已经上传到了github&#xff0c;感兴趣的可以自己玩一下&#xff1a; https://github.com/MemFire-Cloud/memfirecloud-qa 目前代码主要…
阅读更多...
YOLOv5、YOLOv8改进：SEAttention 通道注意力机制

YOLOv5、YOLOv8改进：SEAttention 通道注意力机制

基于通道的注意力机制 源自于 CVPR2018: Squeeze-and-Excitation Networks 官方代码&#xff1a;GitHub - hujie-frank/SENet: Squeeze-and-Excitation Networks 如图所示&#xff0c;其实就是将不同的通道赋予相关的权重。Attention机制用到这里用朴素的话说就是&#xff0c;…
阅读更多...
【VB6|第22期】用SQL的方式读取Excel数据

【VB6|第22期】用SQL的方式读取Excel数据

日期&#xff1a;2023年8月7日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xff…
阅读更多...
Web前端之NodeJS、Vue

Web前端之NodeJS、Vue

文章目录 一、Babel转码器1.1 Babel安装流程1.2 Babel命令行转码 二、Promise对象三、测试方式四、Vue&#xff08;渐进式JS框架&#xff09;4.1 准备4.2 创建一个项目4.3 运行一个项目 五、模板语法5.1 文本5.2 原始html5.3 属性Attribute5.4 使用JavaScript表达式 六、条件渲…
阅读更多...
领航优配：沪指震荡涨0.47%，保险、券商板块强势，互联金融概念活跃

领航优配：沪指震荡涨0.47%，保险、券商板块强势，互联金融概念活跃

4日早盘&#xff0c;两市股指高开高走&#xff0c;沪指一度涨逾1%打破3300点&#xff0c;随后涨幅有所收窄&#xff1b;两市半日成交超6000亿元&#xff0c;北向资金小幅净流入。 截至午间收盘&#xff0c;沪指涨0.47%报3295.91点&#xff0c;深成指涨0.67%&#xff0c;创业板指…
阅读更多...
基于子口袋的分子生成

基于子口袋的分子生成

生成与靶蛋白具有高结合亲和力的分子&#xff08;也称为基于结构的药物设计&#xff0c;structure-based drug design&#xff09;是药物发现中的一项基本且具有挑战性的任务。最近&#xff0c;深度生成模型在生成以蛋白质口袋为条件的3D分子方面取得了显著成功。然而&#xff…
阅读更多...
tomcat优化

tomcat优化

目录 tomcat tomcat优点 tomcat核心组件 Web容器 其他 功能组件 connector container tomcat处理请求过程 目录文件内容 内存池 堆区 JVM优化 ajp-nio-8009 启动速度优化 配置文件优化 tomcat tomcat是基于Java代码开发的开放源代码的web应用服务器 tomcat就…
阅读更多...
STM32入门——定时器

STM32入门——定时器

内容为江科大STM32标准库学习记录 TIM简介 TIM&#xff08;Timer&#xff09;定时器定时器可以对输入的时钟进行计数&#xff0c;并在计数值达到设定值时触发中断16位计数器、预分频器、自动重装寄存器的时基单元&#xff0c;在72MHz计数时钟下可以实现最大59.65s的定时&…
阅读更多...
c语言——三子棋

c语言——三子棋

基本框架 三个文件: 其中.cpp文件用于游戏具体函数设计&#xff0c;.h文件为游戏的函数声明&#xff0c;test.cpp文件用于测试游戏运行。 需要用到的头文件&#xff1a; #include <stdio.h> #include <stdlib.h>//rand&srand #include <time.h>//时间相…
阅读更多...
ElasticSearch：项目实战（2）

ElasticSearch：项目实战（2）

ElasticSearch: 项目实战 (1) 需求&#xff1a; 新增文章审核通过后同步数据到es索引库 1、文章服务中添加消息发送方法 在service层文章新增成功后&#xff0c;将数据通过kafka消息同步发送到搜索服务 Autowiredprivate KafkaTemplate<String,String> kafkaTemplate;/…
阅读更多...
vi 编辑器入门到高级

vi 编辑器入门到高级

vi 编辑器的初级用法vi 编辑器的工作模式1. 命令模式2. 文本输入模式3. 状态行vi 工作模式切换存储缓冲区 vi 编辑器命令1. 启动 vi2. 文本输入3. 退出 vi4. 命令模式下的 光标移动5. 命令模式下的 文本修改6. 从 命令模式 进入 文本输入模式7. 搜索字符串8. vi 在线帮助文档 v…
阅读更多...
TS协议之PES（ES数据包）

TS协议之PES（ES数据包）

TS协议之PAT&#xff08;节目关联表&#xff09;TS协议之PMT&#xff08;节目映射表&#xff09;TS协议之PES&#xff08;ES数据包&#xff09; 该文档已上传&#xff1a;下载地址 1. 概要 1.1 TS数据包&#xff08;PES&#xff09;协议数据组成 TSTS头PES头ES。TS&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023