1. 属性动画
组件的某些通用属性变化时,可以通过属性动画实现渐变过渡效果,提升用户体验。
- 支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。
@Entry
@Component
struct Index {
@State
widthSize: number = 100
@State
heightSize: number = 40
build() {
Column({ space: 15 }) {
Button('元素动画')
.width(this.widthSize)
.height(this.heightSize)
.onClick(() => {
this.widthSize = 200
this.heightSize = 100
})
.animation({
// 动画时间
duration: 1000,
// 执行次数
iterations: -1,
// 动画曲线
curve: Curve.Ease,
// 延时时间
delay: 1000,
// 播放模式
playMode: PlayMode.Alternate
})
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
}
}
2. 显示动画
提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。
@Entry
@Component
struct Index {
@State
heightSize: number = 40
build() {
Column() {
Text('一级菜单')
.height(40)
.onClick(() => {
animateTo({
duration: 200
}, () => {
this.heightSize = this.heightSize === 40 ? 0 : 40
})
})
Column() {
Text('一级菜单')
.height(this.heightSize)
Text('一级菜单')
.height(this.heightSize)
}
}
.backgroundColor('#069')
}
}
3. 元素共享转场
当路由进行切换时,可以通过设置组件的 sharedTransition 属性将该元素标记为共享元素并设置对应的共享元素转场动效。
- Index.ets
import router from '@ohos.router'
@Entry
@Component
struct Index {
build() {
Row({ space: 15 }) {
Column({ space: 10 }){
Image($rawfile('apple.png'))
.width('100%')
.aspectRatio(1)
.sharedTransition('apple', { duration: 500 })
Text('鸣春谷 正宗甘肃特产花牛水果苹果 【天水直发】 4.5-5斤中果A(约13-16个)')
.sharedTransition('text', { duration: 500 })
}
.padding(15)
.width('50%')
.onClick(() => {
router.pushUrl({
url: 'pages/DetailPage'
})
})
}
.width('100%')
}
}
- DetailPage.ets
@Entry
@Component
struct DetailPage {
build() {
Column({ space: 15 }) {
Column({ space: 10 }){
Image($rawfile('apple.png'))
.width('100%')
.aspectRatio(1)
.sharedTransition('apple', { duration: 500 })
Text('鸣春谷 正宗甘肃特产花牛水果苹果 【天水直发】 4.5-5斤中果A(约13-16个)')
.fontSize(18)
.sharedTransition('text', { duration: 500 })
}
.padding(15)
}
.height('100%')
.width('100%')
}
}
4. 拖动手势-阻尼和磁吸
拖动手势(PanGesture)
- 拖动手势用于触发拖动手势事件,滑动达到最小滑动距离(默认值为5vp)时拖动手势识别成功。
实现下拉刷新效果:
1.使用 Stack
堆叠下拉刷新容器和列表容器
2.使用手势事件 PanGesture
实现拖动列表容器
3.使用 animateTo
实现磁吸动画效果
4.拖动距离超出阀值,模拟开启加载效果,控制文字显示和动画
import promptAction from '@ohos.promptAction'
@Entry
@Component
struct Index {
@State
translateY: number = 0
@State
text: string = '下拉即可刷新'
@State
loading: boolean = false
ease (originValue: number = 0) {
const space = 60
const damp = 0.3
if ( originValue > space ) {
return space + ( originValue - space ) * damp
}
return originValue
}
build() {
Stack({ alignContent: Alignment.Top }) {
Row() {
if (this.loading) {
LoadingProgress()
.width(32)
.aspectRatio(1)
}
Text(this.text)
.fontColor('#999')
.width(100)
}
.height(100)
List() {
}
.backgroundColor('#fff')
.height('100%')
.width('100%')
.translate({ y: this.translateY })
.gesture(
PanGesture()
.onActionUpdate((event: GestureEvent) => {
this.translateY = this.ease(event.offsetY)
if ( this.translateY > 100 ) {
this.text = '释放立即刷新'
}
})
.onActionEnd((event: GestureEvent) => {
if (this.translateY > 100) {
this.loading = true
this.text = '正在刷新中...'
animateTo({ duration: 300 }, () => {
this.translateY = 100
})
// 加载数据
setTimeout(() => {
this.loading = false
this.text = ''
animateTo({ duration: 300, onFinish: () => this.text = '下拉即可刷新' }, () => {
this.translateY = 0
})
promptAction.showToast({ message: '刷新成功' })
}, 2000)
} else {
animateTo({ duration: 300 }, () => {
this.translateY = 0
})
}
})
)
}
.height('100%')
.width('100%')
.backgroundColor('#f3f4f5')
}
}
最后资料分享
如果你还没有掌握鸿蒙,现在想要在最短的时间吃透它,大家可以参考一下这份鸿蒙学习路线图以及《鸿蒙(HarmonyOS)开发学习笔记》,内容包含ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。
【扫描下方二维码即可免费领取!!】
快速入门
- 开发准备
- 构建第一个ArkTS应用(Stage模型)
- 构建第一个ArkTS应用(FA模型)
- 构建第一个JS应用(FA模型)
开发基础知识
- 应用程序包基础知识
- 应用配置文件(Stage模型)
- 应用配置文件概述(FA模型)
资源分类与访问
- 资源分类与访问
- 创建资源目录和资源文件
- 资源访问
学习ArkTs语言
- 初识ArkTS语言
- 基本语法
- 状态管理
- 其他状态管理
- 渲染控制
基于ArkTS声明式开发范式
- UI开发(ArkTS声明式开发范式)概述
- 开发布局
- 添加组件
- 显示图片
- 使用动画
- 支持交互事件
- 性能提升的推荐方法
兼容JS的类Web开发范式
- 概述
- 框架说明
- 构建用户界面
- 常见组件开发指导
- 动效开发指导
- 自定义组件
Web组件
- 概述
- 设置基本属性和事件
- 并发
- 窗口管理
- WebGL
- 媒体
- 安全
- 网络与连接
- 电话服务
- 数据管理
- …
应用模型
- 概述
- Stage模型开发指导
- FA模型开发指导