第十二篇【传奇开心果系列】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>
      <CSSTransition
        in={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>
      <CSSTransition
        in={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>
      <CSSTransition
        in={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>
      <CSSTransition
        in={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>
      <CSSTransition
        in={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>
      <CSSTransition
        in={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 组件来实现各种动画效果。通过合理应用这些知识点，可以为你的移动应用增添一些生动和吸引人的交互效果。

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

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

相关文章

FFmpeg之SWScale

FFmpeg之SWScale

文章目录 一、概述二、函数调用结构图三、Libswscale处理数据流程四、重要结构体4.1、SwsContext4.2、SwsFilter 五、重要函数5.1、sws_getContext5.1.1、sws_alloc_context5.1.2、sws_init_context 5.2、sws_scale5.2.1、SwsContext中的swscale()5.2.2、check_image_pointers5…
阅读更多...
Vue-30、Vue非单文件组件。

Vue-30、Vue非单文件组件。

非单文件组件&#xff1a; 一个组件包含n个组件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>非单文件组件</title><script type"text/javascript" src"https://cdn.jsde…
阅读更多...
项目管理工具--禅道

项目管理工具--禅道

一.禅道的安装 1.1.安装 二.禅道的使用 ​编辑 三.用产品经理的方式登录 3.1添加产品 3.2提需求 3.3添加产品需求 3.4创建项目 ​编辑 四.项目经理方式登录 ​编辑 4.1关联需求 ​编辑 4.2分解任务 五.测试方式登录 5.1测试建立用例 ​编辑 5.2需要换成项…
阅读更多...
（学习日记）2024.01.19

（学习日记）2024.01.19

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…
阅读更多...
K8S--安装Nginx

K8S--安装Nginx

原文网址&#xff1a;K8S--安装Nginx-CSDN博客 简介 本文介绍K8S安装Nginx的方法。 1.创建Nginx目录及配置文件 mkdir -p /work/devops/k8s/app/nginx/{config,html} 在config目录下创建nginx.conf配置文件&#xff0c;内容如下&#xff1a; # events必须要有 events {wo…
阅读更多...
Linux:多线程

Linux:多线程

目录 1.线程的概念 1.1线程的理解 1.2进程的理解 1.3线程如何看待进程内部的资源? 1.4进程 VS 线程 2.线程的控制 2.1线程的创建 2.2线程的等待 2.3线程的终止 2.4线程ID 2.5线程的分离 3.线程的互斥与同步 3.1相关概念 3.2互斥锁 3.2.1概念理解 3.2.2操作理解…
阅读更多...
智能驾驶新浪潮：SSD与UFS存储技术如何破浪前行？-UFS篇

智能驾驶新浪潮：SSD与UFS存储技术如何破浪前行？-UFS篇

如果说SSD是赛道上的超级跑车&#xff0c;那UFS更像是专为智能汽车定制的高性能轻量化赛车。UFS采用串行接口技术&#xff0c;像是闪电侠一样&#xff0c;将数据传输的速度推向新高&#xff0c;大幅缩短了系统启动时间和应用程序加载时间&#xff0c;这对追求即时反应的ADAS系统…
阅读更多...
高级架构师是如何设计一个系统的？

高级架构师是如何设计一个系统的？

架构师如何设计系统&#xff1f; 系统拆分 通过DDD领域模型&#xff0c;对服务进行拆分&#xff0c;将一个系统拆分为多个子系统&#xff0c;做成SpringCloud的微服务。微服务设计时要尽可能做到少扇出&#xff0c;多扇入&#xff0c;根据服务器的承载&#xff0c;进行客户端负…
阅读更多...
Golang 搭建 WebSocket 应用（六） - 监控

Golang 搭建 WebSocket 应用（六） - 监控

我在上一篇文章中&#xff0c;提到了目前的认证方式存在一些问题&#xff0c;需要替换为一种更简单的认证方式。 但是最后发现&#xff0c;认证这个实在是没有办法简单化&#xff0c;认证本身又是另外一个不小的话题了&#xff0c;因此关于这一点先留个坑。 本文先讨论一下另外…
阅读更多...
Redis实战之-分布式锁-redission

Redis实战之-分布式锁-redission

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

Qt拖拽事件简单实现

1.相关说明 重写resizeEvent(这个按需重写)、dragEnterEvent(拖拽事件函数)、dropEvent(放下事件函数)&#xff0c;可以将本地图片拖拽到label标签中 2.相关界面 3.相关代码 #include "widget.h" #include "ui_widget.h" #include <QDragEnterEvent>…
阅读更多...
A V I F是啥？

A V I F是啥？

AVIF 是一种最近的文件格式,在本文撰写之时,已经得到了 Microsoft Edge 的支持,从而获得了重要的浏览器支持。 !重要提示:我们不再处于黑暗时代,大多数大型 Web 平台通常支持当前版本的浏览器的最新 1 年版本。您可以开始使用 AVIF 与 WebP 回退(回退仅在 2024 年底之前是必要的…
阅读更多...
禅道的使用及简介

禅道的使用及简介

目录 一.禅道简介1.1 禅道主要功能和特点1.2 禅道官网 二.安装禅道2.1 下载禅道开源版2.2.修改数据库密码 三.登录禅道四.禅道的使用4.1.添加部门权限4.2.添加用户权限4.3.公司名修改4.4、.权限 五.创建产品5.1.产品经理创建产品5.2.添加产品模块5.3.添加产品计划5.4.项目经理的…
阅读更多...
TCP/IP 基础知识总结

TCP/IP 基础知识总结

要说我们接触计算机网络最多的协议&#xff0c;那势必离不开 TCP/IP 协议了&#xff0c;TCP/IP 协议同时也是互联网中最为著名的协议&#xff0c;下面我们就来一起聊一下 TCP/IP 协议。 TCP/IP 的历史背景 最初还没有 TCP/IP 协议的时候&#xff0c;也就是在 20 世纪 60 年代…
阅读更多...
java8 列表通过 stream流 根据对象属性去重的三种实现方法

java8 列表通过 stream流 根据对象属性去重的三种实现方法

java8 列表通过 stream流 根据对象属性去重的三种实现方法 一、简单去重 public class DistinctTest {/*** 没有重写 equals 方法*/SetterGetterToStringAllArgsConstructorNoArgsConstructorpublic static class User {private String name;private Integer age;}/*** lombo…
阅读更多...
服务注册流程解析

服务注册流程解析

本文主要介绍服务注册的基本流程 起手式 接上面的继续说&#xff0c;服务注册是一门至高无上的武学&#xff0c;招式千变万化 &#xff0c;九曲十八弯打得你找不到北。可正所谓这顺藤摸瓜&#xff0c;瓜不好找&#xff0c;可是这藤长得地方特别显眼。那么今天&#xff0c;就让…
阅读更多...
LLMs之Vanna：Vanna(利用自然语言查询数据库的SQL工具+底层基于RAG)的简介、安装、使用方法之详细攻略

LLMs之Vanna：Vanna(利用自然语言查询数据库的SQL工具+底层基于RAG)的简介、安装、使用方法之详细攻略

LLMs之Vanna&#xff1a;Vanna(利用自然语言查询数据库的SQL工具底层基于RAG)的简介、安装、使用方法之详细攻略 目录 Vanna的简介 1、用户界面 2、RAG vs. Fine-Tuning 3、为什么选择Vanna&#xff1f; 4、扩展Vanna Vanna的安装和使用方法 1、安装 2、训练 (1)、使用…
阅读更多...
航空飞行器运维VR模拟互动教学更直观有趣

航空飞行器运维VR模拟互动教学更直观有趣

传统的二手车鉴定评估培训模式存在实践性不强、教学样本不足、与实际脱节等一些固有的不足。有了VR虚拟仿真技术的加持&#xff0c;二手车鉴定评估VR虚拟仿真实训系统逐渐进入实训领域&#xff0c;为院校及企业二手车检测培训提供了全新的解决方案。 高职院校汽车专业虚拟仿真实…
阅读更多...
手写Vue3源码

手写Vue3源码

Vue3核心源码 B站视频地址&#xff1a;https://www.bilibili.com/video/BV1nW4y147Pd?p2&vd_source36bacfbaa95ea7a433650dab3f7fa0ae Monorepo介绍 Monorepo 是管理项目代码的一种方式&#xff0c;只在一个仓库中管理多个模块/包 一个仓库可以维护多个模块&#xff0c;…
阅读更多...
鸿蒙开发系列教程（五）--ArkTS语言：组件开发

鸿蒙开发系列教程（五）--ArkTS语言：组件开发

1、基础组件 组件API文档&#xff1a;https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/84_u58f0_u660e_u5f0f_u5f00_u53d1_u8303_u5f0f_uff09-0000001427744776-V2 查看组件API 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 容…
阅读更多...
最新文章

Copyright @ 2022~2023