Flutter 12 实现双击屏幕显示点赞爱心多种动画（AnimationIcon）效果

本文主要是使用Flutter封装一个双击屏幕显示点赞爱心UI效果，并实现了爱心Icon 透明度、缩放、旋转、渐变等动画效果。

实现效果：

实现逻辑：

1、封装FavoriteGesture（爱心手势）实现双击屏幕显示爱心Icon；

2、封装FavoriteAnimationIcon（爱心Icon）实现双击屏幕显示爱心Icon，快速双击时同时显示多个爱心Icon；

3、给FavoriteAnimationIcon增加透明度淡入淡出动画效果；

4、给FavoriteAnimationIcon增加缩放动画效果；

5、给FavoriteAnimationIcon增加旋转动画效果；

7、给FavoriteAnimationIcon增加渐变动画效果；

一、封装FavoriteGesture爱心手势

1）Stack实现多界面堆叠

实现爱心Icon显示在视频界面上层，视频界面由上层child传入，使用Stack实现多界面堆叠；

class FavoriteGesture extends StatefulWidget {static const double defaultSize = 100;final Widget child;final double size;const FavoriteGesture({super.key, this.size = defaultSize, required this.child});@overrideState<FavoriteGesture> createState() => _FavoriteGestureState();
}class _FavoriteGestureState extends State<FavoriteGesture> {@overrideWidget build(BuildContext context) {return Stack(children: [widget.child,Icon(Icons.favorite, size: widget.size, color: Colors.redAccent)],);}
}

2）GestureDetector监听双击事件

使用GestureDetector监听屏幕双击事件和点击的坐标，使用Positioned将Icon显示到点击坐标的位置；当用户双击屏幕时，显示爱心Icon，延迟600毫秒，爱心Icon消失。

class FavoriteGesture extends StatefulWidget {static const double defaultSize = 100;final Widget child;final double size;const FavoriteGesture({super.key, this.size = defaultSize, required this.child});@overrideState<FavoriteGesture> createState() => _FavoriteGestureState();
}class _FavoriteGestureState extends State<FavoriteGesture> {final GlobalKey _key = GlobalKey();bool inFavorite = false;// temp表示最近的一次双击坐标Offset temp = Offset.zero;@overrideWidget build(BuildContext context) {return GestureDetector(key: _key,onDoubleTapDown: (details) {temp = details.globalPosition;},onDoubleTap: () {setState(() {inFavorite = true;});Future.delayed(const Duration(milliseconds: 600), () {setState(() {inFavorite = false;});});},child: Stack(children: [widget.child,if (inFavorite)Positioned(top: temp.dy - widget.size / 2,left: temp.dx - widget.size / 2,child: Icon(Icons.favorite, size: widget.size, color: Colors.redAccent)),],));}
}

3）RenderBox 实现屏幕坐标转换本地坐标

onDoubleTapDown: (details) {temp = details.globalPosition;} 获取到的点击坐标是屏幕的坐标，需要转换成Icon的父布局Stack的坐标，通过RenderBox 来实现屏幕坐标转换本地坐标。

class FavoriteGesture extends StatefulWidget {static const double defaultSize = 100;final Widget child;final double size;const FavoriteGesture({super.key, this.size = defaultSize, required this.child});@overrideState<FavoriteGesture> createState() => _FavoriteGestureState();
}class _FavoriteGestureState extends State<FavoriteGesture> {final GlobalKey _key = GlobalKey();bool inFavorite = false;// temp表示最近的一次双击坐标Offset temp = Offset.zero;Offset _globalToLocal(Offset global) {RenderBox renderBox = _key.currentContext?.findRenderObject() as RenderBox;return renderBox.globalToLocal(global);}@overrideWidget build(BuildContext context) {return GestureDetector(key: _key,onDoubleTapDown: (details) {temp = _globalToLocal(details.globalPosition);},onDoubleTap: () {setState(() {inFavorite = true;});Future.delayed(const Duration(milliseconds: 600), () {setState(() {inFavorite = false;});});},child: Stack(children: [widget.child,if (inFavorite)Positioned(top: temp.dy - widget.size / 2,left: temp.dx - widget.size / 2,child: Icon(Icons.favorite, size: widget.size, color: Colors.redAccent)),],));}
}

实现效果如下：

 

二、封装FavoriteAnimationIcon 爱心Icon

1）封装FavoriteAnimationIcon

封装FavoriteAnimationIcon，将Icon坐标、大小、动效等统一封装起来，并暴露动效结束的回调接口给上层，便于清除过期的爱心Icon。

/*年轻人，只管向前看，不要管自暴自弃者的话*/import 'package:flutter/material.dart';///create by itz on 2024-10-24 14:19
///desc :
class FavoriteAnimationIcon extends StatefulWidget {// 爱心显示位置坐标final Offset position;// 爱心大小final double size;// 动效完成，Icon消失回调final Function? onAnimationComplete;const FavoriteAnimationIcon({super.key, required this.position, required this.size, this.onAnimationComplete});@overrideState<FavoriteAnimationIcon> createState() => _FavoriteAnimationIconState();
}class _FavoriteAnimationIconState extends State<FavoriteAnimationIcon> {@overridevoid initState() {// TODO: implement initStatesuper.initState();Future.delayed(const Duration(milliseconds: 600), () {widget.onAnimationComplete?.call();});}@overrideWidget build(BuildContext context) {var content = Icon(Icons.favorite, size: widget.size, color: Colors.redAccent);return Positioned(top: widget.position.dy - widget.size / 2, left: widget.position.dx - widget.size / 2, child: content);}
}

2）快速双击时，同时显示多个爱心Icon。

使用list记录双击的坐标位置，实现快速双击屏幕时，同时显示多个爱心Icon；多个爱心Icon，使用Stack实现多爱心Icon堆叠效果。

class FavoriteGesture extends StatefulWidget {static const double defaultSize = 100;final Widget child;final double size;const FavoriteGesture({super.key, this.size = defaultSize, required this.child});@overrideState<FavoriteGesture> createState() => _FavoriteGestureState();
}class _FavoriteGestureState extends State<FavoriteGesture> {final GlobalKey _key = GlobalKey();// 保存当前需要展示的iconList<Offset> iconOffsets = [];// temp表示最近的一次双击坐标Offset temp = Offset.zero;Offset _globalToLocal(Offset global) {RenderBox renderBox = _key.currentContext?.findRenderObject() as RenderBox;return renderBox.globalToLocal(global);}@overrideWidget build(BuildContext context) {var iconStack = Stack(children: iconOffsets.map((e) => FavoriteAnimationIcon(position: e,size: widget.size,onAnimationComplete: () {setState(() => iconOffsets.remove(e));},)).toList());return GestureDetector(key: _key,onDoubleTapDown: (details) {temp = _globalToLocal(details.globalPosition);},onDoubleTap: () {// 添加坐标到集合中，触发一次重绘制。根据坐标集合来在不同的坐标上渲染出iconsetState(() => iconOffsets.add(temp));},child: Stack(children: [widget.child,iconStack,],));}
}

实现效果如下：

三、透明度淡入淡出动画效果

1）Animation 动画

本节使用Animation forward 正向播放来实现淡入淡出动画效果。

2）Opacity Widget

在 Flutter 中，Opacity Widget 用于控制其子部件（child widget）的不透明度。通过设置 Opacity Widget 的 opacity 属性为一个介于 0.0（完全透明）和 1.0（完全不透明）之间的值，可以调整子部件的可见度。

3）淡入淡出动画设计

我们将爱心淡入、显示、淡出时间占比分别设计为：淡入10%、显示70%、淡出20%；这个可以自由设置。

以Icon显示但消失时间1S来计算：

淡入10% = 100ms内 实现 opacity 属性从 0.0（完全透明）和 1.0（完全不透明）的值。

显示70% = 700ms内 实现 opacity 属性值 一直等于1（完全不透明）。

淡入20% = 200ms内 实现 opacity 属性从 0.0（完全透明）和 1.0（完全不透明）的值。

class FavoriteAnimationIcon extends StatefulWidget {// 爱心显示位置坐标final Offset position;// 爱心大小final double size;// 动效完成，Icon消失回调final Function? onAnimationComplete;const FavoriteAnimationIcon({super.key, required this.position, required this.size, this.onAnimationComplete});@overrideState<FavoriteAnimationIcon> createState() => _FavoriteAnimationIconState();
}class _FavoriteAnimationIconState extends State<FavoriteAnimationIcon> with TickerProviderStateMixin {// 展示的进度值为0.1static const double appearValue = 0.1;// 消失的进度值为0.8static const double dismissValue = 0.8;static const int _duration = 600;late AnimationController _animationController;@overridevoid initState() {// TODO: implement initStatesuper.initState();_animationController = AnimationController(duration: const Duration(milliseconds: _duration),vsync: this,);// 监听动画进度变化，刷新Icon_animationController.addListener(() {setState(() {});});startAnimation();}@overridevoid dispose() {super.dispose();// 释放动画资源_animationController.dispose();}@overrideWidget build(BuildContext context) {var content = Icon(Icons.favorite, size: widget.size, color: Colors.redAccent);return Positioned(top: widget.position.dy - widget.size / 2,left: widget.position.dx - widget.size / 2,child: Opacity(opacity: opacity, child: content));}// 需要得到的结果是透明度的进度值的百分比double get opacity {if (value < appearValue) {// 处于渐进阶段，播放透明度动画return value / appearValue;}if (value < dismissValue) {// 处于展示阶段，不需要动画return 1;}// 处于渐隐阶段，播放器透明度动画return (1 - value) / (1 - dismissValue);}double get value {return _animationController.value;}Future<void> startAnimation() async {await _animationController.forward();widget.onAnimationComplete?.call();}
}

实现效果如下：

四、缩放动画效果

Transform.scale Widget

在 Flutter 中，Transform.scale Widget 用于按比例缩放其子部件（child widget）。通过设置 Transform.scale 的 scale 属性为一个倍数，可以调整子部件的缩放比例。

Icon缩放时间同上面的 淡入淡出动画设计

class FavoriteAnimationIcon extends StatefulWidget {// 爱心显示位置坐标final Offset position;// 爱心大小final double size;// 动效完成，Icon消失回调final Function? onAnimationComplete;const FavoriteAnimationIcon({super.key, required this.position, required this.size, this.onAnimationComplete});@overrideState<FavoriteAnimationIcon> createState() => _FavoriteAnimationIconState();
}class _FavoriteAnimationIconState extends State<FavoriteAnimationIcon> with TickerProviderStateMixin {// 展示的进度值为0.1static const double appearValue = 0.1;// 消失的进度值为0.8static const double dismissValue = 0.8;static const int _duration = 600;late AnimationController _animationController;@overridevoid initState() {// TODO: implement initStatesuper.initState();_animationController = AnimationController(duration: const Duration(milliseconds: _duration),vsync: this,);// 监听动画进度变化，刷新Icon_animationController.addListener(() {setState(() {});});startAnimation();}@overridevoid dispose() {super.dispose();// 释放动画资源_animationController.dispose();}@overrideWidget build(BuildContext context) {var content = Icon(Icons.favorite, size: widget.size, color: Colors.redAccent);var child = Transform.scale(scale: scale, alignment: Alignment.bottomCenter, child: content);return Positioned(top: widget.position.dy - widget.size / 2,left: widget.position.dx - widget.size / 2,child: Opacity(opacity: opacity, child: child));}// 需要得到的结果是透明度的进度值的百分比double get opacity {if (value < appearValue) {// 处于渐进阶段，播放透明度动画return value / appearValue;}if (value < dismissValue) {// 处于展示阶段，不需要动画return 1;}// 处于渐隐阶段，播放器透明度动画return (1 - value) / (1 - dismissValue);}// 需要计算缩放尺寸的占比double get scale {if (value < appearValue) {// 处于出现阶段（从1.1到1 缩小的过程）return 1 + appearValue - value;}if (value < dismissValue) {// 处于正常展示阶段return 1;}// 处于消失放大阶段return 1 + (value - dismissValue) / (1 - dismissValue);}double get value {return _animationController.value;}Future<void> startAnimation() async {await _animationController.forward();widget.onAnimationComplete?.call();}
}

实现效果如下：

五、旋转动画效果

Transform.rotate Widget

在 Flutter 中，Transform.rotate Widget 用于旋转其子部件（child widget）。通过设置 Transform.rotate 的 angle 属性为一个角度值，可以使子部件绕中心旋转指定的角度。

import 'dart:math';import 'package:flutter/material.dart';///create by itz on 2024-10-24 14:19
///desc :
class FavoriteAnimationIcon extends StatefulWidget {// 爱心显示位置坐标final Offset position;// 爱心大小final double size;// 动效完成，Icon消失回调final Function? onAnimationComplete;const FavoriteAnimationIcon({super.key, required this.position, required this.size, this.onAnimationComplete});@overrideState<FavoriteAnimationIcon> createState() => _FavoriteAnimationIconState();
}class _FavoriteAnimationIconState extends State<FavoriteAnimationIcon> with TickerProviderStateMixin {// 展示的进度值为0.1static const double appearValue = 0.1;// 消失的进度值为0.8static const double dismissValue = 0.8;static const int _duration = 600;late AnimationController _animationController;final double angle = pi / 10 * (2 * Random().nextDouble() - 1);@overridevoid initState() {// TODO: implement initStatesuper.initState();_animationController = AnimationController(duration: const Duration(milliseconds: _duration),vsync: this,);// 监听动画进度变化，刷新Icon_animationController.addListener(() {setState(() {});});startAnimation();}@overridevoid dispose() {super.dispose();// 释放动画资源_animationController.dispose();}@overrideWidget build(BuildContext context) {var content = Icon(Icons.favorite, size: widget.size, color: Colors.redAccent);// 旋转var childRotate = Transform.rotate(angle: angle, child: content);// 缩放var childScale = Transform.scale(scale: scale, alignment: Alignment.bottomCenter, child: childRotate);// 透明度var childOpacity = Opacity(opacity: opacity, child: childScale);return Positioned(top: widget.position.dy - widget.size / 2, left: widget.position.dx - widget.size / 2, child: childOpacity);}// 需要得到的结果是透明度的进度值的百分比double get opacity {if (value < appearValue) {// 处于渐进阶段，播放透明度动画return value / appearValue;}if (value < dismissValue) {// 处于展示阶段，不需要动画return 1;}// 处于渐隐阶段，播放器透明度动画return (1 - value) / (1 - dismissValue);}// 需要计算缩放尺寸的占比double get scale {if (value < appearValue) {// 处于出现阶段（从1.1到1 缩小的过程）return 1 + appearValue - value;}if (value < dismissValue) {// 处于正常展示阶段return 1;}// 处于消失放大阶段return 1 + (value - dismissValue) / (1 - dismissValue);}double get value {return _animationController.value;}Future<void> startAnimation() async {await _animationController.forward();widget.onAnimationComplete?.call();}
}

实现效果如下：

六、渐变动画效果

ShaderMask Widget

在 Flutter 中，ShaderMask Widget 用于将子部件应用一个着色器效果，可以用来创建各种视觉效果，比如颜色遮罩、渐变遮罩等。

class FavoriteAnimationIcon extends StatefulWidget {// 爱心显示位置坐标final Offset position;// 爱心大小final double size;// 动效完成，Icon消失回调final Function? onAnimationComplete;const FavoriteAnimationIcon({super.key, required this.position, required this.size, this.onAnimationComplete});@overrideState<FavoriteAnimationIcon> createState() => _FavoriteAnimationIconState();
}class _FavoriteAnimationIconState extends State<FavoriteAnimationIcon> with TickerProviderStateMixin {// 展示的进度值为0.1static const double appearValue = 0.1;// 消失的进度值为0.8static const double dismissValue = 0.8;static const int _duration = 600;late AnimationController _animationController;final double angle = pi / 10 * (2 * Random().nextDouble() - 1);@overridevoid initState() {// TODO: implement initStatesuper.initState();_animationController = AnimationController(duration: const Duration(milliseconds: _duration),vsync: this,);// 监听动画进度变化，刷新Icon_animationController.addListener(() {setState(() {});});startAnimation();}@overridevoid dispose() {super.dispose();// 释放动画资源_animationController.dispose();}@overrideWidget build(BuildContext context) {var content = Icon(Icons.favorite, size: widget.size, color: Colors.redAccent);// 缩放var childScale = Transform.scale(scale: scale, alignment: Alignment.bottomCenter, child: content);// 旋转var childRotate = Transform.rotate(angle: angle, child: childScale);// 渐变var childShaderMask = ShaderMask(blendMode: BlendMode.srcATop,shaderCallback: (Rect bounds) => RadialGradient(colors: const [Color(0xFFEE6E6E), Color(0xFFF03F3F)],center: Alignment.topLeft.add(const Alignment(0.66, 0.66))).createShader(bounds),child: childRotate);// 透明度var childOpacity = Opacity(opacity: opacity, child: childShaderMask);return Positioned(top: widget.position.dy - widget.size / 2, left: widget.position.dx - widget.size / 2, child: childOpacity);}// 需要得到的结果是透明度的进度值的百分比double get opacity {if (value < appearValue) {// 处于渐进阶段，播放透明度动画return value / appearValue;}if (value < dismissValue) {// 处于展示阶段，不需要动画return 1;}// 处于渐隐阶段，播放器透明度动画return (1 - value) / (1 - dismissValue);}// 需要计算缩放尺寸的占比double get scale {if (value < appearValue) {// 处于出现阶段（从1.1到1 缩小的过程）return 1 + appearValue - value;}if (value < dismissValue) {// 处于正常展示阶段return 1;}// 处于消失放大阶段return 1 + (value - dismissValue) / (1 - dismissValue);}double get value {return _animationController.value;}Future<void> startAnimation() async {await _animationController.forward();widget.onAnimationComplete?.call();}
}

实现效果如下： 

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

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

相关文章

文件摆渡系统选型指南：如何找到最适合您的数据安全解决方案？

文件摆渡系统选型指南：如何找到最适合您的数据安全解决方案？

在当今数字化时代&#xff0c;数据的安全传输与共享已成为企业运营中不可或缺的一环。文件摆渡系统&#xff0c;作为实现数据在不同安全域之间高效、安全传输的重要工具&#xff0c;其选型直接关系到企业数据的安全性与业务效率。本文将为您详细介绍如何挑选最适合您企业的文件…
阅读更多...
视频网站系统的设计与实现(论文+源码)_kaic

视频网站系统的设计与实现(论文+源码)_kaic

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;视频网站系统 摘 要 使用旧方法对视频信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在视频信息的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#…
阅读更多...
为什么k8s不支持docker-kubernetes

为什么k8s不支持docker-kubernetes

为什么Kubernetes不再支持Docker&#xff1f; 在Kubernetes 1.20版本之后&#xff0c;Kubernetes宣布逐步停止对Docker作为容器运行时的支持。这一改变在容器管理领域引起了广泛关注。许多人不禁疑惑&#xff1a;Kubernetes与Docker一向密切合作&#xff0c;为何会做出这样的决…
阅读更多...
骨传导耳机哪个品牌好？2024年五大热门精选骨传导耳机推荐

骨传导耳机哪个品牌好？2024年五大热门精选骨传导耳机推荐

在当今快节奏的生活中&#xff0c;人们对于个人音频设备的需求不仅限于优质的音质体验&#xff0c;还越来越注重健康与舒适。骨传导耳机作为一种新兴的技术产品&#xff0c;以其独特的听觉传递方式——通过颞骨而非耳道传递声音——赢得了众多用户的青睐。这种技术不仅可以提供…
阅读更多...
Webserver(1)Linux开发环境搭建

Webserver(1)Linux开发环境搭建

目录 配置软件虚拟机中安装ubuntu安装ubuntu18的操作系统 安装VM tools安装XshellVscode远程连接到虚拟机 配置软件 VMwareVScodeg安装ubuntu 18.04.iso 或者镜像版本 XShellXFTP 虚拟机中安装ubuntu 安装ubuntu18的操作系统 开启虚拟机 选择中文简体 安装VM tools 打开v…
阅读更多...
炸了！改进Transformer！Transformer-BiGRU多变量回归预测（Matlab）

炸了！改进Transformer！Transformer-BiGRU多变量回归预测（Matlab）

炸了&#xff01;改进Transformer&#xff01;Transformer-BiGRU多变量回归预测&#xff08;Matlab&#xff09; 目录 炸了&#xff01;改进Transformer&#xff01;Transformer-BiGRU多变量回归预测&#xff08;Matlab&#xff09;分类效果基本介绍程序设计参考资料 分类效果 …
阅读更多...
python离线安装依赖

python离线安装依赖

以pymsql依赖为例操作如下: Python Package Index&#xff08;PyPI&#xff09;的官方网址是&#xff1a; PyPI The Python Package Index 在这个网站上&#xff0c;你可以搜索、浏览和下载Python包。 tar -xvzf pymysql2-1.3.3.tar.gz cd pymysql2-1.3.3 python setup.p…
阅读更多...
基于SSM机场网上订票系统的设计

基于SSM机场网上订票系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;机票信息管理&#xff0c;订单信息管理&#xff0c;机场广告管理&#xff0c;系统管理 前台账号功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;机票信息&#xf…
阅读更多...
CRMEB标准版Mysql修改sql_mode

CRMEB标准版Mysql修改sql_mode

数据库配置 1.宝塔控制面板-软件商店-MySql-设置 2.点击配置修改&#xff0c;查找sql-mode或sql_mode &#xff08;可使用CtrlF快捷查找&#xff09; 3.复制 NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION 然后替换粘贴&#xff0c;保存 注&#xff1a;MySQL8.0版本的 第三步用…
阅读更多...
CRM在企业协同中发挥了哪些作用？

CRM在企业协同中发挥了哪些作用？

在当今快速变化的商业环境中&#xff0c;企业竞争力的核心已逐渐从单一的产品或服务优势&#xff0c;转向以客户为中心的综合能力构建。客户关系管理&#xff08;CRM&#xff09;系统作为这一转型的关键驱动力&#xff0c;正以前所未有的力度打破企业内部部门间的传统壁垒&…
阅读更多...
MusePose模型部署指南

MusePose模型部署指南

一、模型介绍 MusePose是一个基于扩散和姿势引导的虚拟人视频生成框架。 主要贡献可以概括如下&#xff1a; 发布的模型能够根据给定的姿势序列&#xff0c;生成参考图中人物的舞蹈视频&#xff0c;生成的结果质量超越了同一主题中几乎所有当前开源的模型。发布该 pose alig…
阅读更多...
Python CGI编程-get、post-复选框、单选框、文本框、下拉列表

Python CGI编程-get、post-复选框、单选框、文本框、下拉列表

GET方法&#xff1a;将网址中的两个参数读取出来显示到浏览器中 url示例&#xff1a;表单示例&#xff1a;服务器脚本hello.py文件是放在/Library/WebServer/CGI-Executables&#xff0c;hello.py同样也需要通过chmod修改权限到755. 放在/Library/WebServer/Documents中的是get…
阅读更多...
免费开源AI助手，颠覆你的数字生活体验

免费开源AI助手，颠覆你的数字生活体验

Apt Full作为一款开源且完全免费的软件&#xff0c;除了强大的自然语言处理能力&#xff0c;Apt Full还能够对图像和视频进行一系列复杂的AI增强处理&#xff0c;只需简单几步即可实现专业级的效果。 在图像处理方面&#xff0c;Apt Full提供了一套全面的AI工具&#xff0c;包…
阅读更多...
关于写查询接口的一些理解

关于写查询接口的一些理解

上篇文章我们讲了查看设备详细信息的接口。这篇文章我们来讲讲一般的查询接口怎么写。我们就以最简单的查询为例子&#xff0c;来讲讲怎么写查询接口。 这是写IT设备查询接口的要求&#xff1a; 首先要知道的是&#xff0c;你写任何接口都是针对某张表来进行操作的。就像这个接…
阅读更多...
HCIP--1

HCIP--1

同一区域内的OSPF路由器拥有一致的 LSDB, 在区域内&#xff0c;OSPF 采用 SPF算法计算路由一个区域太多路由器&#xff0c;硬件资源跟不上&#xff0c;所以多划分区域 OSPF 路由计算原理 1. 区域内路由计算 LSA 在OSPF中&#xff0c;每个路由器生成 LSA&#xff0c;用于告诉…
阅读更多...
Bytebase 3.0.0 - AI 助手全面升级

Bytebase 3.0.0 - AI 助手全面升级

&#x1f680; 新功能 SQL 编辑器里的 AI 助手&#xff1a;支持将自然语言转换成 SQL 语句&#xff0c;解释 SQL 代码&#xff0c;还能帮助发现潜在问题。 支持 SQL Server DML 语句一键回滚。支持 MariaDB 的在线大表变更。新的 SQL 审核规则&#xff1a; 要求为 MySQL 设置 …
阅读更多...
我谈Sobel算子与高斯一阶微分的关系

我谈Sobel算子与高斯一阶微分的关系

现在算力提升了&#xff0c;最常用的一阶差分边缘检测算子已经不是Sobel算子了&#xff0c;而是高斯一阶微分。 高斯一阶微分 顾名思义&#xff0c;高斯函数的一阶导数。 Derivative of Gaussian 1D 一维直接扩展到二维。 禹晶、肖创柏、廖庆敏《数字图像处理&#xff08;面…
阅读更多...
vue-router3基本使用

vue-router3基本使用

vuex基本使用 vue2 对应的 vuex、vue-router 都为3. 项目创建与框架安装如下 vue create hellorouter3 npm install vue-router3 npm i vuex3 npm install npm run serve 处理新建About组件报错 根路径下创建.eslintrc.js文件&#xff0c;其内容如下&#xff1a; module.ex…
阅读更多...
程序员：数字时代的先锋

程序员：数字时代的先锋

随着科技的不断进步&#xff0c;程序员这一职业群体逐渐成为社会中不可或缺的一部分。他们以智慧和汗水为世界带来更多的便捷与创新。今天&#xff0c;我们将庆祝1024程序员节&#xff0c;这是一个向全球程序员们表达敬意和感激的节日。让我们一同走进程序员的内心世界&#xf…
阅读更多...
Unity 实现音频（mp3）可控制进度条

Unity 实现音频（mp3）可控制进度条

目录 前言 一、拼UI 二、上代码 前言 效果如图&#xff1a;&#xff08;因为是GIF格式&#xff0c;录不上音频&#xff09; 一、拼UI 1.新建空物体添加AudioSource&#xff0c;给AudioSource添加音频文件&#xff0c;取消勾选PlayOnAwake&#xff0c;勾选上Loop 2.创建Slid…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023