HarmonyOS开发实战：ArkUI动画接口animateTo实现书籍翻页动效

最新推荐文章于 2024-07-25 21:53:41 发布
最新推荐文章于 2024-07-25 21:53:41 发布
阅读量1k 收藏 25
点赞数 12
分类专栏： HarmonyOS 鸿蒙 OpenHarmony 文章标签： 前端 html harmonyos 华为 鸿蒙 设计规范 鸿蒙开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dmzdams/article/details/140592942
版权
鸿蒙 同时被 3 个专栏收录
187 篇文章 4 订阅
订阅专栏
OpenHarmony
185 篇文章 0 订阅
订阅专栏
HarmonyOS
181 篇文章 2 订阅
订阅专栏

 场景介绍

翻页动效是应用开发中常见的动效场景，常见的如书籍翻页、日历翻页等。本文就为大家举例讲解如何通过ArkUI提供的显示动画接口animateTo实现书籍翻页的效果。

效果呈现

本例最终实现效果如下：

翻页动效示例图

环境要求

  • IDE：DevEco Studio 3.1 Beta1
  • SDK：Ohos_sdk_public 3.2.11.9 (API Version 9 Release)

实现思路

如图，分上下两层、左右两侧建立4个文本组件（下文用A、B、C、D代称），左右两侧分别代表打开书籍的左右两面，上下两层堆叠放置。 当B沿旋转轴旋转180度覆盖在A上时，就体现为翻页效果。一个翻页动作的完成包括以下几步：

  1. B沿旋转轴旋转180度。
  2. B旋转时，D会在右侧显示出来，作为书籍的下一页，此时D承载的内容要变为下一页的内容。
  3. B旋转到左侧后，A承载的内容变为B的内容。
  4. 由于A和B互为镜像，所以A显示为B的内容后，需要以A的中间为轴旋转180度。
  5. B重新旋转到右边，其承载的内容变为下一页的内容。

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

翻页动效

开发步骤

  1. 创建文本组件。

    动效中用到了4个文本组件，因此可以先定义一个文本组件，然后对其进行重复调用。同时为文本组件添加rotate属性，用来控制组件的旋转。 由于各组件旋转的角度和旋转中心不同，需要父组件在调用时传入对应的参数，所以需要为对应变量添加@Prop装饰器，用来控制变量传递。具体代码如下：

    @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
      })
  }
}

  2. 创建父组件框架。

    由于文本组件分为上下两层，所以在父组件中采用Stack组件进行层叠布局。同时使用Divider组件作为书籍两个页面间的分隔线。具体代码如下：

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

  3. 添加翻页动效。

    最后通过以下几点来为静态的组件添加动效：

    • 根据实现思路章节的分析，在父组件中定义对应的变量，并在调用子组件时分别传入子组件。
    • 自定义book_animate函数，在其中使用animateTo方法添加动画效果，同时控制动画的时长，以及动画过程中各元素状态的改变。
    • 在aboutToAppear方法中，使用setInterval方法重复调用book_animate函数，以实现连续翻页动效。 具体代码如下：
    @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')
  }
}

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

点击领取→【纯血版鸿蒙全套最新学习资料】（安全链接，放心点击）希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、（南向驱动、嵌入式等）鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

 鸿蒙（HarmonyOS NEXT）最新学习路线

​

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

HarmonyOS Next 最新全套视频教程

​

 《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

​

《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……​

《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

​

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

​

大厂面试必问面试题

​

鸿蒙南向开发技术

​

鸿蒙APP开发必备

​

鸿蒙生态应用开发白皮书V2.0PDF

​


请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结
总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，才能在这个变革的时代中立于不败之地。 

                   

代码中的爱马仕
关注
专栏目录
HarmonyOS开发：生命周期详解
软贱开发攻城狮
08-03 1万+
随着移动端操作系统的多样化发展，HarmonyOS作为华为推出的一款面向全场景的分布式操作系统，受到了业内外的广泛关注。其实HarmonyOS的设计和开发模式，与传统的移动端操作系统有着显著的区别，特别是在应用的生命周期管理上，它引入了新的设计理念来适应多种设备和使用场景。对于开发者而言，深入理解HarmonyOS的生命周期对于开发高效、稳定的应用至关重要，而且任何技术框架它的生命周期都是重中之重的。
【HarmonyOS NEXT应用开发】案例11：基于ArkUI现有能力实现自定义弹窗封装方案
最新发布
xzs51job的专栏
08-12 101
自定义弹窗是应用开发需要实现的基础功能，包括但不限于HarmonyOS开发者文档中定义的模态、半模态、Toast等形式，封装一个好用且和UI组件解耦的弹窗组件是开发者的高频诉求。在弹窗内容的Column容器中传入WrappedBuilder来实现动态的自定义弹窗内容。基于Navigation.Dialog的透明页面特性，可以用于实现弹窗效果。对于少量弹窗的实现，可以直接使用Navigation来进行路由跳转，参考。登录提示弹窗、全屏广告弹窗、网络请求与其他操作行为的提示、异常弹窗。
CSS3书本翻页动画翻书效果代码.zip
07-03
CSS3书本翻页动画翻书效果代码，纯CSS3代码，简单好看，翻书动画效果。
OpenHarmony实战开发-如何通过显示动画实现书籍翻页动效
m0_70749039的博客
05-22 798
翻页动效是应用开发中常见的动效场景，常见的如书籍翻页、日历翻页等。本文就为大家举例讲解如何通过ArkUI提供的显示动画接口animateTo实现书籍翻页的效果。
HarmonyOS讲解并演示 animateTo 动画效果
weixin_45966674的博客
01-13 1927
这里 我们调用 animateTo 动画效果 然后 第一个参数 是一个json 里面放动画参数 我们这里的参数是 duration 动画时长 毫秒单位 三千毫秒 等于 三秒。然后 第二个参数是一个箭头函数 里面写动画要做的事 我们将改变对齐方式的代码放进来。那么 这就很简单了 想改变它的位置 改 itemAlign 显然就可以了。我们点击后 它会立刻跑到末尾的位置 但可能会显得太快了 一下就跳过去了。它默认的这种速率 大家会感受到 刚开始 快 然后慢了 最后又开始快了。
翻页动画效果
weixin_30402343的博客
04-14 146
1 typedef enum : NSUInteger { 2 Fade = 1, //淡入淡出 3 Push, //推挤 4 Reveal, //揭开 5 MoveIn, //覆盖 ...
鸿蒙HarmonyOS实战-ArkUI动画（布局更新动画）
shudaoshanQAQ的博客
01-06 2139
动画是一种通过连续展示一系列静止的图像（称为帧）来创造出运动效果的艺术形式。它可以以手绘、计算机生成或其他各种形式呈现。在动画中，每一帧都具有微小的变化，当这些帧被快速播放时，人眼会产生视觉上的错觉，认为物体在运动。动画可以用来表达故事、观念、想法、情感或其他形式的艺术创作。它在电影、电视节目、广告、游戏和网页设计等领域中得到广泛应用。
【Harmony OS】【ArkUI】ets开发 图形与动画绘制
华为开发者联盟
08-02 1172
ets开发 图形与动画绘制
鸿蒙HarmonyOS实战-ArkUI动画（放大缩小视图）_鸿蒙实现图片放大缩小(1)
04-11 712
你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！// 配置Exchange类型的共享元素转场，共享元素id为"sharedImage1"// 配置Exchange类型的共享元素转场，共享元素id为"sharedImage1"// 配置Static类型的共享元素转场。// 点击小图时路由跳转至下一页面。// 点击图片时路由返回至上一页面。
HarmonyOS基于ArkUI绘制圣诞树的源码
12-17
源码里面详细的添加了注释和代码的规范性，学习完你可以更加轻松的学习HarmonyOS，我们还增加了：圣诞树上面的小猫和用户的交互，我们点击小猫（使用显示动画animateTo），它会进行躲藏起来，躲到圣诞树里面，来展示...
js常用常用翻页效果代码
08-19
js常用常用翻页效果代码js常用常用翻页效果代码
OpenHarmony实战开发-如何通过ArkUI提供的显示动画接口animateTo实现翻页效果。
2401_82546228的博客
04-16 928
翻页动效是应用开发中常见的动效场景，常见的有书籍翻页，日历翻页等。本例将介绍如何通过ArkUI提供的显示动画接口animateTo实现翻页的效果。
HarmonyOS 项目开发练习 「钢笔单词」 #3 首页、书架页、用户选项页 涉及弹性布局（FLEX）、用户首选项、关系型数据库
JayHsu的博客
06-29 599
​ 首页的重点是统计单词量的卡片，但是只实现了UI，实际上不能进行单词量统计。卡片上有一个日期选择器，卡片UI本身的颜色会根据单词量情况而改变，小于等于300为蓝色，否则为红色。卡片可以翻页，第二页设计用于记录背诵的单词总数和单日记录。​ 首页使用 Tabs 与 TabContent 实现不同子页面卡片的切换。Index.ets 构成整个应用程序核心页面的骨架``接下来是被 Index.ets 调用的各个页面卡片，这些页面卡片里面又各自包含了一些模块。HomeIndex.ets 构成首页``
Harmony应用开发——项目实战——图书管理系统
Creat_List的博客
03-27 1871
在这里，我们将着手开发一个图书管理系统，旨在帮助读者熟练运用关系型数据库（RelationalStore）。图书管理系统是一个常见的应用场景，涉及查看图书、修改图书、删除图书和添加图书等功能。通过这个项目，我们将学习如何利用常见的 UI 组件，并重点掌握关系型数据库（RelationalStore）的使用。图书管理系统是一个常见的应用，通过这个案例，我们将学习如何设计和开发一个完整的应用程序。用户可以浏览系统中存储的图书信息，包括书名、作者、出版年份等内容。
鸿蒙中显式动画animateTo和animation
m0_61426556的博客
07-25 937
animateTo({ duration: 2000 }, () => { // 这个可以包在点击事情里面。x: this.translateX, // 根据x轴去平移模态框。然后再根据x和Y轴 去平移模态框，在设置动画属性animation。duration: 2000, //动画的时长。duration: 2000, //动画的时长。我这里用的是两种属性，可以更直观的看出两种属性的差距。我这里首先用的是层叠布局先搭好架子。下面我们来看一下代码是怎么样做的。下面是点击头像显示模态框。
页面间转场动画
01-03 1282
两个页面间发生跳转，一个页面消失，另一个页面出现，这时可以配置各自页面的页面转场参数实现自定义的页面转场效果。效果写在pageTransition函数中，通过PageTransitionEnter和PageTransitionExit指定页面进入和退出的动画效果。上述接口定义了PageTransitionEnter和PageTransitionExit组件，可通过slide、translate、scale、opacity属性定义不同的页面转场效果。
基于鸿蒙系统读书app开发
qxf865618770的博客
11-21 824
支持翻页动画:仿真翻页、覆盖翻页、上下滚动翻页等翻页效果。支持页面定制:亮度调节、背景调节、字体大小调节 支持全屏模式(含有虚拟按键的手机)、音量键翻页 支持页面进度显示、页面切换、上下章切换。支持在线章节阅读、本地书籍查找。支持本地书籍加载到页面(支持本地书籍分章、加载速度快、耗费内存少)小说模块 (基于客户端本地爬虫对多个网站内容进行爬取,轮训多个站点,找到你喜欢的内容为目的)基于mvp架构进行代码布局,降低代码耦合度。采用 sql 数据库对数据进行存储。小说阅读提供的功能如下。
鸿蒙开发之有哪些动画效果（HarmonyOS鸿蒙开发基础知识）
iCloudEnd的博客
09-14 7220
鸿蒙开发之有哪些动画效果 动画是组件的基础特性之一，精心设计的动画使UI变化更直观，有助于改进应用程序的外观并改善用户体验。Java UI框架提供了数值动画（AnimatorValue）和属性动画（AnimatorProperty），并提供了将多个动画同时操作的动画集合（AnimatorGroup）。 数值动画（AnimatorValue） 属性动画（AnimatorProperty） 动画集合（AnimatorGroup） 数值动画（AnimatorValue） AnimatorValue数值从0到1
鸿蒙开发-新建Ability与使用image-animator实现图帧动画
BADAO_LIUMANG_QIZHI的博客
06-29 991
场景 鸿蒙开发-基础组件介绍及chart组件使用： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118333539 在上面学习了基础组件的使用流程后，下面介绍image-animator这个组件。 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 Ability Ability是应用所具备能力的抽象，也是应用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值