0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

如何在OpenHarmony上实现​翻页动效呢?

OpenHarmony技术社区 来源:OST开源开发者 2023-06-11 15:15 次阅读

翻页动效是应用开发中常见的动效场景,常见的如书籍翻页、日历翻页等。

本文就为大家举例讲解如何通过 ArkUI 提供的显示动画接口 animateTo 实现书籍翻页的效果。

效果呈现

本例最终实现效果如下:

39307cba-0826-11ee-962d-dac502259ad0.gif

环境要求

本例基于以下环境开发,开发者也可以基于其他适配的版本进行开发:

IDE:DevEco Studio 3.1 Beta1

SDK:Ohos_sdk_public 3.2.11.9 (API Version 9 Release)

实现思路

如图,分上下两层、左右两侧建立 4 个文本组件(下文用 A、B、C、D 代称),左右两侧分别代表打开书籍的左右两面,上下两层堆叠放置。

395d6fae-0826-11ee-962d-dac502259ad0.png

当 B 沿旋转轴旋转 180 度覆盖在 A 上时,就体现为翻页效果。一个翻页动作的完成包括以下几步:

B 沿旋转轴旋转 180 度。

B 旋转时,D 会在右侧显示出来,作为书籍的下一页,此时 D 承载的内容要变为下一页的内容。

B 旋转到左侧后,A 承载的内容变为 B 的内容。

由于 A 和 B 互为镜像,所以 A 显示为 B 的内容后,需要以 A 的中间为轴旋转 180 度。

B 重新旋转到右边,其承载的内容变为下一页的内容。

说明:C 用来占位,不需要做动作。连续重复上述动作即可实现连续翻页动效。

开发步骤

①创建文本组件

动效中用到了 4 个文本组件,因此可以先定义一个文本组件,然后对其进行重复调用。同时为文本组件添加 rotate 属性,用来控制组件的旋转。

由于各组件旋转的角度和旋转中心不同,需要父组件在调用时传入对应的参数,所以需要为对应变量添加 @Prop 装饰器,用来控制变量传递。

具体代码如下:

@Component
structBookCard{
//为变量添加@Prop装饰器,用于接收父组件的动态传参
@Propnum:number
@Propy_position:string
@Propx_position:string
@Proprotate_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
})
}
}

②创建父组件框架

由于文本组件分为上下两层,所以在父组件中采用 Stack 组件进行层叠布局。

同时使用 Divider 组件作为书籍两个页面间的分隔线。

具体代码如下:

@Entry
@Component
structBookAnimation{

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 方法添加动画效果,同时控制动画的时长,以及动画过程中各元素状态的改变。

在 aboutToAppear 方法中,使用 setInterval 方法重复调用 book_animate 函数,以实现连续翻页动效。

具体代码如下:

@Entry
@Component
structBookAnimation{
//父组件变量设置,注意使用@State做状态管理
@Staterotate_angle1:number=0
@Staterotate_angle2:number=0
@Staterotate_angle3:number=0
@Statenum_before:number=0;
@Statenum:number=1;
@Statenum_next:number=0;
@Statey_center1:string='50%'
@Statex_center1:string='50%'
@Statey_center2:string='0%'
@Statex_center2:string='0%'

//在UI显示前,传入各项变量的具体值
aboutToAppear(){
//通过setInterval函数每秒调用一次动画效果,实现连续翻页
setInterval(()=>{
this.book_animate()
},1000)//函数调用周期要大于每次动画持续的时长
}

privatebook_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
structBookCard{
@Propnum:number
@Propy_position:string
@Propx_position:string
@Proprotate_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
structBookAnimation{
@Staterotate_angle1:number=0
@Staterotate_angle2:number=0
@Staterotate_angle3:number=0
@Statenum_before:number=0;
@Statenum:number=1;
@Statenum_next:number=0;
@Statey_center1:string='50%'
@Statex_center1:string='50%'
@Statey_center2:string='0%'
@Statex_center2:string='0%'


aboutToAppear(){
setInterval(()=>{
this.book_animate()
},1000)
}

privatebook_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')
}
}

总结

OpenHarmony 当前提供了相对比较丰富的能力可以在制作动效时使用,基本可以满足日常动画的开发,比如平移、旋转、放大缩小、弹簧曲线、转场动画、三维动画等等。 大家可以根据业务需要组合使用,也欢迎大家将自己的经验分享出来,我们一起学习啦!





审核编辑:刘清

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • OpenHarmony
    +关注

    关注

    25

    文章

    3718

    浏览量

    16296

原文标题:OpenHarmony上实现​翻页动效

文章出处:【微信号:gh_834c4b3d87fe,微信公众号:OpenHarmony技术社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    LabVIEW实现波形图表的翻页显示有什么办法?

    各位好,我刚学LabVIEW不久,想请教下各位:LabVIEW中如何实现波形图表的翻页显示? 波形回放在波形图表控件中,怎样用控件或键盘操作来实现波形的翻页显示,比如在前面板
    发表于 03-29 11:08

    设计的这些设计流程你知道吗

    交互设计师想要认真和你聊聊设计
    发表于 02-25 06:39

    何在OLED上面播放

    何在OLED上面播放?如何去实现
    发表于 01-21 06:29

    何在RK3399 Android8.1实现APK静默安装功能

    何在RK3399 Android8.1实现APK静默安装功能?其测试过程是如何去实现
    发表于 02-15 07:01

    何在RK3568芯片上面运行OpenHarmony

    RK3568芯片有哪些功能?如何在RK3568芯片上面运行OpenHarmony
    发表于 03-02 08:13

    OpenHarmony标准设备应用开发笔记汇总

    何在标准设备运行一个最简单的 OpenHarmony 程序。2、如何在OpenHarmony实现
    发表于 03-28 14:19

    OpenHarmony 3.1 Beta版本关键特性解析——OpenHarmony图形框架

    绘制与渲染流程解决了跨窗口联动问题后,上面示例中桌面和壁纸模糊效果呈现时,也能同步看到壁纸的,如下:此外,OpenHarmony 图形栈从时间和空间提供了更丰富的
    发表于 04-13 18:24

    app图标openharmony的源码哪里实现的?

    openharmony点击一个app图标的之后,应用会从左上角一点点放大直至铺满屏幕;我想问一下这个是在openharmony的源码
    发表于 06-10 11:01

    华为图像服务场景Java示例代码

    简介 场景服务提供基础和高级,帮助您实现
    发表于 03-23 11:06 0次下载

    何在OpenHarmony开源代码基础实现数字管家开发宿舍全屋智能

    基于OpenAtom OpenHarmony(以下简称“OpenHarmony”)、数字管家开发宿舍全屋智能,实现碰一碰开门、碰一碰开灯、碰一碰开风扇以及烟感检测。因为各项目开发流程大体相似,本文主要以碰一碰开门为例介绍如
    的头像 发表于 08-26 09:55 1832次阅读

    在DAYU200实现OpenHarmony跳转拨号界面

    ,打电话是最常见的交流方式之一,那么如何在OpenAtom OpenHarmony(简称“OpenHarmony”)中进行电话服务相关的开发?今天我们可以一起来了解一下如何通过电话服
    的头像 发表于 10-17 22:05 719次阅读

    玩嗨OpenHarmony:基于OpenHarmony的ArkUI翻页时钟

    设备,用电脑动画的方式实现翻页时钟,也是一种特别的复古UI交互体验。 本项目岂在通过OpenHarmony的ArkUI框架,用TS扩展的声明式开发范式eTS,来实现
    的头像 发表于 12-05 20:15 1394次阅读

    何在OpenHarmony开发服务卡片

    本篇文章我们将分享如何在 OpenHarmony 开发服务卡片。
    的头像 发表于 04-10 11:12 1056次阅读

    OpenHarmony实现弹性的方法

    在动画开发场景中,经常用到弹性效果,尤其在拖拽某个对象时经常伴随弹性
    的头像 发表于 06-11 15:12 744次阅读
    在<b class='flag-5'>OpenHarmony</b><b class='flag-5'>上</b><b class='flag-5'>实现</b>弹性<b class='flag-5'>动</b><b class='flag-5'>效</b>的方法

    2.4G激光翻页笔方案,可实现多种功能,高性价比标准方案

    接收器插入计算机的USB接口,然后通过点击翻页对应按钮来实现翻页等功能。2.4G翻页笔在学校、事业单位、培训机构、商务交流等场合下广泛使
    的头像 发表于 05-24 16:04 699次阅读
    2.4G激光<b class='flag-5'>翻页</b>笔方案,可<b class='flag-5'>实现</b>多种功能,高性价比标准方案