1.用原創(chuàng)手繪方式講故事
1.設計風格的定性
2.人物形象細節(jié)的推導
3.一個簡單的故事
2.3D文字設計在H5頁面中的的靈活使用
1.確立方案。
2.封面視覺的確立
3.最后設計LOADING頁
3.設計建議
H5動畫按照功能分成3大類
1.講故事類
由用戶觸發(fā)講述一個遵循通用設計原則（主體人物、視差傳達空間感）的故事
//用戶交互不局限點擊，還可以搖一搖昨稼，抹一抹等
2.強調(diào)類
//通過動靜對比把用戶注意力集中在特定元素辱揭，達到傳遞信息的目的
3.反饋類
//針對用戶操作或頁面狀態(tài)的反饋
2.動畫實現(xiàn)方式
1.css動畫
//能夠?qū)崿F(xiàn)2D/3D位移野蝇、縮放、顏色和透明度變換以及簡單的濾鏡效果（模糊）陈醒。體積小辩恼，效率高是優(yōu)先考慮的動畫實現(xiàn)方式
2.逐幀動畫
//以GIF圖或JPG/PNG序列的格式呈現(xiàn)，還原度高谓形，可以模擬形變效果灶伊，但體積大，更適合展示時長較短寒跳，面積較小的可循環(huán)動畫
3.CSS動畫主要樣式
1.位移動畫（translate）
//因為位置變化而產(chǎn)生的動畫稱為位移動畫
2.旋轉(zhuǎn)動畫(roate)
//因為角度的變化而產(chǎn)生的動畫稱為旋轉(zhuǎn)動畫
3.縮放動畫（scale）
//因為大小的變化而產(chǎn)生的動畫稱為縮放動畫聘萨，其中又分等比縮放和非等比縮放
4.形變動畫（skew）
//因為傾斜的變化而產(chǎn)生的動畫稱為形變動畫
5.css可以拓展為3D的樣式
5.CSS動畫的緩動曲線
//某些屬性（位置、大型）會隨著時間發(fā)生變化米辐，這種變化可以用緩動曲線表示
1.線性（無緩動）
//單位時間內(nèi)勻速運動的動畫軌跡胸完。其特點是動畫速度平均無變化,可視覺感受比較僵硬
//是最為基礎的動畫運動軌跡
2.加速/減速
//單位時間內(nèi)加速或減速運動的動畫軌跡，
//其特點是物體速度隨著時間變化而產(chǎn)生速度的運動變化翘贮，可以使動畫視覺效果柔化赊窥，顯得優(yōu)雅
3.彈性曲線
//在單位時間內(nèi)呈若干回彈運動的動畫曲線
//特點是動畫效果通過多次往復的運動實現(xiàn)。
6.技術(shù)實現(xiàn)角度談H5頁面設計的幾個注意事項
1.不同屏幕尺寸的適配
2.背景層和內(nèi)容層的分離
//若果頁面中需要將每個元素都可以點擊狸页，如果這些元素與背景層是融合在一起的锨能，那么雖然可以做到在不同屏幕下背景圖的自適應，
//但我們的點擊區(qū)域可能會和對應的背景區(qū)域不重疊芍耘，甚至偏離址遇。
//解決方案：我們將背景層和可操作的元素分離出來，將每一個可點擊元素獨立出來斋竞，便不會出現(xiàn)這問題了倔约。
3.橫屏和豎屏的適配
4.動態(tài)的選擇
//1.盡量去除不必要的動畫
//2.盡量使用簡單動畫
//3.同時進行的動畫盡量少
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
