目錄
背景
愿景
效果
頁面加載
選擇背景音樂
選擇信封和信紙
寫下你想說的話
二維碼頁面
預覽效果
技術難點
信封打開影片
背景音樂和圖示行為一致性
結語
背景
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，
結語
如果大家想看原始碼，請在評論區里留言~
最后祝福大家情人節能用創意打動自己的心上人，過一個難忘的情人節！有情人終成眷屬~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/258813.html
標籤：其他
上一篇：UnityShader20.1：CommandBuffer初見（下）
下一篇：c語言 最簡版 貪吃蛇 小游戲