极简实现酷炫动效: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.rhkb.cn/news/465608.html

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

相关文章

数字马力二面面试总结

24.03.07数字马力二面面试总结 前段时间找工作,做的一些面试笔记总结 大家有面试录音或者记录的也可以发给我,我来整理答案呀 数字马力二面面试总结 24.03.07数字马力二面面试总结你可以挑一个你的最有挑战性的,有难度的,最具有复杂性的项目,可以简单说一下。有没有和算…

C语言例题练手(1)

前几篇博客的内容已经涉及了C语言的部分语法知识&#xff0c;我们可以尝试做一些编程题&#xff0c;或者换一种说法就是可以写出什么样的程序以此来解决一些问题。 题目来自牛客网https://www.nowcoder.com和C语言菜鸟教程C 语言教程 | 菜鸟教程 数值计算 【例1】带余除法计…

大模型LLama3!!!Ollama下载、部署和应用(保姆级详细教程)

首先呢&#xff0c;大家在网站先下载ollama软件 这就和anaconda和python是一样的 废话不多说 直接上链接&#xff1a;Download Ollama on Windows 三个系统都支持 注意&#xff1a; 这里的Models&#xff0c;就是在上面&#xff0c;大家点开之后&#xff0c;里面有很多模型…

【359】基于springboot的智慧草莓基地管理系统

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本智慧草莓基地管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据…

MongoDB笔记03-MongoDB索引

文章目录 一、前言1.1 概述1.2 MongoDB索引使用B-Tree还是BTree&#xff1f;1.3 B 树和 B 树的对比1.4 总结 二、索引的类型2.1 单字段索引2.2 复合索引2.3 其他索引 三、索引的管理操作3.1 索引的查看3.2 索引的创建3.2.1 单字段索引3.2.2 复合索引 3.3 索引的移除3.3.1 指定索…

string模拟实现流插入(输出)+流提取(输入)

个人主页&#xff1a;Jason_from_China-CSDN博客 所属栏目&#xff1a;C系统性学习_Jason_from_China的博客-CSDN博客 所属栏目&#xff1a;C知识点的补充_Jason_from_China的博客-CSDN博客 string模拟实现clear 模拟实现clear的目的是在流提取的时候我们清空之前的数据&#x…

C++入门基础知识134—【关于C 库函数 - gmtime()】

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///C爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于C 库函数 - gmtime()的相关内容&#xf…

ERP学习笔记-预处理eeglab

第一步&#xff1a;数据格式转化 import data&#xff1a;读取收集到的原始数据文件.vhdr格式 读取后的样子&#xff1a; 将数据保存为.set文件 第二步&#xff1a;通道定位 读取.set文件 Channel locations部分为unknown&#xff0c;表明通道的坐标未知 增加默认的设置 Chan…

查缺补漏----用户上网过程(HTTP,DNS与ARP)

&#xff08;1&#xff09;HTTP 来自湖科大计算机网络微课堂&#xff1a; ① HTTP/1.0采用非持续连接方式。在该方式下&#xff0c;每次浏览器要请求一个文件都要与服务器建立TCP连接当收到响应后就立即关闭连接。 每请求一个文档就要有两倍的RTT的开销。若一个网页上有很多引…

谷歌推出全新AI生成游戏玩法 —— 无限生成角色生活模拟游戏“Unbounded”

随着人工智能技术的飞速发展,游戏行业正迎来前所未有的创新。近日,谷歌宣布了一款名为“Unbounded”的新型游戏,这是一款基于生成式AI技术的角色生命模拟游戏,它将为玩家带来前所未有的开放性和互动性体验。 项目概览 项目名称:Unbounded类型:生成式无限游戏(Generati…

论文阅读:DynamicDet: A Unified Dynamic Architecture for Object Detection

论文地址&#xff1a;[2304.05552] DynamicDet: A Unified Dynamic Architecture for Object Detection 代码地址&#xff1a;GitHub - VDIGPKU/DynamicDet: [CVPR 2023] DynamicDet: A Unified Dynamic Architecture for Object Detection 概要 本文提出了一种名为 DynamicD…

关于在GitLab的CI/CD中用docker buildx本地化多架构打包dotnet应用的问题

关于在GitLab的CI/CD中用docker buildx本地化多架构打包dotnet应用的问题 这是一个DevOps综合性问题docker buildx多架构打包.NET应用的问题用QEMU模拟多架构环境打包 这是一个DevOps综合性问题 网络上的方案都是细分的领域&#xff0c;未见一个集成了GitLabdockerdotnet的多架…

翻译工具开发技术笔记:《老挝语翻译通》app支持语音识别翻译功能,怎么提高语音识别的准确度呢?

《老挝语翻译通》app是一款专为老挝语翻译设计的免费工具&#xff0c;支持文本翻译、老挝文OCR文字识别提取、文字转语音。这款工具以其技术优势和用户友好的界面&#xff0c;为用户提供了便捷的老挝语翻译体验。 技术特点 文本翻译&#xff1a;支持双语输入&#xff0c;提供精…

qt QListView详解

1、概述 QListView 是 Qt 框架中的一个视图类&#xff0c;用于展示模型中的数据。它基于 QAbstractItemView&#xff0c;支持多种视图模式&#xff0c;如列表视图&#xff08;List View&#xff09;、图标视图&#xff08;Icon View&#xff09;等。QListView 是模型/视图框架…

初识C++(上) -- C++的关键字、命名空间、缺省参数以及函数的重载

目录 一、C的关键字&#xff08;C98&#xff09; 二、命名空间 1、命名冲突 2、命名空间 2.1 命名空间的定义 (1). 命名空间定义的例子以及命名空间的嵌套&#xff1a; (2). 同一个工程中允许存在多个相同名称的命名空间,编译器最后会合成同一个命名空间中&#xff1a; 2…

MySQL_客户端工具建库.

前言&#xff1a; 通过前面的学习我们已经了解到什么是数据库&#xff0c;以及数据库是如何安装的&#xff0c;相信大家都已将数据库安装好了&#xff0c;让我们接下来开始新的学习吧&#xff01;&#xff01;&#xff01; 1.MySQL客户端工具 1. MySQL Workbench MySQL :: D…

突破1200°C高温性能极限!北京科技大学用机器学习合成24种耐火高熵合金,室温延展性极佳

在工程应用中&#xff0c;如燃气轮机、核反应堆和航空推进系统&#xff0c;对具备优异高温机械性能的金属合金需求十分旺盛。由于材料熔点的固有限制&#xff0c;传统镍基 (Ni) 高温合金的耐温能力已接近极限。为满足开发高温结构材料的需求&#xff0c;耐火高熵合金 (RHEAs) 于…

leetcode21:合并两个有序列表

将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4]示例 2&#xff1a; 输入&#xff1a;l1 [], l2 [] 输出&#xff1a;[]示…

开源模型应用落地-glm模型小试-glm-4-9b-chat-vLLM集成(四)

一、前言 GLM-4是智谱AI团队于2024年1月16日发布的基座大模型&#xff0c;旨在自动理解和规划用户的复杂指令&#xff0c;并能调用网页浏览器。其功能包括数据分析、图表创建、PPT生成等&#xff0c;支持128K的上下文窗口&#xff0c;使其在长文本处理和精度召回方面表现优异&a…

K8S篇(基本介绍)

目录 一、什么是Kubernetes&#xff1f; 二、Kubernetes管理员认证&#xff08;CKA&#xff09; 1. 简介 2. 考试难易程度 3. 考试时长 4. 多少分及格 5. 考试费用 三、Kubernetes整体架构 Master Nodes 四、Kubernetes架构及和核心组件 五、Kubernetes各个组件及功…