?

目录

?

背景

愿景

效果

页面加载

选择背景音乐

选择信封和信纸

写下你想说的话

二维码页面

预览效果

技术难点

信封打开动画

背景音乐和图标行为一致性

结语

---

背景

2.14就是情人节了，不知道各位读（直）者（男）想到了什么样的礼物，或者是还没有女盆友。。

想来和女盆友在一起已经五年多了，想当年没少给她写情书。尽管后来这一个习惯断了，但是情书这种形式还是很有意义。现在作为一名理工男，想用技术来实现一个电子情书。我给这个项目起了一个挺浪漫的名字：一纸情书。实际上这个项目是去年疫情期间，我和女盆友异地，我花了一天时间做出来送给她的，她还挺喜欢的。

一纸情书链接：https://railwayhs.cn/loveletter

愿景

我希望的效果是用H5的动画形式来表现情书信封的打开和弹出，另外需要自动播放背景音乐。分享的形式我是用二维码表现，情书内容也都放进了链接参数，做了编码。

如果有必要的话，后期会开源出来。欢迎沟通技术细节~

效果

页面加载

页面加载是用来缓存图片资源的，这颗心是会跳动的~，这样对象不会觉得等太久太无聊，嘿嘿

选择背景音乐

背景音乐有三首可选，都是我的偶像力宏的情歌，选中后点击下一步。

选择信封和信纸

这里我做了三种信纸和两种信封，样式少了点，但是做起来确实有点费时。选好后点击下一步，也可点击上一步重选背景音乐。

写下你想说的话

有三部分需要填写，当然少填也并不会报错。这里对字数做了限制，因为这里的文字会作为url的参数，生成二维码，如果子数太多，二维码会非常复制，不容易识别。写好后点击生成链接。

二维码页面

可以长按二维码保存，然后发给心仪的另一半~同时，你也可以预览情书的效果~

预览效果

技术难点

信封打开动画

整个H5的动画都是用css来实现的，js仅仅控制添加和移除class的时间点。

首先需要将信封拆分为3部分：信封底、信封顶和信封头，三者的z-index不同，依次增大。三部分需要基于同一个父容器，由父容器进行平移，翻开的动画是信封头的一个3d翻转动画，通过rotate3d属性来实现。

这里有两个注意点，就是信封打开后，信封头的z-index需要比信封中的信纸小。否则信纸滑出时信封头会盖住信纸。

第二点是父容器移动过程中信纸需要缩小体积，然后当信封到达页面底部时，信纸体积恢复。信封头打开后，信纸滑出。

需要注意不同动画的执行开始时间，这样才能保证动画流畅。

背景音乐和图标行为一致性

背景音乐是用uniapp的audiocontext对象实现，其play和stop属性可以控制背景音乐的播放和暂停。

而图标的转动动画，默认就是animation的无限执行，在点击暂停后，添加style animation-play-state: paused;可以暂停动画，移除后动画可以继续进行。具体细节参考https://blog.csdn.net/lyandgh/article/details/104080827。

结语

如果大家想看源码，请在评论区里留言~

最后祝福大家情人节能用创意打动自己的心上人，过一个难忘的情人节！有情人终成眷属~