鸿蒙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组件,设置间距为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/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 // 设置当前图片缩放比例为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/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 // 设置当前图片层级为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%')}
}

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

UAC2.0 speaker——speaker 数据传输

文章目录 麦克风数据传输准备音频数据抓包原始数据频谱分析(FFT)应用麦克风数据传输 上一节中实现了 USB 麦克风设备 本节主要介绍 MCU 麦克风的数据如何传输给上位机。 准备音频数据 MCU 端发送 48KHZ, 16bit 单声道的正弦波数据,正弦波数据的生成参考 音频——C语言生…

【多语言】每种语言打印helloworld,编译为exe会占多大空间

文章目录 背景c语言 53KBc 53KBgo 1.8Mdart 4.6Mpython未测试nodejs未测试rust未测试java未测试cmd || bash || powershell 未测试other 背景 各个版本的helloworld,纯属闲的, 环境如下: - win10 - mingw: gcc8.1.0 - go1.21 - dart3.5.4c语言 53KB gcc main.c -…

Android12的ANR解析

0. 参考: ANR分析 深入理解 Android ANR 触发原理以及信息收集过程 1.ANR的触发分类: ANR分为4类: InputDispatchTimeout:输入事件分发超时5s,包括按键和触摸事件。BroadcastTimeout:比如前台广播在10s内未执行完成&#xff0…

2022-2023全国高校计算机能力挑战赛区域赛python组编程题

mi目录 2022 1. 2. 1. 使用 format() 方法 2. 使用 f-string(Python 3.6 及以上) 2023 1. 2. 3. 4 闽农大宝玲楼 2022 1. 1.某动物研究员给动物园的动物们定了一个园区幸福值,其中园区幸福值的计算为一个园区内“所有动物的活动时…

函数的栈帧

前言: 1.请使用vs2013调试,我使用vs2019被恶心到了,封装严重,不利于观察。 2.函数栈帧:函数就是程序,程序就需要空间来运行,所以我们要为他分配空间,分配的空间用ebp esp维护&…

机器学习基础04

目录 1.朴素贝叶斯-分类 1.1贝叶斯分类理论 1.2条件概率 1.3全概率公式 1.4贝叶斯推断 1.5朴素贝叶斯推断 1.6拉普拉斯平滑系数 1.7API 2.决策树-分类 2.1决策树 2.2基于信息增益的决策树建立 2.2.1信息熵 2.2.2信息增益 2.2.3信息增益决策树建立步骤 2.3基于基…

如何解决IDE添加错误GitHub token后无法连接GitHub的问题

背景 当初学者首次使用IDE(IDEA、Xcode等)对GitHub仓库进行操作(push、fetch)时,会提示输入GitHub账户和token,如果这时候你一不小心输入了错误的token,之后你就叫天天不应叫地地不灵了&#xf…

PPT技巧:如何合并PPT文件?

在工作与学习中,PPT(PowerPoint)演示文稿已成为信息传递、项目汇报、教育培训等领域不可或缺的工具。随着任务的累积,我们往往会积累大量单独的PPT文件,每个文件可能包含特定章节、项目阶段或是不同主题的内容。为了更…

安全见闻1-5

涵盖了编程语言、软件程序类型、操作系统、网络通讯、硬件设备、web前后端、脚本语言、病毒种类、服务器程序、人工智能等基本知识,有助于全面了解计算机科学和网络技术的各个方面。 安全见闻1 1.编程语言简要概述 C语言:面向过程,适用于系统…

k-近邻算法(K-Nearest Neighbors, KNN)详解:机器学习中的经典算法

✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏…

LeetCode297.二叉树的序列化和反序列化

题目要求 序列化是将一个数据结构或者对象转换为连续的比特位的操作,进而可以将转换后的数据存储在一个文件或者内存中,同时也可以通过网络传输到另一个计算机环境,采取相反方式重构得到原数据。 请设计一个算法来实现二叉树的序列化与反序…

蓝牙5.0模块助力闹钟升级,开启智能生活第一步

随着智能家居产业的快速发展,智能闹钟作为其中一个重要的品类,逐渐从单一的时间提醒功能演变为集音频播放、语音交互、智能控制等多种功能于一体的智能设备。而在这些功能的实现中,蓝牙音频模组扮演着核心角色。 1、蓝牙音频模组的功能概述 …

自己动手写Qt Creator插件

文章目录 前言一、环境准备1.先看自己的Qt Creator IDE的版本2.下载源码 二、使用步骤1.参考原本的插件2.编写自定义插件1.cmakelist增加一个模块2.同理,qbs文件也增加一个3.插件源码 三、效果总结 前言 就目前而言,Qt Creator这个IDE,插件比…

力扣经典面试题

1.本题的目标是判断字符串ransomNote是否由字符串magazine中的字符构成,且由magazine中的每个字符只能在ransomNote中使用一次 2.采用的方法是通过一个字典cahr_countl来统计magazine字符串中每个字符出现的次数 3.然后遍历ransomNote字符串,对于其中的…

Java开发人员从了学习ArkTs笔记(三)-数据结构与线程通信全解析

大家好,我是一名热爱Java开发的开发人员。目前,我正在学习ARKTS(Advanced Java Knowledge and Technology Stack),并将不断输出我的学习笔记。我将在这里分享我学习ARKTS的过程和心得,希望能够为其他开发人…

Java基础——预定义类/自定义类封装什么是Final类型

目录 预定义类——日历输出: 自定义类——在Java文件中: 什么是封装? 什么是final类型? 修饰变量: 修饰方法: 修饰类: 预定义类——日历输出: 例如:Math类、Date类…

spi 回环

///tx 极性0 (sclk信号线空闲时为低电平) /// 相位0 (在sclk信号线第一个跳变沿进行采样) timescale 1ns / 1ps//两个从机 8d01 8d02 module top(input clk ,input rst_n,input [7:0] addr ,input …

20241114软考架构-------软考案例16答案

每日打卡题案例16答案 16.【2017年真题】 难度:简单 阅读以下关于软件架构评估的叙述,在答题纸上回答问题1和问题2.(共25分) 【说明】 某单位为了建设健全的公路桥梁养护管理档案,拟开发一套公路桥梁在线管理系统。在系统的需求分析与架构设…

低成本出租屋5G CPE解决方案:ZX7981PG/ZX7981PM WIFI6千兆高速网络

刚搬进新租的房子,没有网络,开个热点?续航不太行。随身WIFI?大多是百兆级网络。找人拉宽带?太麻烦,退租的时候也不能带着走。5G CPE倒是个不错的选择,插入SIM卡就能直接连接5G网络,千…

Python学习小记3-传递任意数量的实参

1.形参名*toppings 中的星号让Python创建一个名为toppings 的空元组,不管调用语句提供了多少实参,这个形参会将它们统统收入囊中,即:无论几个小料 def make_pizza(size, *toppings):print(f"\n要制作一个{size}-inch的披萨&…