翻页动效是应用开发中常见的动效场景，常见的如书籍翻页、日历翻页等。
https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md/
效果呈现
环境要求
实现思路
如图，分上下两层、左右两侧建立 4 个文本组件（下文用 A、B、C、D 代称），左右两侧分别代表打开书籍的左右两面，上下两层堆叠放置。
①B 沿旋转轴旋转 180 度。
②B 旋转时，D 会在右侧显示出来，作为书籍的下一页，此时 D 承载的内容要变为下一页的内容。
③B 旋转到左侧后，A 承载的内容变为 B 的内容。
④由于 A 和 B 互为镜像，所以 A 显示为 B 的内容后，需要以 A 的中间为轴旋转 180 度。
⑤B 重新旋转到右边，其承载的内容变为下一页的内容。
开发步骤
https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md/
https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/quick-start/arkts-prop.md/
@Component
struct BookCard{
// 为变量添加@Prop装饰器，用于接收父组件的动态传参
@Prop num:number
@Prop y_position:string
@Prop x_position:string
@Prop rotate_angle:number
build(){
Text(`${this.num}`)
.fontWeight(FontWeight.Bold)
.backgroundColor('#18183C')
.fontColor('white')
.fontSize(80)
.width('25%')
.height('30%')
.fontFamily('Monospace')
.textAlign(TextAlign.Center)
.borderRadius(20)
// 使用rotate属性控制旋转
.rotate({
x: 0,
y: 1,
z: 0,
angle: this.rotate_angle,
centerY: this.y_position,
centerX: this.x_position
})
}
}
②创建父组件框架
https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md/
https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md/
@Entry
@Component
struct BookAnimation {
build(){
Stack(){
Row(){
// 组件C
BookCard()
// 组件D
BookCard()
}
Row(){
// 组件A
BookCard()
// 组件B
BookCard()
}
// 添加两个页面间的分隔线
Divider()
.strokeWidth(5)
.color('white')
.height('26%')
.vertical(true)
}
.width('100%')
.height('100%')
.backgroundColor('#A4AE77')
}
}
③添加翻页动效
最后通过以下几点来为静态的组件添加动效：
根据实现思路章节的分析，在父组件中定义对应的变量，并在调用子组件时分别传入子组件。
自定义 book_animate 函数，在其中使用 animateTo 方法添加动画效果，同时控制动画的时长，以及动画过程中各元素状态的改变。
https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/quick-start/arkts-page-custom-components-lifecycle.md/
https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/apis/js-apis-timer.md/
@Entry
@Component
struct BookAnimation {
// 父组件变量设置，注意使用@State做状态管理
@State rotate_angle1:number = 0
@State rotate_angle2:number = 0
@State rotate_angle3:number = 0
@State num_before: number = 0;
@State num: number = 1;
@State num_next: number = 0;
@State y_center1:string = '50%'
@State x_center1:string = '50%'
@State y_center2:string = '0%'
@State x_center2:string = '0%'
// 在UI显示前，传入各项变量的具体值
aboutToAppear() {
// 通过setInterval函数每秒调用一次动画效果，实现连续翻页
setInterval(() => {
this.book_animate()
}, 1000)//函数调用周期要大于每次动画持续的时长
}
private book_animate(){
// 通过animateTo方法为组件添加动效，动效时长要小于setInterval函数调用周期
animateTo({ duration:700,onFinish:()=>{
// 动画结束时，A显示的数字跟B显示的数字相等
this.num_before = this.num
// 动画结束时，A以中心线为轴旋转180度
this.rotate_angle3 = 180
// 动画结束时，B返回至初始状态
this.rotate_angle1 = 0
// 动画结束时，B显示的数字加1
this.num = (this.num + 1) % 10
}
},()=>{
// 动画开始，B的旋转角度变为180度
this.rotate_angle1 = 180
// 动画开始，D的数字加1
this.num_next = this.num+1
})
}
build() {
Stack(){
Row(){
// C组件的引用配置
BookCard({num:0,rotate_angle:this.rotate_angle2,
y_position:this.y_center2,x_position:this.x_center2})
// D组件的引用配置
BookCard({num:this.num_next,rotate_angle:this.rotate_angle2,
y_position:this.y_center2,x_position:this.x_center2})
}
Row(){
// A组件的引用配置
BookCard({num:this.num_before,rotate_angle:this.rotate_angle3,
y_position:this.y_center1,x_position:this.x_center1})
// B组件的引用配置
BookCard({num:this.num,rotate_angle:this.rotate_angle1,
y_position:this.y_center2,x_position:this.x_center2})
}
Divider().strokeWidth(5).color('white').height('26%').vertical(true)
}.width('100%').height('50%').backgroundColor('#A4AE77')
}
}
通过以上步骤就可以实现翻页动效了。
完整代码
示例完整代码如下：
@Component
struct BookCard{
@Prop num:number
@Prop y_position:string
@Prop x_position:string
@Prop rotate_angle:number
build(){
Text(`${this.num}`)
.fontWeight(FontWeight.Bold)
.backgroundColor('#18183C')
.fontColor('white')
.fontSize(80)
.width('25%')
.height('30%')
.fontFamily('Monospace')
.textAlign(TextAlign.Center)
.borderRadius(20)
.rotate({
x: 0,
y: 1,
z: 0,
angle: this.rotate_angle,
centerY: this.y_position,
centerX: this.x_position
})
}
}
@Entry
@Component
struct BookAnimation {
@State rotate_angle1:number = 0
@State rotate_angle2:number = 0
@State rotate_angle3:number = 0
@State num_before: number = 0;
@State num: number = 1;
@State num_next: number = 0;
@State y_center1:string = '50%'
@State x_center1:string = '50%'
@State y_center2:string = '0%'
@State x_center2:string = '0%'
aboutToAppear() {
setInterval(() => {
this.book_animate()
}, 1000)
}
private book_animate(){
animateTo({ duration:700,onFinish:()=>{
this.num_before = this.num
this.rotate_angle3 = 180
this.rotate_angle1 = 0
this.num = (this.num + 1) % 10
}
},()=>{
this.rotate_angle1 = 180
this.num_next = this.num+1
})
}
build() {
Stack(){
Row(){
BookCard({num:0,rotate_angle:this.rotate_angle2,y_position:this.y_center2,
x_position:this.x_center2})
BookCard({num:this.num_next,rotate_angle:this.rotate_angle2,y_position:this.y_center2,
x_position:this.x_center2})
}
Row(){
BookCard({num:this.num_before,rotate_angle:this.rotate_angle3,y_position:this.y_center1,
x_position:this.x_center1})
BookCard({num:this.num,rotate_angle:this.rotate_angle1,y_position:this.y_center2,
x_position:this.x_center2})
}
Divider().strokeWidth(5).color('white').height('26%').vertical(true)
}.width('100%').height('50%').backgroundColor('#A4AE77')
}
}
总结
求分享
求点赞
求在看
文章引用微信公众号"OST开源开发者",如有侵权,请联系管理员删除!