HarmonyOS - 基于ArkUI（JS）实现信件弹出效果

HarmonyOS - 基于ArkUI（JS）实现信件弹出效果

作者：罗晓纯 2022-09-21 14:51:21系统 OpenHarmony 可别觉得书信是一个过时的东西，它可是80后的情怀，90后的回忆，00后的新宠，是经典的代名词。今天就想实现把这些古老的元素融入到新时代的产物当中。

​​想了解更多关于开源的内容，请访问：​​

​​51CTO开源基础软件社区​​

​​https://ost.51cto.com​​

前言

自从大家使用QQ、微信、邮件等网络平台交流以后，大家对纸这种介质和书信这种通讯方式可能都比较陌生了。可别觉得书信是一个过时的东西，它可是80后的情怀，90后的回忆，00后的新宠，是经典的代名词。今天就想实现把这些古老的元素融入到新时代的产物当中。

项目说明

工具：DevEc Studio 3.0 Beta3主要用到知识：animation，Options，keyframes官方API链接：​​动画效果​​

效果展示

实现原理

信件由信封上部分、信封主体和信纸三部分组成，首先通过css实现将三个部分组合成信封的样式，接下来根据animation组件方法中的播放或取消方法来实现信件弹出或收回的动画效果，并在信件展开的同时，使用定时器实现模拟读取文字的效果。

实现步骤

调整信封上下两个部分的位置，并调整信封和信纸三个部分的层级。在点击信件之后，通过id属性标识获取组件对象并调用animate组件方法，给不同id对象调用对应的动画方法。对信封两个部分传入展开后的新位置，同时传入信纸新的height值和bottom值。使用定时器实现模拟读文字效果判断是折叠信封时，调用animate组件的cancel（）方法，实现信封收回的效果。

使用到的官方 API

Options属性说明。

参数

类型

默认值

说明

duration

number

0

指定当前动画的运行时长（单位毫秒）。

easing

string

linear

描述动画的时间曲线，支持类型见表4 easing有效值说明。

delay

number

0

设置动画执行的延迟时间（默认值表示无延迟）。

iterations

number | string

1

设置动画执行的次数。
number表示固定次数，Infinity枚举表示无限次数播放。

direction

string

normal

指定动画的播放模式：
normal：动画正向循环播放；
reverse：动画反向循环播放；
alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放；
alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。

fill

string

none

指定动画开始和结束的状态：
none：在动画执行之前和之后都不会应用任何样式到目标上。
forwards：在动画结束后，目标将保留动画结束时的状态（在最后一个关键帧中定义）。
backwards6+：动画将在animation-delay期间应用第一个关键帧中定义的值。当animation-direction为"normal"或"alternate"时应用from关键帧中的值，当animation-direction为"reverse"或"alternate-reverse"时应用to关键帧中的值。
both：动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。

keyframes 属性说明。

属性

类型

说明

frames

Array