极简实现酷炫动效: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});

  @override
  State<ElasticButtonExample> createState() => _ElasticButtonExampleState();
}

class _ElasticButtonExampleState extends State<ElasticButtonExample> {
  bool _isTapped = false;

  void _toggleSize() {
    setState(() {
      _isTapped = !_isTapped;
    });
  }

  @override
  Widget 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;
    });
  }

  @override
  Widget 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;
    });
  }

  @override
  Widget 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'),
            ),
          ],
        ),
      ),
    );
  }
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

后端:Spring-1

文章目录 1. 了解 spring(Spring Framework)2. 基于maven搭建Spring框架2.1 纯xml配置方式来实现Spring2.2 注解方式来实现Spring3. Java Config类来实现Spring 2.4 总结 1. 了解 spring(Spring Framework) 传统方式构建spring(指的是Spring Framework)项目&#xff0c;导入依…

qt QStackedLayout详解

QStackedLayout类提供了一种布局方式&#xff0c;使得在同一时间内只有一个子部件&#xff08;或称为页面&#xff09;是可见的。这些子部件被维护在一个堆栈中&#xff0c;用户可以通过切换来显示不同的子部件&#xff0c;适合用在需要动态显示不同界面的场景&#xff0c;如向…

C++进阶:C++11的新特性

✨✨所属专栏&#xff1a;C✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ C11的发展历史 2011年&#xff0c;C标准委员会发布了C11标准&#xff0c;这是C的一次巨大飞跃&#xff0c;引入了许多重要的新特性&#xff0c;如智能指针、lambda表达式、并发编程支持等。这一版本的发布对C社…

GA/T1400视图库平台EasyCVR视频分析设备平台微信H5小程序:智能视频监控的新篇章

GA/T1400视图库平台EasyCVR是一款综合性的视频管理工具&#xff0c;它兼容Windows、Linux&#xff08;包括CentOS和Ubuntu&#xff09;以及国产操作系统。这个平台不仅能够接入多种协议&#xff0c;还能将不同格式的视频数据统一转换为标准化的视频流&#xff0c;通过无需插件的…

OpenAI推出搜索GPT,进军搜索引擎领域

OpenAI 推出了一项新功能——Search GPT&#xff0c;为 ChatGPT 引入实时网络搜索功能&#xff0c;使其站上与 Google 和 Bing 等搜索巨头竞争的舞台。 OpenAI 产品的重大变化&#xff0c;Search GPT 承诺提供快捷、实时的答案&#xff0c;并附上可靠来源的链接。 ChatGPT 一直…

Unity XR Interaction Toolkit 开发教程(3)快速配置交互:移动、抓取、UI交互【3.0以上版本】

获取完整课程以及答疑&#xff0c;工程文件下载&#xff1a; https://www.spatialxr.tech/ 视频试看链接&#xff1a; 3.快速配置交互&#xff1a;移动、抓取、UI交互【Unity XR Interaction Toolkit 跨平台开发教程】&#xff08;3.0以上版本&#xff09; 系列教程专栏&…

SE-Net模型实现猴痘病识别

项目源码获取方式见文章末尾&#xff01; 600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【DeepLabV3模型实现人体部位分割CIHP数据】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.…

深度学习之权重、偏差

1 权重偏差初始化 1.1 全都初始化为 0 偏差初始化陷阱&#xff1a; 都初始化为 0。 产生陷阱原因&#xff1a;因为并不知道在训练神经网络中每一个权重最后的值&#xff0c;但是如果进行了恰当的数据归一化后&#xff0c;我们可以有理由认为有一半的权重是正的&#xff0c;另…

企业物流管理数据仓库建设的全面指南

文章目录 一、物流管理目标二、总体要求三、数据分层和数据构成&#xff08;1&#xff09;数据分层&#xff08;2&#xff09;数据构成 四、数据存储五、数据建模和数据模型&#xff08;1&#xff09;数据建模&#xff08;2&#xff09;数据模型 六、总结 在企业物流管理中&…

Spring Boot 与 EasyExcel 携手:复杂 Excel 表格高效导入导出实战

数据的并行导出与压缩下载&#xff1a;EasyExcel&#xff1a;实现大规模数据的并行导出与压缩下载 构建高效排队导出&#xff1a;解决多人同时导出Excel导致的服务器崩溃 SpringBoot集成EasyExcel 3.x&#xff1a; 前言 在企业级应用开发中&#xff0c;常常需要处理复杂的 …

【网络篇】计算机网络——链路层详述(笔记)

目录 一、链路层 1. 概述 2. 链路层提供的服务 &#xff08;1&#xff09;成帧&#xff08;framing&#xff09; &#xff08;2&#xff09;链路接入 &#xff08;3&#xff09;可靠交付 &#xff08;4&#xff09;差错检测和纠正 3. 链路层的实现 二、多路访问链路和…

Android——显式/隐式Intent

概述 在Android中&#xff0c;Intent是各个组件之间信息通信的桥梁&#xff0c;它用于Android各组件的通信。 Intent 的组成部分 一、显式 Intent 第一种方式 Intent intent new Intent(this, ActFinishActivity.class);startActivity(intent);第二种方式 Intent intent …

__init__.py __all__和 __name__的作用及其用法

__ init__.py 的作用及其用法&#xff1a; 包下的__init__.py 所在目录是一个模块包,本身也是一个模块,可用于定义模糊导入时要导入的内容。当我们导入一个包的时候&#xff0c;包下的__init__.py中的代码会自动执行&#xff0c;因此在某些大的项目被使用频率较高的模块&#x…

曹操出行借助 ApsaraMQ for Kafka Serverless 提升效率,成本节省超 20%

本文整理于 2024 年云栖大会主题演讲《云消息队列 ApsaraMQ Serverless 演进》&#xff0c;杭州优行科技有限公司消息中间件负责人王智洋分享 ApsaraMQ for Kafka Serverless 助力曹操出行实现成本优化和效率提升的实践经验。 曹操出行&#xff1a;科技驱动共享出行未来 曹操…

《探索 HarmonyOS NEXT(5.0):开启构建模块化项目架构奇幻之旅 —— Tabs底部导航栏》

简介 通过学习HarmonyOS Next&#xff0c;实战项目WanAndroid 鸿蒙版&#xff0c;API接口均来自WanAndroid 开源接口&#xff0c;我们一起来做个App吧。 玩Android 开放API&#xff1a;https://www.wanandroid.com/blog/show/2 效果图 创建每个模块下的各个目录 1、feature…

LinkedList 分析

LinkedList 简介 LinkedList 是一个基于双向链表实现的集合类&#xff0c;经常被拿来和 ArrayList 做比较。关于 LinkedList 和ArrayList的详细对比&#xff0c;我们 Java 集合常见面试题总结(上)有详细介绍到。 双向链表 不过&#xff0c;我们在项目中一般是不会使用到 Link…

MybatisPlus入门(六)MybatisPlus-null值处理

一、MybatisPlus-null值处理 1.1&#xff09;问题引入&#xff1a; 在查询中遇到如下情况&#xff0c;有部分筛选条件没有值&#xff0c;如商品价格有最大值和最小值&#xff0c;商品价格部分时候没有值。 1.2&#xff09;解决办法&#xff1a; 步骤一&#xff1a;新建查询实…

基于树莓派的安保巡逻机器人--(一、快速人脸录入与精准人脸识别)

目录 零、前言 一、人脸检测 二、人脸识别 1、采集人脸 2、训练人脸识别模型 3、人脸识别应用 零、前言 随着智能安防需求的增长&#xff0c;基于人工智能和物联网的安保系统逐渐成为趋势。树莓派因其低成本、高扩展性等特点&#xff0c;成为很多AI项目的理想平台。本文将为大…

网络编程项目之UDP聊天室

项目要求 利用UDP协议&#xff0c;实现一套聊天室软件。服务器端记录客户端的地址&#xff0c;客户端发送消息后&#xff0c;服务器群发给各个客户端软件。 问题思考 客户端会不会知道其它客户端地址&#xff1f; UDP客户端不会直接互连&#xff0c;所以不会获知其它客户端地址…

Java-String类

字符串这个词我想同学们并不陌生&#xff0c;但Java语言中的字符串和我们之前所学习的C语言字符串&#xff0c;差别可谓是非常之大&#xff0c;因为在C语言当中&#xff0c;想要表示一个字符串&#xff0c;就只能使用字符数组或字符指针&#xff0c;但是这种" 对数据进行细…