鸿蒙NEXT应用示例：切换图片动画

【引言】

在鸿蒙NEXT应用开发中，实现图片切换动画是一项常见的需求。本文将介绍如何使用鸿蒙应用框架中的组件和动画功能，实现不同类型的图片切换动画效果。

【环境准备】

电脑系统：windows 10

开发工具：DevEco Studio NEXT Beta1 Build Version: 5.0.3.806

工程版本：API 12

真机：mate60 pro

语言：ArkTS、ArkUI

权限：ohos.permission.INTERNET（示例图片是url所以需要网络权限）

【动画说明】

1. 淡入淡出动画（FadeTransition）

FadeTransition组件定义了一个淡入淡出的图片切换效果。通过设置图片的透明度实现渐变效果，让当前显示的图片逐渐消失，同时下一张图片逐渐显示出来。点击按钮时触发淡入淡出动画，实现图片的无限循环切换。

2. 缩放动画（ScaleTransition）

ScaleTransition组件实现了图片的缩放切换效果。通过控制图片的缩放比例，让当前显示的图片缩小消失，同时下一张图片放大显示出来。点击按钮时触发缩放动画，实现图片的无限循环切换。

3. 翻转动画（FlipTransition）

FlipTransition组件展示了图片的翻转切换效果。通过设置图片的旋转角度，让当前显示的图片沿Y轴翻转消失，同时下一张图片沿Y轴翻转显示出来。点击按钮时触发翻转动画，实现图片的无限循环切换。

4. 平移动画（SlideTransition）

SlideTransition组件实现了图片的平移切换效果。通过控制图片在X轴方向的平移距离，让当前显示的图片向左移出屏幕，同时下一张图片从右侧移入屏幕。点击按钮时触发平移动画，实现图片的无限循环切换。

通过以上四种不同的图片切换动画效果，可以为鸿蒙NEXT应用增添更加生动和吸引人的用户体验。开发者可以根据实际需求选择合适的动画效果，为应用界面注入更多活力和创意。

【完整代码】

@Component
  // 定义一个组件
struct FadeTransition { // 定义一个名为FadeTransition的结构体
  @State cellWidth: number = 200 // 定义并初始化一个名为cellWidth的状态变量，初始值为200，表示单元格宽度
  @State imageUrls: string[] = [// 定义并初始化一个名为imageUrls的状态变量，存储图片的URL数组
    'https://img2.baidu.com/it/u=3029837478,1144772205&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    'https://img2.baidu.com/it/u=186808850,2178610585&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    'https://img2.baidu.com/it/u=246493236,1763577649&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    'https://img0.baidu.com/it/u=3081415685,2219539125&fm=253&fmt=auto&app=138&f=JPEG?w=809&h=800'
  ]
  @State selectedIndex: number = 0 // 定义并初始化一个名为selectedIndex的状态变量，表示当前选中的图片索引
  @State currentImage: string = "" // 定义并初始化一个名为currentImage的状态变量，表示当前显示的图片
  @State nextImage: string = "" // 定义并初始化一个名为nextImage的状态变量，表示下一张要显示的图片
  @State isRunningAnimation: boolean = false // 定义并初始化一个名为isRunningAnimation的状态变量，表示动画是否正在运行
  @State opacity1: number = 1.0 // 定义并初始化一个名为opacity1的状态变量，表示当前图片的透明度
  @State opacity2: number = 0.0 // 定义并初始化一个名为opacity2的状态变量，表示下一张图片的透明度

  aboutToAppear(): void { // 定义一个方法，用于设置当前显示的图片和下一张要显示的图片
    this.currentImage = this.imageUrls[(this.selectedIndex + 0) % this.imageUrls.length]
    this.nextImage = this.imageUrls[(this.selectedIndex + 1) % this.imageUrls.length]
  }

  build() { // 定义一个方法，用于构建组件
    Column({ space: 30 }) { // 创建一个垂直布局的Column组件，设置间距为30
      Stack() { // 创建一个Stack组件
        Image(this.nextImage)// 显示下一张图片
          .width(`${this.cellWidth}px`)// 设置图片宽度
          .height(`${this.cellWidth}px`)// 设置图片高度
          .opacity(this.opacity2) // 设置图片透明度
        Image(this.currentImage)// 显示当前图片
          .width(`${this.cellWidth}px`)// 设置图片宽度
          .height(`${this.cellWidth}px`)// 设置图片高度
          .opacity(this.opacity1) // 设置图片透明度
      }.height(`${this.cellWidth}px`).width('100%') // 设置Stack组件的高度和宽度

      Button('下一张 (淡入淡出)').onClick(() => { // 创建一个按钮，点击按钮执行淡入淡出动画
        if (this.isRunningAnimation) { // 如果动画正在运行，则返回
          return
        }
        this.isRunningAnimation = true // 设置动画正在运行
        // 淡入淡出动画示例
        animateTo({
          // 执行动画
          duration: 400, // 设置动画持续时间
          onFinish: () => { // 动画结束时执行的操作
            this.currentImage = this.nextImage // 设置当前图片为下一张图片
            this.selectedIndex++ // 选中图片索引加一
            animateTo({
              // 执行动画
              duration: 100, // 设置动画持续时间
              onFinish: () => { // 动画结束时执行的操作
                this.opacity1 = 1 // 设置当前图片透明度为1
                this.opacity2 = 0 // 设置下一张图片透明度为0
                this.currentImage = this.imageUrls[(this.selectedIndex + 0) % this.imageUrls.length] // 设置当前显示的图片
                this.nextImage = this.imageUrls[(this.selectedIndex + 1) % this.imageUrls.length] // 设置下一张要显示的图片
                this.isRunningAnimation = false // 设置动画结束
              }
            }, () => {
            })
          }
        }, () => {
          this.opacity1 = 0 // 设置当前图片透明度为0
          this.opacity2 = 1 // 设置下一张图片透明度为1
        })
      })
    }
  }
}

@Component
struct ScaleTransition {
  @State cellWidth: number = 200 // 单元格宽度
  @State imageUrls: string[] = [// 图片URL数组
    'https://img2.baidu.com/it/u=3029837478,1144772205&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    'https://img2.baidu.com/it/u=186808850,2178610585&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    'https://img2.baidu.com/it/u=246493236,1763577649&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    'https://img0.baidu.com/it/u=3081415685,2219539125&fm=253&fmt=auto&app=138&f=JPEG?w=809&h=800'
  ]
  @State selectedIndex: number = 0 // 当前选中的图片索引
  @State currentImage: string = "" // 当前显示的图片
  @State nextImage: string = "" // 下一张要显示的图片
  @State isRunningAnimation: boolean = false // 动画是否正在运行
  @State scale1: number = 1.0 // 当前图片的缩放比例
  @State scale2: number = 0.0 // 下一张图片的缩放比例

  aboutToAppear(): void {
    this.currentImage = this.imageUrls[(this.selectedIndex + 0) % this.imageUrls.length] // 设置当前显示的图片
    this.nextImage = this.imageUrls[(this.selectedIndex + 1) % this.imageUrls.length] // 设置下一张要显示的图片
  }

  build() {
    Column({ space: 30 }) { // 构建垂直布局
      Stack() { // 堆叠布局
        Image(this.nextImage)// 显示下一张图片
          .width(`${this.cellWidth}px`)// 设置宽度
          .height(`${this.cellWidth}px`)// 设置高度
          .scale({ x: this.scale2, y: this.scale2 }) // 设置缩放比例
        Image(this.currentImage)// 显示当前图片
          .width(`${this.cellWidth}px`)// 设置宽度
          .height(`${this.cellWidth}px`)// 设置高度
          .scale({ x: this.scale1, y: this.scale1 }) // 设置缩放比例
      }.height(`${this.cellWidth}px`).width('100%') // 设置堆叠布局的高度和宽度

      Button('下一张 (缩放)').onClick(() => { // 创建按钮并设置点击事件
        if (this.isRunningAnimation) { // 如果动画正在运行，直接返回
          return
        }
        this.isRunningAnimation = true // 标记动画正在运行
        // 缩放动画示例
        animateTo({
          // 执行动画
          duration: 200, // 动画持续时间
          onFinish: () => { // 动画结束时的回调
            this.scale1 = 0 // 设置当前图片缩放比例为0
            animateTo({
              // 执行第二段动画
              duration: 200, // 动画持续时间
              onFinish: () => { // 动画结束时的回调
                this.currentImage = this.nextImage // 切换到下一张图片
                this.selectedIndex++ // 更新选中的图片索引
                animateTo({
                  // 执行第三段动画
                  duration: 100, // 动画持续时间
                  onFinish: () => { // 动画结束时的回调
                    this.scale1 = 1 // 设置当前图片缩放比例为1
                    this.scale2 = 0 // 设置下一张图片缩放比例为0
                    this.currentImage = this.imageUrls[(this.selectedIndex + 0) % this.imageUrls.length] // 设置当前显示的图片
                    this.nextImage = this.imageUrls[(this.selectedIndex + 1) % this.imageUrls.length] // 设置下一张要显示的图片
                    this.isRunningAnimation = false // 标记动画结束
                  }
                }, () => {
                })
              }
            }, () => {
              this.scale2 = 1 // 设置下一张图片缩放比例为1
            })
          }
        }, () => {
          this.scale1 = 0 // 设置当前图片缩放比例为0
        })
      })
    }
  }
}

@Component
struct FlipTransition {
  @State cellWidth: number = 200 // 单元格宽度
  @State imageUrls: string[] = [// 图片URL数组
    'https://img2.baidu.com/it/u=3029837478,1144772205&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    'https://img2.baidu.com/it/u=186808850,2178610585&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    'https://img2.baidu.com/it/u=246493236,1763577649&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    'https://img0.baidu.com/it/u=3081415685,2219539125&fm=253&fmt=auto&app=138&f=JPEG?w=809&h=800'
  ]
  @State selectedIndex: number = 0 // 当前选中的图片索引
  @State currentImage: string = "" // 当前显示的图片
  @State nextImage: string = "" // 下一张要显示的图片
  @State isRunningAnimation: boolean = false // 动画是否正在运行
  @State angle1: number = 0 // 当前图片的旋转角度
  @State angle2: number = 90 // 下一张图片的旋转角度

  aboutToAppear(): void {
    this.currentImage = this.imageUrls[(this.selectedIndex + 0) % this.imageUrls.length] // 设置当前显示的图片
    this.nextImage = this.imageUrls[(this.selectedIndex + 1) % this.imageUrls.length] // 设置下一张要显示的图片
  }

  build() {
    Column({ space: 30 }) { // 构建垂直布局
      Stack() { // 堆叠布局
        Image(this.nextImage)// 显示下一张图片
          .width(`${this.cellWidth}px`)// 设置宽度
          .height(`${this.cellWidth}px`)// 设置高度
          .rotate({
            x: 0,
            y: 1,
            z: 0,
            angle: this.angle2 // 设置旋转角度
          })
        Image(this.currentImage)// 显示当前图片
          .width(`${this.cellWidth}px`)// 设置宽度
          .height(`${this.cellWidth}px`)// 设置高度
          .rotate({
            x: 0,
            y: 1,
            z: 0,
            angle: this.angle1 // 设置旋转角度
          })
      }.height(`${this.cellWidth}px`).width('100%') // 设置堆叠布局的高度和宽度

      Button('下一张 (翻转)').onClick(() => { // 创建按钮并设置点击事件
        if (this.isRunningAnimation) { // 如果动画正在运行，直接返回
          return
        }
        this.isRunningAnimation = true // 标记动画正在运行
        // 翻转动画示例
        animateTo({
          // 执行动画
          duration: 200, // 动画持续时间
          onFinish: () => { // 动画结束时的回调
            this.angle1 = -90 // 设置当前图片旋转角度为-90度
            animateTo({
              // 执行第二段动画
              duration: 200, // 动画持续时间
              onFinish: () => { // 动画结束时的回调
                this.currentImage = this.nextImage // 切换到下一张图片
                this.selectedIndex++ // 更新选中的图片索引
                animateTo({
                  // 执行第三段动画
                  duration: 100, // 动画持续时间
                  onFinish: () => { // 动画结束时的回调
                    this.angle1 = 0 // 设置当前图片旋转角度为0度
                    this.angle2 = 90 // 设置下一张图片旋转角度为90度
                    this.currentImage = this.imageUrls[(this.selectedIndex + 0) % this.imageUrls.length] // 设置当前显示的图片
                    this.nextImage = this.imageUrls[(this.selectedIndex + 1) % this.imageUrls.length] // 设置下一张要显示的图片
                    this.isRunningAnimation = false // 标记动画结束
                  }
                }, () => {
                })
              }
            }, () => {
              this.angle2 = 0 // 设置下一张图片旋转角度为0度
            })
          }
        }, () => {
          this.angle1 = -90 // 设置当前图片旋转角度为-90度
        })
      })
    }
  }
}

@Component
struct SlideTransition {
  @State cellWidth: number = 200 // 单元格宽度
  @State imageUrls: string[] = [// 图片URL数组
    'https://img2.baidu.com/it/u=3029837478,1144772205&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    'https://img2.baidu.com/it/u=186808850,2178610585&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    'https://img2.baidu.com/it/u=246493236,1763577649&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
    'https://img0.baidu.com/it/u=3081415685,2219539125&fm=253&fmt=auto&app=138&f=JPEG?w=809&h=800'
  ]
  @State selectedIndex: number = 0 // 当前选中的图片索引
  @State translateX1: number = 0 // 当前图片的X轴平移距离
  @State translateX2: number = 0 // 下一张图片的X轴平移距离
  @State zIndex2: number = 0 // 下一张图片的层级
  @State zIndex1: number = 1 // 当前图片的层级
  @State currentImage: string = "" // 当前显示的图片
  @State nextImage: string = "" // 下一张要显示的图片
  @State isRunningAnimation: boolean = false // 动画是否正在运行

  aboutToAppear(): void {
    this.currentImage = this.imageUrls[(this.selectedIndex + 0) % this.imageUrls.length] // 设置当前显示的图片
    this.nextImage = this.imageUrls[(this.selectedIndex + 1) % this.imageUrls.length] // 设置下一张要显示的图片
  }

  build() {
    Column({ space: 30 }) { // 构建垂直布局
      Stack() { // 堆叠布局
        Image(this.nextImage)// 显示下一张图片
          .width(`${this.cellWidth}px`)// 设置宽度
          .height(`${this.cellWidth}px`)// 设置高度
          .translate({ x: `${this.translateX2}px`, y: 0 })// 设置X轴平移距离
          .zIndex(this.zIndex2) // 设置层级
        Image(this.currentImage)// 显示当前图片
          .width(`${this.cellWidth}px`)// 设置宽度
          .height(`${this.cellWidth}px`)// 设置高度
          .translate({ x: `${this.translateX1}px`, y: 0 })// 设置X轴平移距离
          .zIndex(this.zIndex1) // 设置层级
      }.height(`${this.cellWidth}px`).width('100%') // 设置堆叠布局的高度和宽度

      Button('下一张 (平移)').onClick(() => { // 创建按钮并设置点击事件
        if (this.isRunningAnimation) { // 如果动画正在运行，直接返回
          return
        }
        this.isRunningAnimation = true // 标记动画正在运行
        // 平移动画示例
        animateTo({
          // 执行动画
          duration: 200, // 动画持续时间
          onFinish: () => { // 动画结束时的回调
            this.zIndex1 = 0 // 设置当前图片层级为0
            this.zIndex2 = 1 // 设置下一张图片层级为1
            animateTo({
              // 执行第二段动画
              duration: 200, // 动画持续时间
              onFinish: () => { // 动画结束时的回调
                this.currentImage = this.nextImage // 切换到下一张图片
                this.selectedIndex++ // 更新选中的图片索引
                animateTo({
                  // 执行第三段动画
                  duration: 100, // 动画持续时间
                  onFinish: () => { // 动画结束时的回调
                    this.zIndex1 = 1 // 设置当前图片层级为1
                    this.zIndex2 = 0 // 设置下一张图片层级为0
                    this.currentImage = this.imageUrls[(this.selectedIndex + 0) % this.imageUrls.length] // 设置当前显示的图片
                    this.nextImage = this.imageUrls[(this.selectedIndex + 1) % this.imageUrls.length] // 设置下一张要显示的图片
                    this.isRunningAnimation = false // 标记动画结束
                  }
                }, () => {
                })
              }
            }, () => {
              this.translateX1 = 0 // 设置当前图片X轴平移距离为0
              this.translateX2 = 0 // 设置下一张图片X轴平移距离为0
            })
          }
        }, () => {
          this.translateX1 = -this.cellWidth / 2 // 设置当前图片X轴平移距离为单元格宽度的一半
          this.translateX2 = +this.cellWidth / 2 // 设置下一张图片X轴平移距离为单元格宽度的一半
        })
      })
    }
  }
}

@Entry
@Component
struct Test {
  build() {
    Column({ space: 30 }) {
      // 无限循环切换到下一张图片（平移）
      SlideTransition()
      // 无限循环切换到下一张图片（翻转）
      FlipTransition()
      // 无限循环切换到下一张图片（缩放）
      ScaleTransition()
      // 无限循环切换到下一张图片（淡入淡出）
      FadeTransition()
    }.height('100%').width('100%')
  }
}

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

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

相关文章

(02)ES6教程——Map、Set、Reflect、Proxy、字符串、数值、对象、数组、函数

(02)ES6教程——Map、Set、Reflect、Proxy、字符串、数值、对象、数组、函数

目录 前言 一、Map Maps 和 Objects 的区别 Map的迭代 forEach() Map对象的操作 二、Set Set 中的特殊值 三、Reflect 四、Proxy 五、字符串 六、数值 七、对象 八、数组 九、函数 参考文献 前言 一、Map Map 对象保存键值对。任何值(对象或者原始值) 都可以…
阅读更多...
【动手学电机驱动】 STM32-FOC（7）MCSDK Pilot 上位机控制与调试

【动手学电机驱动】 STM32-FOC（7）MCSDK Pilot 上位机控制与调试

STM32-FOC（1）STM32 电机控制的软件开发环境 STM32-FOC（2）STM32 导入和创建项目 STM32-FOC（3）STM32 三路互补 PWM 输出 STM32-FOC（4）IHM03 电机控制套件介绍 STM32-FOC（5&…
阅读更多...
Flume1.9.0自定义Sink组件将数据发送至Mysql

Flume1.9.0自定义Sink组件将数据发送至Mysql

需求 1、将Flume采集到的日志数据也同步保存到MySQL中一份，但是Flume目前不支持直接向MySQL中写数据，所以需要用到自定义Sink，自定义一个MysqlSink。 2、日志数据默认在Linux本地的/data/log/user.log日志文件中，使用Flume采集到…
阅读更多...
Transformer学习笔记（一）

Transformer学习笔记（一）

Transformer学习笔记 基于 3B1B 可视化视频 自注意力机制 1.每个词的初始嵌入是一个高维向量，只编码该单词含义，与上下文没有关联 2.对初始向量进行位置编码，在高维向量中编码进位置信息（单词在语言序列中的位置信息&#xff…
阅读更多...
.netcore + postgis 保存地图围栏数据

.netcore + postgis 保存地图围栏数据

一、数据库字段 字段类型选择(Type) 设置对象类型为：geometry 二、前端传递的Json格式转换 前端传递围栏的各个坐标点数据如下： {"AreaRange": [{"lat": 30.123456,"lng": 120.123456},{"lat": 30.123456…
阅读更多...
【ArcGIS微课1000例】0127：计算城市之间的距离

【ArcGIS微课1000例】0127：计算城市之间的距离

本文讲述，在ArcGIS中，计算城市（以地级城市为例）之间的距离，效果如下图所示： 一、数据准备 加载配套实验数据包中的地级市和行政区划矢量数据（订阅专栏后，从私信查收数据），如下图所示： 二、计算距离 1. 计算邻近表 ArcGIS提供了计算点和另外点之间距离的工具：分析…
阅读更多...
【数据库系列】 Spring Boot 集成 Neo4j 的详细介绍

【数据库系列】 Spring Boot 集成 Neo4j 的详细介绍

Spring Boot 提供了对 Neo4j 的良好支持，使得开发者可以更方便地使用图数据库。通过使用 Spring Data Neo4j，开发者可以轻松地进行数据访问、操作以及管理。本文将详细介绍如何在 Spring Boot 应用中集成 Neo4j，包括基本配置、实体定义、数据…
阅读更多...
【MySQL】ubantu 系统 MySQL的安装与免密码登录的配置

【MySQL】ubantu 系统 MySQL的安装与免密码登录的配置

🍑个人主页：Jupiter. 🚀 所属专栏：MySQL初阶探索：构建数据库基础 欢迎大家点赞收藏评论😊 目录 📚mysql的安装📕MySQL的登录🌏MySQL配置免密码登录 📚mysql的…
阅读更多...
麒麟V10，arm64，离线安装docker和docker-compose

麒麟V10，arm64，离线安装docker和docker-compose

文章目录 一、下载1.1 docker1.2 docker-compose1.3 docker.service 二、安装三、验证安装成功3.1 docker3.2 docker-compose 需要在离线环境的系统了里面安装docker。目前国产化主推的是麒麟os和鲲鹏的cpu，这块的教程还比较少，记录一下。 # cat /etc/ky…
阅读更多...
Docker：查看镜像里的文件

Docker：查看镜像里的文件

目录 背景步骤1、下载所需要的docker镜像2、创建并运行临时容器3、停止并删除临时容器 背景 在开发过程中，为了更好的理解和开发程序，有时需要确认镜像里的文件是否符合预期，这时就需要查看镜像内容 步骤 1、下载所需要的docker镜像 可以使…
阅读更多...
C语言和C++的常量概念与区别分析

C语言和C++的常量概念与区别分析

文章目录 💯前言💯常量的概念和作用💯C语言中 const 的应用与限制#define 和 enum 的使用方法 💯C 中 const 的计算方法和处理💯代码实例和应用区别💯C 和 C 的常量兼容性问题和负载💯分析 C 和…
阅读更多...
《生成式 AI》课程 第3講 CODE TASK执行文章摘要的机器人

《生成式 AI》课程 第3講 CODE TASK执行文章摘要的机器人

课程 《生成式 AI》课程 第3講：訓練不了人工智慧嗎？你可以訓練你自己-CSDN博客 任务1:总结 1.我们希望你创建一个可以执行文章摘要的机器人。 2.设计一个提示符，使语言模型能够对文章进行总结。 model: gpt-4o-mini,#gpt-3.5-turbo, import…
阅读更多...
【大数据学习 | flume】flume Sink Processors与拦截器Interceptor

【大数据学习 | flume】flume Sink Processors与拦截器Interceptor

1. Failover Sink Processor 故障转移处理器可以同时指定多个sink输出，按照优先级高低进行数据的分发，并具有故障转移能力。 需要修改第一台服务器agent a1.sourcesr1 a1.sinksk1 k2 a1.channelsc1 a1.sources.r1.typenetcat a1.sources.r1.bindworker…
阅读更多...
i春秋-登陆（sql盲注爆字段，.git缓存利用）

i春秋-登陆（sql盲注爆字段，.git缓存利用）

练习平台地址 竞赛中心 题目描述 先登陆再说 题目内容 就是一个登录框 测试登录 用户名：admin or 11# 密码：随便输 返回密码错误 用户名：随便输 密码：随便输 返回用户名不存在 这里就可以确定时一个bool盲注了 这里提供一个lik…
阅读更多...
【爬虫实战】抓取某站评论

【爬虫实战】抓取某站评论

【爬虫实战】抓取某站评论 声明：本文中所有内容仅供学习交流使用，不用于其他任何目的，不提供完整代码，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！ 方式一：JS逆向request发…
阅读更多...
【微软：多模态基础模型】（1）从专家到通用助手

【微软：多模态基础模型】（1）从专家到通用助手

欢迎关注【youcans的AGI学习笔记】原创作品 【微软：多模态基础模型】（1）从专家到通用助手 【微软：多模态基础模型】（2）视觉理解 【微软：多模态基础模型】（3）视觉生成 【微…
阅读更多...
HarmonyOS ArkUI(基于ArkTS) 开发布局 （中）

HarmonyOS ArkUI(基于ArkTS) 开发布局 （中）

HarmonyOS ArkUI(基于ArkTS) 开发布局 （上） 四 层叠布局 (Stack) 层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠&…
阅读更多...
港湾周评|鼎益丰“庞氏骗局”陨落

港湾周评|鼎益丰“庞氏骗局”陨落

《港湾商业观察》李镭 在坊间有着“老鼎”之称的鼎益丰迎来了全面陨落，这丝毫不出人意料，毕竟在一年前就已经暴雷了。 同样，仙风道骨般神采的鼎益丰老板隋广义也迎来人生的至暗时刻，应了无间道那句话，出来混总是要还…
阅读更多...
创建vue插件，发布npm

创建vue插件，发布npm

开发步骤：1.创建一个vue项目，2.开发一个组件。 3.注册成插件。 4.vite和package.json配置。5.发布到npm １.创建一个vue项目 npm create vuelatest 生成了vue项目之后，得到了以下结构。 在src下创建个plugins目录。用于存放开发的…
阅读更多...
用paramiko与SSH交互

用paramiko与SSH交互

# 导入paramiko库用于SSH连接，以及sys库用于处理命令行参数 import paramiko import sys# 定义一个函数send_command，用于发送命令到SSH服务器并打印输出结果 def send_command(ssh_client, cmd):# 使用exec_command方法执行命令，并获取输入、…
阅读更多...
最新文章

Copyright @ 2022~2023