极简实现酷炫动效:Flutter隐式动画指南第二篇之一些酷炫的隐式动画效果

目录

前言

1.弹性放大按钮效果

2.旋转和缩放组合动画

3.颜色渐变背景动画

4.缩放进出效果


前言

        在上一篇文章中,我们介绍了Flutter中的隐式动画的一些相关知识,在这篇文章中,我们可以结合多个隐式动画 Widget 在 Flutter 中创建一些酷炫的视觉效果,比如弹性按钮、旋转动画、颜色过渡等。以下示例展示如何组合不同的隐式动画,以实现更复杂的视觉效果。

1.弹性放大按钮效果

        我们可以通过结合隐式动画的Widget组件并且通过设置动画的属性,实现一个弹簧效果。

        效果如下:

        图1.使用AnimatedContainer实现弹簧动画效果

        核心代码如下:

import 'package:flutter/material.dart';class ElasticButtonExample extends StatefulWidget {const ElasticButtonExample({super.key});@overrideState<ElasticButtonExample> createState() => _ElasticButtonExampleState();
}class _ElasticButtonExampleState extends State<ElasticButtonExample> {bool _isTapped = false;void _toggleSize() {setState(() {_isTapped = !_isTapped;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Colors.purple,title: const Text('弹簧动画效果',style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold,fontSize: 16),),),body: Center(child: GestureDetector(onTap: _toggleSize,child: AnimatedContainer(duration: const Duration(milliseconds: 200),curve: Curves.easeOutBack,width: _isTapped ? 120 : 100,height: _isTapped ? 120 : 100,decoration: BoxDecoration(color: Colors.blue,borderRadius: BorderRadius.circular(20),),child: const Center(child: Text('Press Me',style: TextStyle(color: Colors.white),),),),),),);}
}

2.旋转和缩放组合动画

        点击按钮时实现颜色渐变、旋转和缩放组合动画,让 Widget 更加立体和动感。

        在下面的例子中,我们通过结合AnimatedContainer的颜色渐变、旋转和缩放等动画属性实现一个组合的酷炫动画效果。

图2.旋转缩放组合动画效果

3.颜色渐变背景动画

        实现点击屏幕时背景颜色渐变,带来柔和的视觉效果,适合用于内容页面切换时。    

Flutter实现背景渐变动画效果

        核心的代码如下:

class GradientBackgroundExample extends StatefulWidget {@override_GradientBackgroundExampleState createState() =>_GradientBackgroundExampleState();
}class _GradientBackgroundExampleState extends State<GradientBackgroundExample> {bool _isColorChanged = false;void _changeBackground() {setState(() {_isColorChanged = !_isColorChanged;});}@overrideWidget build(BuildContext context) {return Scaffold(body: GestureDetector(onTap: _changeBackground,child: AnimatedContainer(duration: const Duration(seconds: 1),decoration: BoxDecoration(gradient: LinearGradient(colors: _isColorChanged? [Colors.purple, Colors.blue]: [Colors.orange, Colors.red],begin: Alignment.topLeft,end: Alignment.bottomRight,),),child: const Center(child: Text('Tap to Change Background',style: TextStyle(fontSize: 24, color: Colors.white),),),),),);}
}

4.缩放进出效果

        创建一个 Widget 进入和退出时具有缩放动画效果,用于过渡显示内容。

        例如我们要实现下面的效果图,主要的核心代码如下:                

图4.缩放进出动画效果

        主要的核心代码如下:

class ScaleInOutExample extends StatefulWidget {@override_ScaleInOutExampleState createState() => _ScaleInOutExampleState();
}class _ScaleInOutExampleState extends State<ScaleInOutExample> {bool _isVisible = true;void _toggleVisibility() {setState(() {_isVisible = !_isVisible;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('Scale In/Out Example')),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [AnimatedOpacity(duration: const Duration(milliseconds: 500),opacity: _isVisible ? 1.0 : 0.0,child: AnimatedScale(duration: const Duration(milliseconds: 500),scale: _isVisible ? 1.0 : 0.5,child: Container(width: 100,height: 100,color: Colors.blue,child: const Center(child: Text('Hello!',style: TextStyle(color: Colors.white, fontSize: 20),),),),),),const SizedBox(height: 20),ElevatedButton(onPressed: _toggleVisibility,child: const Text('Toggle Visibility'),),],),),);}
}

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

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

相关文章

助力风力发电风机设备智能化巡检,基于YOLOv3全系列【tiny/l/spp】参数模型开发构建无人机巡检场景下风机叶片缺陷问题智能化检测预警模型

在全球能源转型的大潮中&#xff0c;清洁环境能源的发展已成为各国关注的焦点。风力发电作为其中的佼佼者&#xff0c;以其可再生、无污染的特点&#xff0c;受到了广泛的青睐。然而&#xff0c;风力发电设施大多建于人迹罕至的地区&#xff0c;设备庞大且复杂&#xff0c;其维…

穷举vs暴搜vs深搜vs回溯vs剪枝 算法专题

一. 全排列 全排列 class Solution {List<List<Integer>> ret;List<Integer> path;boolean[] check;public List<List<Integer>> permute(int[] nums) {ret new ArrayList<>();//存放结果path new ArrayList<>();存放每个路径的…

【深度学习】实验 — 动手实现 GPT【三】:LLM架构、LayerNorm、GELU激活函数

【深度学习】实验 — 动手实现 GPT【三】&#xff1a;LLM架构、LayerNorm、GELU激活函数 模型定义编码一个大型语言模型&#xff08;LLM&#xff09;架构 使用层归一化对激活值进行归一化LayerNorm代码实现scale和shift 实现带有 GELU 激活的前馈网络测试 模型定义 编码一个大…

进程守护SuperVisord内部的进程定时监测并重启

一个swoole的wensocket程序运行在SuperVisord下端口9503 设置一个每分钟任务监测9503的端口链接数&#xff0c;输出链接数&#xff0c;并在链接数为0的情况下重启wensocket进程。 以下截图是宝塔面板环境下 #!/bin/bash current$(date %H.%M) ws9503_procnumnetstat -nat | gre…

ChatGPT搜索引擎推出Chrome插件

此扩展程序将使 ChatGPT 成为 Chrome 中的默认搜索引擎。点击安装chrome扩展插件。 将 ChatGPT 设置为默认搜索引擎后&#xff0c;您可以直接通过浏览器 URL 栏进行搜索。 ChatGPT 现在可以比以前更好地搜索网络。您可以快速、及时地获得答案&#xff0c;并附上相关网络资源的…

常见生成式模型汇总

生成式模型是一类通过学习数据的分布来生成新的、与原始数据类似样本的模型。以下是一些常见的生成式模型及其应用场景&#xff1a; 1. 生成对抗网络 (GANs) 生成对抗网络&#xff08;Generative Adversarial Networks&#xff09;是一种由生成器和判别器组成的模型&#xff…

深度学习每周学习总结J4(ResDenseNet 算法探索实践 - 鸟类识别)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 目录 一&#xff1a;回顾与总结&#xff1a; 三种神经网络模型对比研究及尝试构成新的网络结构模型卷积计算过程ResNet-50 模型1. 关于残差…

IntelliJ IDEA使用技巧与插件推荐

IntelliJ IDEA是一款功能强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;它提供了丰富的功能和工具&#xff0c;帮助开发者提高编码效率。本文将介绍一些IntelliJ IDEA的使用技巧以及实用的插件推荐。 一、IntelliJ IDEA使用技巧 快捷键操作 IntelliJ IDEA支持大量…

systemctl restart NetworkManager 重启后,文件/etc/resolv.conf修改失败

如果你在重启 NetworkManager 之后发现无法修改 /etc/resolv.conf 文件,这是因为 NetworkManager 会自动管理这个文件 为了解决这个问题,你可以采取以下两种方法之一: 方法一:禁用 NetworkManager 服务 使用以下命令停止 NetworkManager 服务:sudo systemctl stop Netwo…

【天线&空中农业】作物病害检测系统源码&数据集全套:改进yolo11-EfficientFormerV2

改进yolo11-attention等200全套创新点大全&#xff1a;作物病害检测系统源码&#xff06;数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.11.01 注意&#xff1a;由于项目一直在更新迭代&#xff0c;上面“1.图片效果展示”和“2.视频效果展示”展示的系统图片或者…

Linux版更新流程

一.下载更新包 下载地址&#xff1a;https://www.nvisual.com/%e4%b8%8b%e8%bd%bd/ 二.更新包组成 更新包由三部分组成&#xff1a; 前端更新包&#xff1a;压缩的ZIP文件&#xff0c;例如&#xff1a;dist-2.2.26-20231227.zip (2.2.26是版本号 20231227是发布日期)后端更…

c++仿函数--通俗易懂

1.仿函数是什么 仿函数也叫函数对象&#xff0c;是一种可以像函数一样被调用的对象。从编程实现的角度看&#xff0c;它是一个类&#xff0c;不过这个类重载了函数调用运算符() class Add { public:int operator()(int a, int b) {return a b;} }; 注意&#xff1a;使用的时…

《中安证件阅读机:边检执法办案的得力助手》

在边检执法办案的过程中&#xff0c;高效、准确地识别和查验各类证件至关重要。而中安证件阅读机的出现&#xff0c;为边检工作带来了极大的便利&#xff0c;成为了边检执法人员的得力助手。 一、中安证件阅读机的强大功能 中安证件阅读机具备先进的技术和丰富的功能。它能够快…

计算机网络:网络层 —— IP数据报的发送和转发过程

文章目录 IP数据报的发送和转发过程主机发送IP数据报路由器转发IP数据报示例 IP数据报的发送和转发过程 IP 数据报的发送和转发过程包含以下两个过程&#xff1a; 主机发送IP数据报路由器转发IP数据报 直接交付&#xff1a;源主机与目的主机在同一网络中间接交付&#xff1a;…

104. UE5 GAS RPG 实现技能火焰爆炸

这一篇文章我们再实现一个技能火焰爆炸&#xff0c;由于我们之前已经实现了三个玩家技能&#xff0c;这一个技能有一些总结的味道&#xff0c;对于创建技能相同的部分&#xff0c;长话短说&#xff0c;我们过一遍。 准备工作 我们需要一个技能类&#xff0c;继承于伤害技能基…

C#制作学生管理系统

定义学生类 定义一个简单的类来表示学生&#xff0c;包括学号、姓名、性别、年龄、电话、地址。再给其添加一个方法利于后续添加方法查看学生信息。 //定义学生类 public class student {public int ID { get; set; }//开放读写权限public string Name { get; set; }public i…

【C语言】动态内存开辟

写在前面 C语言中有不少开辟空间的办法&#xff0c;但是在堆上开辟的方法也就只有动态内存开辟&#xff0c;其访问特性与数组相似&#xff0c;但最大区别是数组是开辟在栈上&#xff0c;而动态内存开辟是开辟在堆上的。这篇笔记就让不才娓娓道来。 PS:本篇没有目录实在抱歉CSD…

Excel:vba实现插入图片

实现的效果&#xff1a; 实现的代码&#xff1a; Sub InsertImageNamesAndPictures()Dim PicPath As StringDim PicName As StringDim PicFullPath As StringDim RowNum As IntegerDim Pic As ObjectDim Name As String 防止表格里面有脏数据Cells.Clear 遍历工作表中的每个图…

6.FreeRTOS之任务通知

什么是任务通知&#xff1f; FreeRTOS 从版本 V8.2.0 开始提供任务通知这个功能&#xff0c;每个任务都有一个 32 位的通知值。按照 FreeRTOS 官方的说法&#xff0c;使用消息通知比通过二进制信号量方式解除阻塞任务快 45% &#xff0c; 并且更加 省内存&#xff08;无需创…