Flutter-实现头像叠加动画效果

实现头像叠加动画效果

在这篇文章中,我们将介绍如何使用 Flutter 实现一个带有透明度渐变效果和过渡动画的头像叠加列表。通过这种效果,可以在图片切换时实现平滑的动画,使 UI 更加生动和吸引人。

需求

我们的目标是实现一个头像叠加列表,在每隔 2 秒时切换头像,并且在切换过程中,前一个头像逐渐消失,新进入的头像逐渐显示,同时有一个从右向左的移动过渡效果。

具体需求包括:

  1. 支持头像圆形显示。
  2. 支持设置头像重叠比例。
  3. 支持配置间隔时间切换一次头像。
  4. 切换时,前一个头像透明度渐变消失,后一个头像透明度渐变显示。
  5. 切换时,有平滑的移动动画。

效果

在这里插入图片描述

实现思路

为了实现这个效果,我们将使用 Flutter 的 AnimatedBuilderAnimationControllerTween 来实现过渡动画和透明度渐变效果。主要步骤包括:

  1. 创建一个 CircularImageList 组件,用于显示头像列表。
  2. 使用 AnimationController 控制动画的执行。
  3. 使用 AnimatedBuilderOpacity 实现透明度渐变效果。
  4. 使用 PositionedAnimatedBuilder 实现位置移动过渡效果。
  5. 每隔 2 秒触发一次动画,并更新显示的头像列表。

实现代码

下面是实现上述需求的完整代码:

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';class CircularImageList extends StatefulWidget {final List<String> imageUrls;final int maxDisplayCount;final double overlapRatio;final double height;final Duration animDuration;final Duration delayedDuration;const CircularImageList({super.key,required this.imageUrls,required this.maxDisplayCount,required this.overlapRatio,required this.height,this.animDuration = const Duration(milliseconds: 500),this.delayedDuration = const Duration(seconds: 1),});CircularImageListState createState() => CircularImageListState();
}class CircularImageListState extends State<CircularImageList>with SingleTickerProviderStateMixin {int _currentIndex = 0;List<String> _currentImages = [];late AnimationController _animationController;late Animation<double> _animation;int get maxDisplayCount {return widget.maxDisplayCount + 1;}double get circularImageWidth {var realCount = maxDisplayCount - 1;return realCount * widget.height -widget.height * (1 - widget.overlapRatio) * (realCount - 1);}void initState() {super.initState();_currentImages = widget.imageUrls.take(maxDisplayCount).toList();_animationController = AnimationController(duration: widget.animDuration,vsync: this,);_animation = Tween<double>(begin: 0, end: 1).animate(_animationController)..addStatusListener((status) {if (status == AnimationStatus.completed) {setState(() {_currentIndex = (_currentIndex + 1) % widget.imageUrls.length;_currentImages.removeAt(0);_currentImages.add(widget.imageUrls[_currentIndex]);});_animationController.reset();Future.delayed(widget.delayedDuration, () {_animationController.forward();});}});Future.delayed(widget.delayedDuration, () {_animationController.forward();});}void dispose() {_animationController.dispose();super.dispose();}Widget build(BuildContext context) {return Container(clipBehavior: Clip.none,width: circularImageWidth,height: widget.height,child: Stack(clipBehavior: Clip.none,children: _buildImageStack(),),);}double _opacity(int index) {if (index == 0) {return 1 - _animation.value;} else if (index == _currentImages.length - 1) {return _animation.value;} else {return 1;}}List<Widget> _buildImageStack() {List<Widget> stackChildren = [];for (int i = 0; i < _currentImages.length; i++) {double leftOffset = i * (widget.height * widget.overlapRatio);stackChildren.add(AnimatedBuilder(animation: _animation,builder: (context, child) {return Positioned(left: leftOffset -(_animation.value * widget.height * widget.overlapRatio),child: Opacity(opacity: _opacity(i),child: child!,),);},child: ClipOval(key: ValueKey<String>(_currentImages[i]),child: CachedNetworkImage(imageUrl: _currentImages[i],width: widget.height,height: widget.height,fit: BoxFit.cover,),),),);}return stackChildren;}
}

结束语

通过上述代码,我们实现了一个带有透明度渐变效果和过渡动画的头像叠加列表。在实际开发中,可以根据需求对动画的时长、重叠比例等进行调整,以达到最佳效果。希望这篇文章对您有所帮助,如果有任何问题或建议,详情见:github.com/yixiaolunhui/flutter_xy

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

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

相关文章

hadoop常见简单基础面试题

文章目录 hadoop简单基础面试题1. 请说下 HDFS 读写流程2. HDFS 在读取文件的时候&#xff0c;如果其中一个块突然损坏了怎么办3. HDFS 在上传文件的时候&#xff0c;如果其中一个 DataNode 突然挂掉了怎么办4. NameNode 在启动的时候会做哪些操作5.Secondary NameNode 了解吗&…

【完全复现】基于改进粒子群算法的微电网多目标优化调度(含matlab代码)

目录 主要内容 部分代码 结果一览 下载链接 主要内容 程序完全复现文献模型《基于改进粒子群算法的微电网多目标优化调度》&#xff0c;以微电网系统运行成本和环境保护成本为目标函数&#xff0c;建立了并网方式下的微网多目标优化调度模型&#xff0c;通过改进…

小山菌_代码随想录算法训练营第三十天|122.买卖股票的最佳时机II、55. 跳跃游戏 、45.跳跃游戏II、1005.K次取反后最大化的数组和

122.买卖股票的最佳时机II 文档讲解&#xff1a;代码随想录.买卖股票的最佳时机II 视频讲解&#xff1a;贪心算法也能解决股票问题&#xff01;LeetCode&#xff1a;122.买卖股票最佳时机II 状态&#xff1a;已完成 代码实现 class Solution { public:int maxProfit(vector<…

游戏大厂“脱钩”安卓商店: 独立渠道TapTap们能否渔利

一纸公告将游戏厂商与渠道的博弈再度摆上了台面。 近日&#xff0c;腾讯控股旗下手游《地下城与勇士&#xff1a;起源》&#xff08;下称“DNF手游”&#xff09;运营团队发布公告称&#xff0c;自6月20日起&#xff0c;DNF手游将不再上架部分安卓平台的头部应用商店。 下架的…

idea添加文档注释

一、easy javadoc插件 在settings的plugins中下载easy javadoc插件。 安装完成后重启idea&#xff0c;再次打开settings界面。会出现easyDoc相关配置。 二、设置模版以及使用 类描述模版参考设置&#xff1a; /** * 类描述 -> * * Author: ywz * Date: $Date$ */ 方法描述…

C++继承与多态—多重继承的那些坑该怎么填

课程总目录 文章目录 一、虚基类和虚继承二、菱形继承的问题 一、虚基类和虚继承 虚基类&#xff1a;被虚继承的类&#xff0c;就称为虚基类 virtual作用&#xff1a; virtual修饰成员方法是虚函数可以修饰继承方式&#xff0c;是虚继承&#xff0c;被虚继承的类就称为虚基类…

知网期刊《新课程导学》投稿要求及收稿方向

知网期刊《新课程导学》投稿要求及收稿方向 知网期刊《新课程导学》作为一份专注于教育领域的学术期刊&#xff0c;一直以来都致力于为广大学术研究者提供一个高质量、高水平的学术交流平台。为了保证期刊的学术质量&#xff0c;编辑部对投稿要求和收稿方向有着严格的规定。 首…

Makefile 编写

通用格式内容 命令列表中的每条命令必须以 TAB 键开始&#xff0c;不能使用空格&#xff01; 基本书写&#xff1a; main: main.o input.o calcu.o gcc -o main main.o input.o calcu.omain.o: main.cgcc -c main.cinput.o: input.cgcc -c input.ccalcu.o: calcu.cgcc -c ca…

【实战分享】雷池社区版助力构建高可用、安全的Web应用架构

引言 在日益复杂的网络环境中&#xff0c;构建坚不可摧的安全防线成为每一位网站守护者的重要使命。本文将深入剖析一套集CDN加速、高效Nginx代理与雷池WAF深度防护于一体的现代网站安全架构设计&#xff0c;特别强调雷池WAF在此架构中的核心作用及其对整体安全性的提升策略。…

分享记录在使用ubuntu部署项目(api接口项目)的步骤+自己踩过的坑(亲身经历,坑挺多的)

安装虚拟机VMware Workstation Player/Pro 优点&#xff1a; 高性能&#xff1a;VMware的虚拟机通常具有更好的性能和稳定性。 丰富的功能&#xff1a;特别是Pro版本&#xff0c;支持快照、多级别快照、克隆虚拟机等高级功能。 商业支持&#xff1a;有商业支持选项&#xff0c;…

C#实现高斯模糊(图像处理)

在C#中实现高斯模糊&#xff0c;可以使用System.Drawing库。高斯模糊是一种基于高斯函数的滤波器&#xff0c;它可以有效地平滑图像。以下是详细的步骤&#xff0c;包括生成高斯核并应用到图像上的代码示例。 1. 生成高斯核 首先&#xff0c;我们需要编写一个方法来生成高斯核…

bert文本分类微调笔记

Bert实现文本分类微调Demo import random from collections import namedtuple 有四种文本需要做分类&#xff0c;请使用bert处理这个分类问题 # 使用namedtuple定义一个类别(Category)&#xff0c;包含两个字段&#xff1a;名称(name)和样例(samples) Category namedtuple(Ca…

Java 和 Kotlin 单例模式写法对比

目录 1、饿汉模式 Java 写法&#xff1a; Kotlin 写法&#xff1a; Kotlin 这段代码反编译&简化后如下&#xff1a; 2、懒汉模式&#xff0c;静态同步方法 Java 写法&#xff1a; Kotlin 写法&#xff1a; Kotlin 这段代码反编译&简化后如下&#xff1a; 3、懒…

Node.js 渲染三维模型并导出为图片

Node.js 渲染三维模型并导出为图片 1. 前言 本文将介绍如何在 Node.js 中使用 Three.js 进行 3D 模型渲染。通过结合 gl 和 canvas 这两个主要依赖库&#xff0c;我们能够在服务器端实现高效的 3D 渲染。这个方法解决了在服务器端生成和处理 3D 图形的需求&#xff0c;使得可…

【mysql】常用操作:维护用户/开启远程/忘记密码/常用命令

一、维护用户 1.1 创建用户 -- 语法 > CREATE USER [username][host] IDENTIFIED BY [password];-- 例子&#xff1a; -- 添加用户user007&#xff0c;密码123456&#xff0c;并且只能在本地可以登录 > CREATE USER user007localhost IDENTIFIED BY 123456; -- 添加用户…

一文搞懂Linux信号【下】

目录 &#x1f6a9;引言 &#x1f6a9;阻塞信号 &#x1f6a9;信号保存 &#x1f6a9;信号捕捉 &#x1f6a9;操作信号集 1.信号集操作函数 2.其它操作函数 &#x1f6a9;总结&#xff1a; &#x1f6a9;引言 在观看本博客之前&#xff0c;建议大家先看一文搞懂Linux信…

Mysql 分表存储、多段存储

分表存储 分表存储是一种常用的数据库优化技术&#xff0c;特别是当单一表中的数据量非常大时。分表可以帮助提高查询性能、简化数据管理&#xff0c;并优化备份过程。以下是分表存储的一些常见策略和步骤&#xff1a; 1. 选择分表策略 分表可以基于多种策略&#xff0c;常见…

大火《与凤行》演员片酬曝光!网友:难以置信......

近日&#xff0c;大火的《与凤行》演员片酬被网友曝光&#xff1a;女主赵丽颖2000万&#xff0c;男主林更新1200万&#xff0c;而最让人意外的则是辣目洋子&#xff0c;个人片酬高达800万&#xff0c;但是其在剧中戏份比较低&#xff0c;不少网友感叹&#xff1a;难以置信&…

Star、Star求Star

本章是介绍博主自己的一个小工具的。使用的PythonPyQt5开发的。顺带来求一波star&#x1f31f;&#x1f31f;&#xff01;&#xff01;&#xff01; 地址&#xff1a;https://gitee.com/qinganan_admin/PyCom Pycom是博主开发的串口工具&#xff0c;要是说对比其他串口工具&…

IOS Swift 从入门到精通: 可选项、展开和类型转换

文章目录 处理缺失数据展开可选值用保护装置解开强制展开隐式解包可选值零合并可选链式调用可选尝试可失败的初始化器类型转换总结 处理缺失数据 我们已经使用诸如 之类的类型Int来保存像 5 这样的值。但是如果您想存储age用户的属性&#xff0c;如果您不知道某人的年龄&#…