讲解 CSS 过渡和动画 — transition/animation (很全面)

news2024/11/22 23:48:34

前言

由于用户越来越注重 Web应用 的使用体验，随之而来的是 Web应用 需要提供了更加完善的 Web 动画 效果来实现以平滑的状态贯穿于用户的整个使用过程中。现在，这已经是司空见惯了，用户潜意识是希望可以获得更快的反馈响应和更友好的用户界面。

什么是 Web 动画

  • 屏幕刷新率 设备显示器每秒绘制新图像的次数，其单位为赫兹 (Hz)。目前大多数设备为 60Hz。
  • 卡顿 每个帧的预算时间仅比 16毫秒 多一点（1秒/ 60 = 16.6毫秒）。如果浏览器无法在这一帧内完成工作，则帧率将下降，可能导致跳帧，内容会在屏幕上抖动。此现象通常称为卡顿。
  • 跳帧 假如浏览器动画分别在 16ms, 32ms, 48ms时分别切帧。等到了 32ms，浏览器其他任务还未完成，没有执行动画切帧。等到恢复动画切帧时，浏览器到了 48ms 的动画切帧。浏览器直接从16ms 处的画面 跳转到 48ms 处的画面，则发生了跳帧。

在了解了上述几个概念后，我们再看 Web 动画本质是元素的外观样式或布局位置随着浏览器的逐帧绘制，以平滑的状态完成变化 。

简述 JS / CSS 动画

目前浏览器实现动画的方式有如下两种，本篇将主要讲解第二种 CSS 动画。

  • JS 动画

    • setTimeout / setInterval / requestAnimationFrame
      我们最常用的是 setTimeout 和 setInterval 这两个API。但是这两个 API 设定的时间会因为浏览器当前工作负载而有所偏差，而且无法与浏览器的绘制帧保持同步。所以才有了 与浏览器的绘制帧同步 的原生 API requestAnimationFrame，以取代 setTimeout 和 setInterval 实现动画。
    • Animation API
      浏览器动画引擎 API，通过 JavaScript 操作。这些 API 被设计成 CSS Transition 和 CSS Animation 的接口，所以可以很容易通过 JS 的方式实现 CSS 动画，它是对动画化的支持最有效的方式之一。

  • CSS 动画 (本篇主题)

    • CSS Transition
      CSS 过渡，属于补间动画，即设置关键帧的初始状态，然后在另一个关键帧改变这个状态，比如大小、颜色、透明度等，浏览器将自动根据二者之间帧的值创建的动画。
    • CSS Animation
      CSS 动画，可以理解是 CSS Transition 的加强版，它既可以实现 补间动画 的动画效果，也可以使其以 逐帧动画 的方式进行绘制。

学习 CSS 过渡 - transition

就如之前所说，它属于 补间动画，需要提供起始和结束两个关键帧，浏览器才能够完成样式差异比对并计算出对应的过渡动画。所以它有两个特点：

  1. 由于首次渲染元素的样式只会有一个关键帧，浏览器无法进行样式差异比对，所以在首屏渲染时 transition 一般不会生效
  2. 由于浏览器是根据样式差异化的两帧自动计算并过渡，所以 transition 只支持可识别中间值的属性 (如大小、颜色、位置、透明度等)，而如 display 属性则不支持。

语法定义

CSS 过渡通常使用简写属性 transition 来定义，这是最好的方式。既可以避免属性值列表长度不一，也节省了在 CSS 代码上调试的时间。当然也可以用下面子属性来定义过渡的各部分：

  • transition-property： 指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其他属性仍如通常那样瞬间变化。

  • transition-duration： 指定过渡的时长。你可以为所有属性指定一个值，或者指定多个值，或者为每个属性指定不同的时长。

  • transition-timing-function： 指定一个缓动函数，定义属性值怎么变化。常见的缓动函数是一个三次贝塞尔曲线 ( cubic-bezier(<x1>, <y1>, <x2>, <y2>) )。当然也可以选择关键字

    • linear：cubic-bezier(0.0, 0.0, 1.0, 1.0)
    • ease：cubic-bezier(0.25, 0.1, 0.25, 1.0)
    • ease-in：cubic-bezier(0.42, 0.0, 1.0, 1.0)
    • ease-out：cubic-bezier(0.0, 0.0, 0.58, 1.0)
    • ease-in-out：cubic-bezier(0.42, 0.0, 0.58, 1.0)

    在这里插入图片描述

  • transition-delay： 指定延迟，即属性开始变化时与过渡开始发生时之间的时长。

  /* 单条 简写形式 */
  transition: 
    <property> <duration> <timing-function> <delay>;
  
  
  /* 多条 简写形式 */
  transition: 
    <property> <duration> <timing-function> <delay>,
    <property> <duration> <timing-function> <delay>,
    ...;


  /* 单条 子属性形式 */
  transition-property: <property-name>;
  transition-duration: <duration-time>;
  transition-timing-function: <timing-function>;
  transition-delay: <duration-time>;
  
  
  /* 多条 子属性形式 */
  transition-property: <property-name> [, <property-name>, ...];
  transition-duration: <duration-time> [, <duration-time>, ...];
  transition-timing-function: [, <cubic-bezier>, ...];
  transition-delay: [, <duration-time>, ...];

语法范例

  • 简写形式书声明过渡样式
  div {
    opacity: 1;
  }
  
  div:hover {
    opacity: 0.5;
    transition: opacity, 3s;
  }
  • 如果任意属性值列表的长度比其他属性值列表要短，则其中的值会重复使用以便匹配
  div:hover {
    transition-property: opacity, left, top, height;
    transition-duration: 3s, 5s;
  }
  
  /* 等同于下面样式声明 */
  
  div:hover {
    transition-property: opacity, left, top, height;
    transition-duration: 3s, 5s, 3s, 5s;
  }
  • 如果某个属性的值列表长于 transition-property 的属性，则将被截短
  div:hover { 
    transition-property: opacity, left;
    transition-duration: 3s, 5s, 2s, 1s; 
  }
  
  /* 等同于下面样式声明 */
  
  div:hover {
    transition-property: opacity, left;
    transition-duration: 3s, 5s; 
  }

JS 相关事件监听

你可以监听 CSS 过渡的开始和结束

  • transitionrun： CSS 过渡动画触发 (在任何延迟之前)
  • transitionstart： CSS 过渡动画触发 (在任何延迟之后)
  • transitionend： CSS 过渡动画结束

事件监听回调函数会接收一个 TransitionEvent 对象，除了具有一般的 Event 对象外，还有两个额外属性：

  1. propertyName 一个字符串，表示过渡完成的 CSS 属性的名称。
  2. elapsedTime 一个浮点数，表示在事件发生时，过渡已经运行了多少秒。

学习 CSS 动画 - animation

CSS Animation 才算是真正意义上的 CSS3 动画，它具备了对 关键帧和循环次数 的自定义能力。与 CSS Transition 相比较，有如下 CSS 过渡 所不具备的特性：

  1. CSS Animation 在实现像 CSS Transition 补间动画 效果时，还可以在起始帧和结束帧之间自定义中间帧，使得动画更加平滑过渡的同时，对动画有了更好的控制和自定义能力。
  2. CSS Animation 通过 animation-timing-function: steps() 属性实现了 CSS Transition 无法具备的 逐帧动画 效果
  3. CSS Animation 只要定义了结束帧 (即 @keyframes 中的 to)，在首屏渲染时，它默认会以指定元素在动画开始时刻的样式作为起始关键帧，并结合 to 定义的结束关键帧和指定元素的 animation 其他参数来完成补间动画的计算和动画帧的绘制。

语法定义

创建 CSS 动画序列，需要使用 animation 属性或 其子属性 animation-*，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes 规则实现。

- @keyframe

使用关键帧，先创建一个带名称的 @keyframes 规则，以便后续使用 animation-name 属性将动画同其关键帧声明进行匹配。每个规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。

css
复制代码
  @keyframes slidein {
    from {
      transform: translateX(0%);
    }

    to {
      transform: translateX(100%);
    }
  }

  /* 等效于下面 @keyframes 规则的定义 */

  @keyframes slidein {
    0% {
      transform: translateX(0%);
    }

    100% {
      transform: translateX(100%);
    }
  }

注意事项：

  1. 如果多个关键帧使用同一个名称，以最后一次定义的为准 (不存在层叠样式情况下)
  2. 同一关键帧中的相同属性被重复定义，则以最后一次定义的属性为准。
- animation-*

CSS 动画通常使用 animation 属性来定义，它是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 等一系列属性的简写形式。

  • animation-name：指定一个或多个 @keyframes 的名称，描述了要应用于元素的动画。多个 @keyframes 以逗号分隔的名称列表的形式指定。

  • animation-duration：设置动画完成一个动画周期所需的时间，需要指定单位，如 1s、500ms。

  • animation-delay：指定执行动画之前的等待时间。动画可以稍后开始、立即从开头开始、立即在动画中途播放 (如 -1s) 。其中 -1s 意思是动画立即从 1s 处开始。

  • animation-iteration-count：设置动画序列在停止前应播放的次数，有效值 0、正整数、正小数、无限循环 infinite。

  • animation-direction：设置动画是正向播放 normal、反向播放 reverse、正向交替播放 alternate、反向交替播放 alternate-reverse。

  • animation-play-state：设置动画是运行还是暂停，有效值 running、paused。

  • animation-fill-mode：设置 CSS 动画在执行之前和之后如何将样式应用于其目标，有效值如下：

    • none：当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值

    • both：动画将遵循 forwards 和 backwards 的规则，从而在两个方向上扩展动画属性

    • forwards：目标将保留由执行期间遇到的最后一个关键帧计算值。最后关键帧取决于 animation-direction 和 animation-iteration-count：

      animation-directionanimation-iteration-countlast keyframe
      normaleven or odd100%
      reverseeven or odd0%
      alternateeven0%
      alternateodd100%
      alternate-reverseeven100%
      alternate-reverseodd0%

    • backwards：动画将在应用于目标时立即应用第一个关键帧中定义的值，并在 delay 期间保留此值。第一个关键帧取决于 animation-direction 值：

      animation-directionfirst keyframe
      normal or alternate0%
      reverse or alternate-reverse100%

  • animation-timing-function：设置动画在每个周期的持续时间内如何进行，主要是如下两种函数：

    • cubic-bezier 三次贝塞尔曲线 ( cubic-bezier(<x1>, <y1>, <x2>, <y2>) )，以实现 补间动画 效果。

      1. linear：cubic-bezier(0.0, 0.0, 1.0, 1.0)
      2. ease：cubic-bezier(0.25, 0.1, 0.25, 1.0)
      3. ease-in：cubic-bezier(0.42, 0.0, 1.0, 1.0)
      4. ease-out：cubic-bezier(0.0, 0.0, 0.58, 1.0)
      5. ease-in-out：cubic-bezier(0.42, 0.0, 0.58, 1.0)

    • steps 是一个分段的阶跃函数，，以实现 逐帧动画。n 相当于单次动画的帧数，每帧动画的时间是均等的 (steps(n, <jumpterm>))，其中 jumpterm 含义如下：

      1. jump-start：在起始位置阶跃，n=2 ⇒ 50% 100%; (100 / 2)
      2. jump-end：在结束位置阶跃, n=4 ⇒ 0% 25% 50% 75%; (100 / 4)
      3. jump-none：起止位置均无跳跃，n=5 ⇒ 0% 25% 50% 75% 100%; (100 / 4)
      4. jump-both：起止位置均有跳跃 n=3 ⇒ 25% 50% 75%; (100 / 4)
      5. start：等同 jump-start
      6. end：等同 jump-end
      7. step-start：等同 steps(1, jump-start)
      8. step-end：等同 steps(1, jump-end)

      steps 函数动画示意图如下（输入为时间进度，输出为动画进度）

      在这里插入图片描述

      在这里插入图片描述

  /* animation 声明样式顺序 */ 
  /* animation-duration */
  /* animation-easing-function */
  /* animation-delay */ 
  /* animation-iteration-count */
  /* animation-direction */
  /* animation-fill-mode */
  /* animation-play-state */
  /* animation-name */
  animation: 3s ease-in 1s 2 reverse both paused slidein; 

  
  /* animation - duration | easing-function | delay | name */
  animation: 3s linear 1s slidein;
  
  
  /* more animations - duration | easing-function | delay | name */
  animation: 3s linear slidein, 3s ease-out 5s slideout;

 
  /* animation-name */
  animation-name: none;
  animation-name: animate1;
  animation-name: animate1, animate2;
  
  
  /* animation-timing-function */
  animation-timing-function: ease;
  animation-timing-function: step-start;
  animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
  animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);
  
  
  /* ...... */

语法范例

  • 简写形式书声明动画样式
  p {
    animation: 3s infinite alternate slidein;
  }
  
  @keyframes slidein {
    0% {
      margin-left: 100%;
      width: 300%;
    }
    100% {
      margin-left: 0%;
      width: 100%;
    }
  }
  • 非简写形式书声明动画样式
  p {
    animation-duration: 3s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  
  @keyframes slidein {
    0% {
      margin-left: 100%;
      width: 300%;
    }
    100% {
      margin-left: 0%;
      width: 100%;
    }
  }

实验性新属性

  • animation-range：设置动画附件范围沿其时间轴的开始和结束。
  • animation-timeline：指定用于控制 CSS 动画进度的时间轴。
  • animation-composition：指定当多个动画同时影响同一属性时要使用的复合操作。

JS 相关事件监听

你可以监听 CSS 动画的开始和结束

  • animationstart
    事件会在 CSS 动画开始时触发。如果有 animation-delay 延时，事件会在延迟时效过后立即触发。为负数的延时时长会致使事件被触发时事件的 elapsedTime 属性值等于该时长的绝对值
  • animationiteration
    当 CSS 动画的迭代结束，另一个迭代开始时，将触发动画迭代事件。此事件不会与 animationend 事件同时发生
  • animationend
    动画结束事件在 CSS 动画完成时触发。如果在动画完成前中止了动画，例如将元素从 DOM 中移除，或将动画从元素上移除，该事件不会触发。
  • animationcancel
    这个事件在 CSS Animation 属性意外中断时派发出来 (换句话说，任何时候 animation 停止运行不会发出一个 animationend 事件)

事件监听回调函数会接收一个 AnimationEvent 对象，除了具有一般的 Event 对象外，还有额外属性：

  1. animationName 一个字符串，表示过渡完成的 CSS 动画的名称。
  2. pseudoElement 一个字符串，如果动画作用于伪元素上，则该属性为伪元素名称
  3. elapsedTime 一个浮点数，表示在事件发生时，过渡已经运行了多少秒。

完整项目附件：点此下载

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

2023年全球新能源云母材料市场发展展望分析：储能云母市场规模快速增长[图]

2023年全球新能源云母材料市场发展展望分析：储能云母市场规模快速增长[图]

云母作为电气设备的基础材料&#xff0c;下游应用领域涉及高温冶炼、电力等传统行业&#xff0c;并在近几年逐步扩展到新能源汽车、电化学储能等新兴行业。2022年&#xff0c;全球云母材料市场规模保持稳定增长至180.0亿元&#xff0c;期间年复合增长率约为13.2%。预计未来&…
阅读更多...
React TreeSelect设置默认展开项的方法

React TreeSelect设置默认展开项的方法

需要实现TreeSelect组件的onTreeExpand、treeExpandedKeys方法。 代码样例如下&#xff1a; 1.TreeSelect标签部分 render() {const {codeselect} this.props;const {treeExpandedKeys} this.state ................<TreeSelectshowSearch{false}dropdownStyle{{ maxHei…
阅读更多...
day06_面向对象基础

day06_面向对象基础

今日内容 1 复习 2 面向对象编程介绍 3 面向对象 类,属性,方法 ,创建对象,使用对象内存关系 一、复习 周一: jdk,配置环境变量,idea,HelloWorld 变量,基本数据类型 周二: 运算符,if,if-else 周三: if-elseif-elseif-else,循环(while,dowhile,for) 周四: 方法设计(参数,返回值),…
阅读更多...
vue3学习（六）--- 插槽slot

vue3学习（六）--- 插槽slot

文章目录 匿名插槽具名插槽作用域插槽渲染作用域 动态插槽 插槽就是&#xff1a;子组件中的提供给父组件使用的一个占位符&#xff0c;用<slot></slot> 表示&#xff0c;父组件可以在这个占位符中填充任何模板代码&#xff0c;如 HTML、组件等&#xff0c;填充的内…
阅读更多...
C++项目实战——基于多设计模式下的同步异步日志系统-⑫-日志宏全局接口设计（代理模式）

C++项目实战——基于多设计模式下的同步异步日志系统-⑫-日志宏全局接口设计（代理模式）

文章目录 专栏导读日志宏&全局接口设计全局接口测试项目目录结构整理示例代码拓展示例代码 专栏导读 &#x1f338;作者简介&#xff1a;花想云 &#xff0c;在读本科生一枚&#xff0c;C/C领域新星创作者&#xff0c;新星计划导师&#xff0c;阿里云专家博主&#xff0c;C…
阅读更多...
安全典型配置（三）使用ACL禁止特定用户上网案例

安全典型配置（三）使用ACL禁止特定用户上网案例

【微|信|公|众|号&#xff1a;厦门微思网络】 安全典型配置&#xff08;一&#xff09;使用ACL限制FTP访问权限案例_厦门微思网络的博客-CSDN博客本例中配置的本地用户登录密码方式为irreversible-cipher&#xff0c;表示对用户密码采用不可逆算法进行加密&#xff0c;非法用…
阅读更多...
VulnHub lazysysadmin

VulnHub lazysysadmin

一、信息收集 1.nmap扫描开发端口 开放了&#xff1a;22、80、445 访问80端口&#xff0c;没有发现什么有价值的信息 2.扫描共享文件 enum4linux--扫描共享文件 使用&#xff1a; enum4linux 192.168.103.182windows访问共享文件 \\192.168.103.182\文件夹名称信息收集&…
阅读更多...
YOLO目标检测——抽烟吸烟数据集【含对应voc、coco和yolo三种格式标签】

YOLO目标检测——抽烟吸烟数据集【含对应voc、coco和yolo三种格式标签】

实际项目应用&#xff1a;公共场所监管、健康风险评估、戒烟干预数据集说明&#xff1a;YOLO目标检测数据集&#xff0c;真实场景的高质量图片数据&#xff0c;数据场景丰富。使用lableimg标注软件标注&#xff0c;标注框质量高&#xff0c;含voc(xml)、coco(json)和yolo(txt)三…
阅读更多...
mask-R-CNN

mask-R-CNN

前言 代码 论文 # Mask-rcnn 算法在 torch vision 中有直接实现&#xff0c;可以直接引用使用在自己的工作中。 import torchvision model torchvision.models.detection.maskrcnn_resnet50_fpn(weightsMaskRCNN_ResNet50_FPN_Weights.DEFAULT)Mask R-CNN&#xff08;Mask R…
阅读更多...
uni-app实现拍照功能

uni-app实现拍照功能

直接些这样的组件代码 <template><view><button click"takePhoto">拍照</button><image :src"photoUrl" v-if"photoUrl" mode"aspectFit"></image></view> </template><script&g…
阅读更多...
Web(3)网络扫描与window，Linux命令

Web(3)网络扫描与window，Linux命令

NMAP各种选项的使用 三种情况修改IP地址总结&#xff1a; 1.为漏洞环境配ip地址 注&#xff1a;1.打开metasploitable后&#xff0c;用mafadmin/msfadmin登录后&#xff0c;重新设置密码&#xff0c;su root登录; 为此创建一个ip地址&#xff0c;命令&#xff1a;ifconfig et…
阅读更多...
centos 7.9离线安装wget

centos 7.9离线安装wget

1.下载安装包 登录到wget官网上下载最新的wget的rpm安装包到本地 http://mirrors.163.com/centos/7/os/x86_64/Packages/ 2.上传安装包到服务器 3.安装 rpm -ivh wget-1.14-18.el7_6.1.x86_64.rpm 4.查看版本 wget -V
阅读更多...
智能测径仪数据采集系统 棒材产线智能化提升方向必备

智能测径仪数据采集系统 棒材产线智能化提升方向必备

棒材企业通过学习先进技术和进行技术交流&#xff0c;形成了建设智能化生产线的共识&#xff0c;然而棒材生产线目前存在数据采集效率低、物料跟踪难、质量管控弱、成品质量差、库区混乱、成本居高等问题。通过增加钢坯表面检测、钢坯无头焊接、控轧控冷、自动测径、高速冷床、…
阅读更多...
C++DAY46

C++DAY46

myWidget::myWidget(QWidget *parent): QWidget(parent) {this->resize(1280,720);this->setWindowTitle("300英雄");this->setWindowIcon(QIcon("D:/BaiduNetdiskDownload/孤独摇滚图标/1.png"));this->setStyleSheet("background-color…
阅读更多...
AI电销机器人好不好用关键是什么？

AI电销机器人好不好用关键是什么？

影响AI电销机器人是否好用的两个因素分别是&#xff0c;识别系统以及线路。 有很多电销企业都想找一个好用的AI电销机器人&#xff0c;可是什么样的机器人才是好用的机器人呢?有哪些因素会影响AI电销机器人好不好用呢? 添加图片注释&#xff0c;不超过 140 字&#xff08;可选…
阅读更多...
内存访问与栈

内存访问与栈

内存访问与栈 1 内存分段2 DS和[address]3 mov、add、sub指令形式4 栈4.1 入栈与出栈4.2 SS与SP4.3 空栈4.4 栈顶超界4.5 push、pop指令 5 小结 本文属于《 X86指令基础系列教程》之一&#xff0c;欢迎查看其它文章。 1 内存分段 在x86程序执行时&#xff0c;内存会被分段&am…
阅读更多...
微信小程序的框架

微信小程序的框架

目录 一、视图层 1. WXML 数据绑定 列表渲染 条件渲染 模板 2. WXSS 尺寸单位 样式导入 内联样式 选择器 3. WXS事件 二、逻辑层 1. 页面生命周期 2.跳转 1. 一级跳一级 2. 一级跳二级 3. 二级跳二级 4. 二级跳一级 总结 带给我们的收获 一、视图层 1. …
阅读更多...
竞赛 深度学习YOLOv5车辆颜色识别检测 - python opencv

竞赛 深度学习YOLOv5车辆颜色识别检测 - python opencv

文章目录 1 前言2 实现效果3 CNN卷积神经网络4 Yolov56 数据集处理及模型训练5 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习YOLOv5车辆颜色识别检测 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0…
阅读更多...
微信小程序使用阿里巴巴iconfont,报错Failed to load font http://at.alicdn.com/t/..........

微信小程序使用阿里巴巴iconfont,报错Failed to load font http://at.alicdn.com/t/..........

介绍 上篇文章&#xff0c;介绍了&#xff0c;在微信小程序里导入并使用阿里巴巴iconfont图标&#xff1b;但是在页面里使用后&#xff0c;可以看到后台日志有打印错误信息&#xff0c;具体报错如下&#xff1a; 分析 报这个错&#xff0c;是因为项目里使用了 iconfont字体…
阅读更多...
OpenCV15-图像边缘检测：Sobel、Scharr、Laplace、Canny

OpenCV15-图像边缘检测：Sobel、Scharr、Laplace、Canny

OpenCV15-图像边缘检测&#xff1a;Sobel、Scharr、Laplace、Canny 1.边缘检测原理2.Sobel算子3.Scharr算子4.生成边缘检测滤波器5.Laplacian算子6.Canny算法 1.边缘检测原理 图像的边缘指的是图像中像素灰度值突然发生变化的区域&#xff0c;如果将图像中的每一行像素和每一列…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023