第十二篇【传奇开心果系列】Ant Design Mobile of React开发移动应用：内置组件实现酷炫CSS 动画

Ant Design Mobile of React 开发移动应用示例博文系列

第一篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:从helloworld开始
第二篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:天气应用
第三篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:健身追踪
第四篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：数据存储的七种类型讲解和示例
第五篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：基础页面制作介绍和示例代码
第六篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：UI框架39个组件集中讲解和示例代码
第七篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：安装配置node和npm避坑攻略
第八篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：打包上架部署云服务托管等后期工作
第九篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：使用内置组件实现响应式设计
第十篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：涉相关基础知识介绍和示例
第十一篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:移动商城应用
第十二篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:内置组件实现酷炫CSS 动画

传奇开心果博文系列

    • Ant Design Mobile of React 开发移动应用示例博文系列
  • 博文目录
    • 一、前言
    • 二、CSS动画介绍
    • 三、淡入淡出动画开发中应用示例代码
    • 四、滑动动画开发中应用示例代码
    • 五、缩放动画开发中应用示例代码
    • 六、渐变色动画开发中应用示例代码
    • 七、旋转动画开发中应用示例代码
    • 八、弹跳动画开发中应用示例代码
    • 九、归纳总结知识点

博文目录

一、前言

CSS 动画：Ant Design Mobile of React 提供了一些内置组件实现的酷炫的CSS动画效果，如淡入淡出、滑动等。了解 CSS 动画的基本原理和使用方式可以帮助开发者在开发中添加自定义的动画效果，提升用户体验。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、CSS动画介绍

Ant Design Mobile of React 提供了一些内置组件实现的酷炫的CSS动画效果，可以用于创建各种动态和交互式的用户界面。

1.淡入淡出（Fade）动画

可以通过设置组件的 transitionName 属性来实现。例如，你可以将一个组件的 transitionName 设置为 'fade'，然后在 CSS 样式中定义 fade-enter、fade-enter-active、fade-exit 和 fade-exit-active 类名，分别表示进入和离开动画的不同状态。

2.滑动（Slide）动画

可以通过设置组件的 transitionName 属性来实现。你可以将一个组件的 transitionName 设置为 'slide'，然后在 CSS 样式中定义 slide-enter、slide-enter-active、slide-exit 和 slide-exit-active 类名，分别表示进入和离开动画的不同状态。

3.缩放（Scale）动画

可以通过设置组件的 transitionName 属性来实现缩放效果。你可以将一个组件的 transitionName 设置为 'scale'，然后在 CSS 样式中定义 scale-enter、scale-enter-active、scale-exit 和 scale-exit-active 类名，分别表示进入和离开动画的不同状态。

4.渐变色（Gradient）动画

可以通过设置组件的 transitionName 属性来实现渐变色效果。你可以将一个组件的 transitionName 设置为 'gradient'，然后在 CSS 样式中定义 gradient-enter、gradient-enter-active、gradient-exit 和 gradient-exit-active 类名，分别表示进入和离开动画的不同状态。

5.旋转（Rotate）动画

可以通过设置组件的 transitionName 属性来实现旋转效果。你可以将一个组件的 transitionName 设置为 'rotate'，然后在 CSS 样式中定义 rotate-enter、rotate-enter-active、rotate-exit 和 rotate-exit-active 类名，分别表示进入和离开动画的不同状态。

6.弹跳（Bounce）动画

可以通过设置组件的 transitionName 属性来实现弹跳效果。你可以将一个组件的 transitionName 设置为 'bounce'，然后在 CSS 样式中定义 bounce-enter、bounce-enter-active、bounce-exit 和 bounce-exit-active 类名，分别表示进入和离开动画的不同状态。
这些动画效果可以根据你的需求进行定制和扩展。你可以在 Ant Design Mobile of React 的官方文档中找到更多关于这些动画效果的详细信息和示例代码。

三、淡入淡出动画开发中应用示例代码

在这里插入图片描述当使用 Ant Design Mobile of React 开发移动应用时，你需要先引入相应的 CSS 样式文件或库，以确保动画效果能够正常工作。通常情况下，你可以在项目的入口文件（如 index.js）中引入这些样式。
以下是一个使用淡入淡出效果的示例代码：
首先，你需要安装 @am-design/css 库，它包含了 Ant Design Mobile 的 CSS 样式文件。你可以使用 npm 或 yarn 进行安装：

npm install @am-design/css

或

yarn add @am-design/css

然后，在你的入口文件中，引入 Ant Design Mobile 的 CSS 样式文件：

import '@am-design/css/dist/am-design.css';

接下来，你可以在你的组件中使用淡入淡出效果。例如，你可以创建一个名为 FadeExample 的组件：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';const FadeExample = () => {const [show, setShow] = useState(false);const handleToggle = () => {setShow(!show);};return (<div><button onClick={handleToggle}>Toggle</button><CSSTransitionin={show}timeout={300}classNames="fade"unmountOnExit><div className="fade-content">Content</div></CSSTransition></div>);
};export default FadeExample;

在上面的代码中，我们使用了 react-transition-group 库中的 CSSTransition 组件来实现淡入淡出效果。通过设置 in 属性来控制组件的显示和隐藏，timeout 属性定义了动画的持续时间，classNames 属性指定了动画效果的类名前缀。
接着，在 CSS 样式文件中定义淡入淡出效果的类名：

.fade-enter {opacity: 0;
}.fade-enter-active {opacity: 1;transition: opacity 300ms;
}.fade-exit {opacity: 1;
}.fade-exit-active {opacity: 0;transition: opacity 300ms;
}

以上代码中，fade-enter 和 fade-exit 类名定义了进入和离开动画的初始状态，而 fade-enter-active 和 fade-exit-active 类名定义了进入和离开动画的活动状态。
最后，你可以在你的应用中使用 FadeExample 组件来展示淡入淡出效果：

import React from 'react';
import FadeExample from './FadeExample';const App = () => {return (<div><h1>Ant Design Mobile of React</h1><FadeExample /></div>);
};export default App;

通过以上代码，你就可以在你的移动应用中使用淡入淡出效果了。当点击 “Toggle” 按钮时，FadeExample 组件的内容将以淡入淡出的方式显示或隐藏。

四、滑动动画开发中应用示例代码

在这里插入图片描述当使用 Ant Design Mobile of React 开发移动应用时，你可以使用滑动（Slide）动画效果。以下是一个使用滑动动画的示例代码：

首先，你需要安装 @am-design/css 库，它包含了 Ant Design Mobile 的 CSS 样式文件。你可以使用 npm 或 yarn 进行安装。

然后，在你的入口文件中，引入 Ant Design Mobile 的 CSS 样式文件：

import '@am-design/css/dist/am-design.css';

接下来，你可以在你的组件中使用滑动动画。例如，你可以创建一个名为 SlideExample 的组件：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';const SlideExample = () => {const [show, setShow] = useState(false);const handleToggle = () => {setShow(!show);};return (<div><button onClick={handleToggle}>Toggle</button><CSSTransitionin={show}timeout={300}classNames="slide"unmountOnExit><div className="slide-content">Content</div></CSSTransition></div>);
};export default SlideExample;

在上面的代码中，我们使用了 react-transition-group 库中的 CSSTransition 组件来实现滑动动画。通过设置 in 属性来控制组件的显示和隐藏，timeout 属性定义了动画的持续时间，classNames 属性指定了动画效果的类名前缀。

接着，在 CSS 样式文件中定义滑动动画的类名：

.slide-enter {transform: translateX(-100%);
}.slide-enter-active {transform: translateX(0);transition: transform 300ms;
}.slide-exit {transform: translateX(0);
}.slide-exit-active {transform: translateX(100%);transition: transform 300ms;
}

以上代码中，slide-enter 和 slide-exit 类名定义了进入和离开动画的初始状态，而 slide-enter-active 和 slide-exit-active 类名定义了进入和离开动画的活动状态。

最后，你可以在你的应用中使用 SlideExample 组件来展示滑动动画：

import React from 'react';
import SlideExample from './SlideExample';const App = () => {return (<div><h1>Ant Design Mobile of React</h1><SlideExample /></div>);
};export default App;

通过以上代码，你就可以在你的移动应用中使用滑动动画了。当点击 “Toggle” 按钮时，SlideExample 组件的内容将以滑动的方式显示或隐藏。

五、缩放动画开发中应用示例代码

在这里插入图片描述当使用 Ant Design Mobile of React 开发移动应用时，你可以使用滑动缩放动画效果。以下是一个使用滑动缩放动画的示例代码：

首先，你需要安装 @am-design/css 库，它包含了 Ant Design Mobile 的 CSS 样式文件。你可以使用 npm 或 yarn 进行安装。

然后，在你的入口文件中，引入 Ant Design Mobile 的 CSS 样式文件：

import '@am-design/css/dist/am-design.css';

接下来，你可以在你的组件中使用滑动缩放动画。例如，你可以创建一个名为 ZoomSlideExample 的组件：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';const ZoomSlideExample = () => {const [show, setShow] = useState(false);const handleToggle = () => {setShow(!show);};return (<div><button onClick={handleToggle}>Toggle</button><CSSTransitionin={show}timeout={300}classNames="zoom-slide"unmountOnExit><div className="zoom-slide-content">Content</div></CSSTransition></div>);
};export default ZoomSlideExample;

在上面的代码中，我们使用了 react-transition-group 库中的 CSSTransition 组件来实现滑动缩放动画。通过设置 in 属性来控制组件的显示和隐藏，timeout 属性定义了动画的持续时间，classNames 属性指定了动画效果的类名前缀。

接着，在 CSS 样式文件中定义滑动缩放动画的类名：

.zoom-slide-enter {opacity: 0;transform: translateY(-100%) scale(0.5);
}.zoom-slide-enter-active {opacity: 1;transform: translateY(0) scale(1);transition: opacity 300ms, transform 300ms;
}.zoom-slide-exit {opacity: 1;transform: translateY(0) scale(1);
}.zoom-slide-exit-active {opacity: 0;transform: translateY(100%) scale(0.5);transition: opacity 300ms, transform 300ms;
}

以上代码中，zoom-slide-enter 和 zoom-slide-exit 类名定义了进入和离开动画的初始状态，而 zoom-slide-enter-active 和 zoom-slide-exit-active 类名定义了进入和离开动画的活动状态。

最后，你可以在你的应用中使用 ZoomSlideExample 组件来展示滑动缩放动画：

import React from 'react';
import ZoomSlideExample from './ZoomSlideExample';const App = () => {return (<div><h1>Ant Design Mobile of React</h1><ZoomSlideExample /></div>);
};export default App;

通过以上代码，你就可以在你的移动应用中使用滑动缩放动画了。当点击 “Toggle” 按钮时，ZoomSlideExample 组件的内容将以滑动缩放的方式显示或隐藏。

六、渐变色动画开发中应用示例代码

在这里插入图片描述当使用 Ant Design Mobile of React 开发移动应用时，你可以使用渐变色动画效果。以下是一个使用渐变色动画的示例代码：

首先，你需要安装 @am-design/css 库，它包含了 Ant Design Mobile 的 CSS 样式文件。你可以使用 npm 或 yarn 进行安装：

npm install @am-design/css

或

yarn add @am-design/css

然后，在你的入口文件中，引入 Ant Design Mobile 的 CSS 样式文件：

import '@am-design/css/dist/am-design.css';

接下来，你可以在你的组件中使用渐变色动画。例如，你可以创建一个名为 GradientAnimationExample 的组件：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';const GradientAnimationExample = () => {const [show, setShow] = useState(false);const handleToggle = () => {setShow(!show);};return (<div><button onClick={handleToggle}>Toggle</button><CSSTransitionin={show}timeout={300}classNames="gradient-animation"unmountOnExit><div className="gradient-animation-content">Content</div></CSSTransition></div>);
};export default GradientAnimationExample;

在上面的代码中，我们使用了 react-transition-group 库中的 CSSTransition 组件来实现渐变色动画。通过设置 in 属性来控制组件的显示和隐藏，timeout 属性定义了动画的持续时间，classNames 属性指定了动画效果的类名前缀。

接着，在 CSS 样式文件中定义渐变色动画的类名：

.gradient-animation-enter {opacity: 0;
}.gradient-animation-enter-active {opacity: 1;transition: opacity 300ms;animation: gradient-animation 3s infinite;
}.gradient-animation-exit {opacity: 1;
}.gradient-animation-exit-active {opacity: 0;transition: opacity 300ms;
}@keyframes gradient-animation {0% {background: linear-gradient(to right, #ff0000, #00ff00);}50% {background: linear-gradient(to right, #00ff00, #0000ff);}100% {background: linear-gradient(to right, #0000ff, #ff0000);}
}

以上代码中，gradient-animation-enter 和 gradient-animation-exit 类名定义了进入和离开动画的初始状态，而 gradient-animation-enter-active 和 gradient-animation-exit-active 类名定义了进入和离开动画的活动状态。

@keyframes 定义了渐变色动画的关键帧，从左到右依次变化颜色。

最后，你可以在你的应用中使用 GradientAnimationExample 组件来展示渐变色动画：

import React from 'react';
import GradientAnimationExample from './GradientAnimationExample';const App = () => {return (<div><h1>Ant Design Mobile of React</h1><GradientAnimationExample /></div>);
};export default App;

通过以上代码，你就可以在你的移动应用中使用渐变色动画了。当点击 “Toggle” 按钮时，GradientAnimationExample 组件的内容将以渐变色的方式显示或隐藏，并且背景颜色会按照定义的动画效果进行变化。

七、旋转动画开发中应用示例代码

在这里插入图片描述当使用 Ant Design Mobile of React 开发移动应用时，你可以使用旋转动画效果。以下是一个使用旋转动画的示例代码：

首先，你需要安装 @am-design/css 库，它包含了 Ant Design Mobile 的 CSS 样式文件。你可以使用 npm 或 yarn 进行安装：

npm install @am-design/css

或

yarn add @am-design/css

然后，在你的入口文件中，引入 Ant Design Mobile 的 CSS 样式文件：

import '@am-design/css/dist/am-design.css';

接下来，你可以在你的组件中使用旋转动画。例如，你可以创建一个名为 RotateAnimationExample 的组件：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';const RotateAnimationExample = () => {const [show, setShow] = useState(false);const handleToggle = () => {setShow(!show);};return (<div><button onClick={handleToggle}>Toggle</button><CSSTransitionin={show}timeout={300}classNames="rotate-animation"unmountOnExit><div className="rotate-animation-content">Content</div></CSSTransition></div>);
};export default RotateAnimationExample;

在上面的代码中，我们使用了 react-transition-group 库中的 CSSTransition 组件来实现旋转动画。通过设置 in 属性来控制组件的显示和隐藏，timeout 属性定义了动画的持续时间，classNames 属性指定了动画效果的类名前缀。

接着，在 CSS 样式文件中定义旋转动画的类名：

.rotate-animation-enter {opacity: 0;transform: rotate(0);
}.rotate-animation-enter-active {opacity: 1;transform: rotate(360deg);transition: opacity 300ms, transform 300ms;
}.rotate-animation-exit {opacity: 1;transform: rotate(360deg);
}.rotate-animation-exit-active {opacity: 0;transform: rotate(0);transition: opacity 300ms, transform 300ms;
}

以上代码中，rotate-animation-enter 和 rotate-animation-exit 类名定义了进入和离开动画的初始状态，而 rotate-animation-enter-active 和 rotate-animation-exit-active 类名定义了进入和离开动画的活动状态。

最后，你可以在你的应用中使用 RotateAnimationExample 组件来展示旋转动画：

import React from 'react';
import RotateAnimationExample from './RotateAnimationExample';const App = () => {return (<div><h1>Ant Design Mobile of React</h1><RotateAnimationExample /></div>);
};export default App;

通过以上代码，你就可以在你的移动应用中使用旋转动画了。当点击 “Toggle” 按钮时，RotateAnimationExample 组件的内容将以旋转的方式显示或隐藏。

八、弹跳动画开发中应用示例代码

在这里插入图片描述当使用 Ant Design Mobile of React 开发移动应用时，你可以使用弹跳动画效果。以下是一个使用弹跳动画的示例代码：

首先，你需要安装 @am-design/css 库，它包含了 Ant Design Mobile 的 CSS 样式文件。你可以使用 npm 或 yarn 进行安装：

npm install @am-design/css

或

yarn add @am-design/css

然后，在你的入口文件中，引入 Ant Design Mobile 的 CSS 样式文件：

import '@am-design/css/dist/am-design.css';

接下来，你可以在你的组件中使用弹跳动画。例如，你可以创建一个名为 BounceAnimationExample 的组件：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';const BounceAnimationExample = () => {const [show, setShow] = useState(false);const handleToggle = () => {setShow(!show);};return (<div><button onClick={handleToggle}>Toggle</button><CSSTransitionin={show}timeout={300}classNames="bounce-animation"unmountOnExit><div className="bounce-animation-content">Content</div></CSSTransition></div>);
};export default BounceAnimationExample;

在上面的代码中，我们使用了 react-transition-group 库中的 CSSTransition 组件来实现弹跳动画。通过设置 in 属性来控制组件的显示和隐藏，timeout 属性定义了动画的持续时间，classNames 属性指定了动画效果的类名前缀。

接着，在 CSS 样式文件中定义弹跳动画的类名：

.bounce-animation-enter {opacity: 0;transform: translateY(-100%);
}.bounce-animation-enter-active {opacity: 1;transform: translateY(0);transition: opacity 300ms, transform 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}.bounce-animation-exit {opacity: 1;transform: translateY(0);
}.bounce-animation-exit-active {opacity: 0;transform: translateY(100%);transition: opacity 300ms, transform 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

以上代码中，bounce-animation-enter 和 bounce-animation-exit 类名定义了进入和离开动画的初始状态，而 bounce-animation-enter-active 和 bounce-animation-exit-active 类名定义了进入和离开动画的活动状态。

最后，你可以在你的应用中使用 BounceAnimationExample 组件来展示弹跳动画：

import React from 'react';
import BounceAnimationExample from './BounceAnimationExample';const App = () => {return (<div><h1>Ant Design Mobile of React</h1><BounceAnimationExample /></div>);
};export default App;

通过以上代码，你就可以在你的移动应用中使用弹跳动画了。当点击 “Toggle” 按钮时，BounceAnimationExample 组件的内容将以弹跳的方式显示或隐藏。

希望这些示例能够帮助你理解如何在 Ant Design Mobile of React 中使用内置动画。如果你有任何进一步的问题，请随时提问。

九、归纳总结知识点

使用 Ant Design Mobile of React 的 CSS 内置动画的知识点总结如下：

  1. Ant Design Mobile（AM）提供了一些内置的 CSS 动画效果，可以直接在组件中使用。

  2. 在使用内置动画之前，需要确保已正确引入 Ant Design Mobile 的 CSS 样式文件。

  3. 内置动画类名的命名规则为 am-animation-<animation-name>，其中 <animation-name> 是具体的动画名称。

  4. 可以通过在组件的 className 属性中添加内置动画类名来应用相应的动画效果。

  5. 内置动画可以应用于组件的进入、离开和活动状态，具体的类名为：

    • 进入动画：am-animation-enter 和 am-animation-enter-active
    • 离开动画：am-animation-exit 和 am-animation-exit-active
    • 活动动画：am-animation-active

  6. 内置动画可以使用在 CSSTransition 组件中，通过设置相应的类名和持续时间来控制动画效果。

  7. 内置动画可以与其他 CSS 类名和样式一起使用，以实现更复杂的动画效果。

  8. 可以使用 @keyframes 规则自定义和扩展内置动画，以满足特定的需求。

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述总结以上知识点，你可以在 Ant Design Mobile of React 中利用内置动画类名和 CSSTransition 组件来实现各种动画效果。通过合理应用这些知识点，可以为你的移动应用增添一些生动和吸引人的交互效果。

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

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

相关文章

逸学Docker【java工程师基础】3.4Docker安装redis

逸学Docker【java工程师基础】3.4Docker安装redis

1.拉取redis docker pull redis 2.选择一个合适的redis 版本的配置文件 Redis configuration | Redis 或者这个 链接&#xff1a;https://pan.baidu.com/s/1RRdtgec4xBAgQghlhm0x1Q 提取码&#xff1a;ycyc 在1044行修改密码 3.提前在服务器建立 /data/redis 文件夹&…
阅读更多...
前端下载文件流，设置返回值类型responseType:‘blob‘无效的问题

前端下载文件流，设置返回值类型responseType:‘blob‘无效的问题

前言&#xff1a; 本是一个非常简单的请求&#xff0c;即是下载文件。通常的做法如下&#xff1a; 1.前端通过Vue Axios向后端请求&#xff0c;同时在请求中设置响应体为Blob格式。 2.后端相应前端的请求&#xff0c;同时返回Blob格式的文件给到前端&#xff08;如果没有步骤…
阅读更多...
AI短视频制作：创意与技术的完美结合

AI短视频制作：创意与技术的完美结合

文章目录 一、充分了解AI技术的应用范围和优势二、创意策划&#xff0c;确定作品主题和风格三、素材收集&#xff0c;丰富作品内容四、特效制作&#xff0c;提升作品视觉效果五、配音处理&#xff0c;增强作品表现力六、作品发布&#xff0c;扩大作品传播范围《AI短视频制作一本…
阅读更多...
Laravel7 + easyWeChat 实现微信公众号支付功能

Laravel7 + easyWeChat 实现微信公众号支付功能

注册服务号&#xff0c;需进行微信认证&#xff0c;此时需缴费 300 元/年&#xff0c;必须是认证成功的服务号才能开通微信支付。 注册微信支付商户号 1、登录 https://pay.weixin.qq.com/index.php/core/home/login?return_urlhttps%3A%2F%2Fpay.weixin.qq.com%2Findex.php%…
阅读更多...
Python爬虫学习笔记（一）---Python入门

Python爬虫学习笔记（一）---Python入门

一、pycharm的安装及使用二、python的基础使用1、字符串连接2、单双引号转义3、换行4、三引号跨行字符串5、命名规则6、注释7、 优先级not>and>or8、列表&#xff08;list&#xff09;9、字典&#xff08;dictionary&#xff09;10、元组&#xff08;tuple&#xff09;11…
阅读更多...
PE解释器之PE文件结构（二）

PE解释器之PE文件结构（二）

接下来的内容是对IMAGE_OPTIONAL_HEADER32中的最后一个成员DataDirectory&#xff0c;虽然他只是一个结构体数组&#xff0c;每个结构体的大小也不过是个字节&#xff0c;但是它却是PE文件中最重要的成员。PE装载器通过查看它才能准确的找到某个函数或某个资源。 一&#xff1…
阅读更多...
qt学习：实战 读取txt文件+定时器点名

qt学习：实战 读取txt文件+定时器点名

目录 目标 步骤 头文件 配置ui界面 在.h里定义槽函数和字符串链表和定时器指针 在构造函数里读取txt文件并初始化定时器 开始按钮点击函数 开始定时器 停止按钮点击函数 关闭定时器 定时器槽函数 目标 两个按钮&#xff0c;一个开始点名&#xff0c;一个停止点名一个…
阅读更多...
用Go plan9汇编实现斐波那契数列计算

用Go plan9汇编实现斐波那契数列计算

斐波那契数列是一个满足递推关系的数列&#xff0c;如&#xff1a;1 1 2 3 5 8 ... 其前两项为1&#xff0c;第3项开始&#xff0c;每一项都是其前两项之和。 用Go实现一个简单的斐波那契计算逻辑 func fib(n int) int {if n 1 || n 2 {return 1}return fib(n-1) fib(n-2) …
阅读更多...
C# 获取QQ会话聊天信息

C# 获取QQ会话聊天信息

目录 利用UIAutomation获取QQ会话聊天信息 效果 代码 目前遇到一个问题 其他解决办法 利用UIAutomation获取QQ会话聊天信息 效果 代码 AutomationElement window AutomationElement.FromHandle(get.WindowHwnd); AutomationElement QQMsgList window.FindFirst(Tr…
阅读更多...
【算法分析与设计】H指数

【算法分析与设计】H指数

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;并发编程 ⛺️稳中求进&#xff0c;晒太阳 题目 给你一个整数数组 citations &#xff0c;其中 citations[i] 表示研究者的第 i 篇论文被引用的次数。计算并返回该研究者的 h 指数。 根据维…
阅读更多...
网络原理--http

网络原理--http

目录 一、 DNS&#xff08;应用层协议&#xff09; 1、域名概念 2、维护ip地址和域名之间的映射&#xff08;域名解析系统&#xff09; 3、DNS系统&#xff08;服务器&#xff09; 4、如何解决DNS服务器高并发问题 二、HTTP&#xff08;应用层协议&#xff09; 1、htt…
阅读更多...
Redis实战之-分布式锁-redission

Redis实战之-分布式锁-redission

一、分布式锁-redission功能介绍 基于setnx实现的分布式锁存在下面的问题&#xff1a; 重入问题&#xff1a;重入问题是指 获得锁的线程可以再次进入到相同的锁的代码块中&#xff0c;可重入锁的意义在于防止死锁&#xff0c;比如HashTable这样的代码中&#xff0c;他的方法都…
阅读更多...
ROS2手册的离线编译安装

ROS2手册的离线编译安装

ROS开发中经常要查询相关API&#xff0c;把文档下载到本地离线使用方便快捷&#xff0c;极大提高开发效率 下载ROS2文档 git clone https://github.com/ros2/ros2_documentation.gitcd ros2_documentation安装sphinx pip install Sphinx配置sphinx sphinx-quickstart按提示…
阅读更多...
DolphinScheduler-3.2.0集群部署教程

DolphinScheduler-3.2.0集群部署教程

本文目录 1.集群部署方案(2 Master 3 Worker)2.前置准备工作3.端口说明4.DS集群部署1.时间同步2.配置用户、权限3.配置集群免密登陆4.ZK集群启动5.初始化数据库1.创建数据库、用户、授权2.解压缩安装包3.添加MySQL驱动至libs目录 6.配置文件修改1.dolphinscheduler_env.sh 配置…
阅读更多...
DBA技术栈MongoDB：简介

DBA技术栈MongoDB：简介

1.1 什么是MongoDB&#xff1f; MongoDB是一个可扩展、开源、表结构自由、用C语言编写且面向文档的数据库&#xff0c;旨在为Web应用程序提供高性能、高可用性且易扩展的数据存储解决方案。 MongoDB是一个介于关系数据库和非关系数据库之间的产品&#xff0c;是非关系数据库当…
阅读更多...
Debian 11.8.0 安装图解

Debian 11.8.0 安装图解

引导和开始安装 这里直接回车确认即可&#xff0c;选择图形化安装方式。 选择语言 这里要区分一下&#xff0c;当前选中的语言作为安装过程中安装器所使用的语言&#xff0c;这里我们选择中文简体。不过细心的同学可能发现&#xff0c;当你选择安装器语言之后&#xff0c;后续安…
阅读更多...
阿里云ECS(CentOS镜像)安装docker

阿里云ECS(CentOS镜像)安装docker

目录 1.前置条件 2.连接至ECS 3.yum软件包更新 4.安装docker前置所需软件包 5.添加docker 官方的 yum 软件源 6.安装docker 7.检测是否成功 8.配置阿里云镜像加速器 1.前置条件 在看本文前保证未安装过docker,或者安装过但是清理干净 如果多次安装失败过&#xff0c;…
阅读更多...
【机组】算术逻辑单元带进位运算实验的解密与实战

【机组】算术逻辑单元带进位运算实验的解密与实战

​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《机组 | 模块单元实验》⏰诗赋清音&#xff1a;云生高巅梦远游&#xff0c; 星光点缀碧海愁。 山川深邃情难晤&#xff0c; 剑气凌云志自修。 ​ 目录 &#x1f33a;一、 实验目…
阅读更多...
小白水平理解面试经典题目LeetCode 121 Best Time to Buy and Sell Stock

小白水平理解面试经典题目LeetCode 121 Best Time to Buy and Sell Stock

121 Best Time to Buy and Sell Stock (买卖股票的最佳时机) 你好&#xff0c;2024年的第一个月&#xff0c;又是秋风萧瑟天气凉&#xff0c;草木摇落露为霜。.。。在这个特殊的时代&#xff0c;作为我们普通的一个打工人&#xff0c;我们用这道题&#xff0c;开启对这个不符合…
阅读更多...
DolphinDB学习（0）：DolphinDB基本概述

DolphinDB学习（0）：DolphinDB基本概述

DolphinDB的学习难度不小&#xff0c;主要是写法比较多&#xff0c;官方示例是一次性给一大堆代码&#xff0c;在没有成体系的学习基础的前提下&#xff0c;总有种力不从心的感觉&#xff0c;所以博主汇总这一个系列的文章&#xff0c;尝试从最简单的基础常规操作开始&#xff…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023