这一节主要了解一下鸿蒙的动画,动画的引入主要是为了提升用户体验、增加用户反馈和互动感、引导用户操作以及缓解等待带来的不适感。
属性动画:
Index.ets
@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 = 210
this.heightSize = 90
})
.animation({
duration: 1000,
delay: 1000,
curve: 'cubic-bezier(.57,.58,.75,1.33)',
//curve: Curve.Linear
iterations: -1,
playMode: PlayMode.Alternate
})
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
}
}
显示动画
Index.ets
@Entry
@Component
struct Index {
@State
heightSize: number = 40
build() {
Column() {
Text('一级菜单')
.height(40)
.onClick(() => {
animateTo({
duration: 500
}, () => {
this.heightSize = this.heightSize === 40 ? 0 : 40
})
})
Column() {
Text('一级菜单')
.height(this.heightSize)
Text('一级菜单')
.height(this.heightSize)
}
}
.backgroundColor('#069')
}
}
这个和Android中的补间动画优点类似。
页面间元素共享动画
页面间元素共享动画是指在两个页面之间进行切换时,通过特定的转场动效实现某些元素的平滑过渡。这种动画通常用于提升用户体验,使页面之间的跳转更加流畅和有趣。具体来说,当路由进行切换时,可以通过设置组件的sharedTransition属性将该元素标记为共享元素并设置对应的共享元素转场动效。这些属性包括id、duration、curve、delay、motionPath、zIndex和type等.它适用于多种场景,如图片的放大缩小、列表项的动态插入和移除等。例如,如果同一个元素在不同页面间的大小有明显差异,可以使用共享元素转场动画衔接,达到放大缩小视图的效果。在开发过程中,可以通过编写相应的代码来配置和实现这些动效。例如,通过设置sharedTransition的id和其他参数,可以使两个页面间的相同元素实现平滑过渡。
Index.ets
import router from '@ohos.router'
@Entry
@Component
struct Index {
build() {
Column() {
Column({ space: 10 }){
Image($rawfile('ai.png'))
.width('100%')
.aspectRatio(1)
.sharedTransition('ai', { duration: 500 })
Text('ai美女 这是一张由AI产生的美女...')
.sharedTransition('text', { duration: 500 })
}
.width('50%')
.onClick(() => {
router.pushUrl({
url: 'pages/DetailPage'
})
})
}
.height('100%')
.width('100%')
.alignItems(HorizontalAlign.Start)
}
}
DetailPage.ets
@Entry
@Component
struct DetailPage {
build() {
Column() {
Column({ space: 10 }){
Image($rawfile('ai.png'))
.width('100%')
.aspectRatio(1)
.sharedTransition('ai', { duration: 500 })
Text('ai美女 这是一张由AI产生的美女...')
.fontSize(24)
.sharedTransition('text', { duration: 500 })
}
.width('100%')
}
.height('100%')
.width('100%')
}
}