免费的建网站软件,wordpress微信注册登录界面,w3school,网站建设人员分布【引言】
在鸿蒙NEXT应用开发中#xff0c;实现图片切换动画是一项常见的需求。本文将介绍如何使用鸿蒙应用框架中的组件和动画功能#xff0c;实现不同类型的图片切换动画效果。
【环境准备】
电脑系统#xff1a;windows 10
开发工具#xff1a;DevEco Studio NEXT B…
【引言】
在鸿蒙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/u3029837478,1144772205fm253fmtautoapp120fJPEG?w500h500,https://img2.baidu.com/it/u186808850,2178610585fm253fmtautoapp120fJPEG?w500h500,https://img2.baidu.com/it/u246493236,1763577649fm253fmtautoapp120fJPEG?w500h500,https://img0.baidu.com/it/u3081415685,2219539125fm253fmtautoapp138fJPEG?w809h800]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组件设置间距为30Stack() { // 创建一个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 // 设置当前图片透明度为1this.opacity2 0 // 设置下一张图片透明度为0this.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 // 设置当前图片透明度为0this.opacity2 1 // 设置下一张图片透明度为1})})}}
}Component
struct ScaleTransition {State cellWidth: number 200 // 单元格宽度State imageUrls: string[] [// 图片URL数组https://img2.baidu.com/it/u3029837478,1144772205fm253fmtautoapp120fJPEG?w500h500,https://img2.baidu.com/it/u186808850,2178610585fm253fmtautoapp120fJPEG?w500h500,https://img2.baidu.com/it/u246493236,1763577649fm253fmtautoapp120fJPEG?w500h500,https://img0.baidu.com/it/u3081415685,2219539125fm253fmtautoapp138fJPEG?w809h800]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 // 设置当前图片缩放比例为0animateTo({// 执行第二段动画duration: 200, // 动画持续时间onFinish: () { // 动画结束时的回调this.currentImage this.nextImage // 切换到下一张图片this.selectedIndex // 更新选中的图片索引animateTo({// 执行第三段动画duration: 100, // 动画持续时间onFinish: () { // 动画结束时的回调this.scale1 1 // 设置当前图片缩放比例为1this.scale2 0 // 设置下一张图片缩放比例为0this.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/u3029837478,1144772205fm253fmtautoapp120fJPEG?w500h500,https://img2.baidu.com/it/u186808850,2178610585fm253fmtautoapp120fJPEG?w500h500,https://img2.baidu.com/it/u246493236,1763577649fm253fmtautoapp120fJPEG?w500h500,https://img0.baidu.com/it/u3081415685,2219539125fm253fmtautoapp138fJPEG?w809h800]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/u3029837478,1144772205fm253fmtautoapp120fJPEG?w500h500,https://img2.baidu.com/it/u186808850,2178610585fm253fmtautoapp120fJPEG?w500h500,https://img2.baidu.com/it/u246493236,1763577649fm253fmtautoapp120fJPEG?w500h500,https://img0.baidu.com/it/u3081415685,2219539125fm253fmtautoapp138fJPEG?w809h800]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 // 设置当前图片层级为0this.zIndex2 1 // 设置下一张图片层级为1animateTo({// 执行第二段动画duration: 200, // 动画持续时间onFinish: () { // 动画结束时的回调this.currentImage this.nextImage // 切换到下一张图片this.selectedIndex // 更新选中的图片索引animateTo({// 执行第三段动画duration: 100, // 动画持续时间onFinish: () { // 动画结束时的回调this.zIndex1 1 // 设置当前图片层级为1this.zIndex2 0 // 设置下一张图片层级为0this.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轴平移距离为0this.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%)}
}
