設計流程？
後遺癥？
1.在作品中創建過渡效果。
2.在另壹個構圖中創建顯示效果。
3.出口？用計算機修改（圖片或照片）
4.優化GIF圖像
背景圖片
壹個透視效果模板？
壹、基本建設？
創建過渡效果構圖？
打開AE並合成>；新構圖(Cmd+N)，尺寸640*1136，幀數29，持續6s。
導入背景圖像，將圖像丟入構圖1，調整背景圖像的大小以適合畫布。
創建3個藍色方框(使用形狀層)，它們將從屏幕頂部落到屏幕底部，寬度為213、214和213px。三個方框上方的方框寬度為640px，輸入相應的文字。
用鋼筆畫壹個空心的雲圈和6片雪花。
第五步？
保存它，妳可以做壹些簡單的動態效果，即使妳沒有。因為ui不是很動態。妳也經常玩手機和電腦。看看網頁和手機上的動態效果，都是很基礎的東西。用ae最多三天就能學會90%以上的動態效果，只是說可能要花更多的時間才能熟練。
如何用AE在Dribbble和Behance上制作簡單的UI動態效果，妳可能見過很多用Gif來表達設計理念的UI作品。很多人想知道如何制作，如何更好更高效的表達自己的想法。顯然，動態呈現比靜態呈現更生動。在這篇文章中，我將教妳如何“動態地”自己的設計作品。
動態GIF展示UI作品，有以下優點:
1.顯示實際工作流程
2.使用過渡來顯示應用不同狀態的效果。
3.便於網絡共享。
工具
after effects SCS 6 orcc
PhotoshopCS6orCC
設計周期
後果
1.在作品中創建過渡效果。
2.在另壹個構圖中創建顯示效果。
出口
用計算機修改（圖片或照片）
4.優化GIF圖像
原始資料
倫敦的背景地圖
壹個手機透視效果模板
壹、基本建設
創建過渡效果合成
步驟1
打開AE並合成>；新構圖(Cmd+N)，尺寸640*1136，幀數29，持續6s。
第二步。
導入倫敦背景圖像，將圖像丟入構圖1，調整背景圖像大小以適合畫布。
第三步
創建3個藍色方框(使用形狀層)，它們將從屏幕頂部落到屏幕底部，寬度為213、214和213px。三個方框上方的方框寬度為640px，輸入相應的文字。
第四步
用鋼筆畫壹個空心的雲圈和6片雪花(輪廓略水，請見諒)
第五步
省省吧。
顯示合成
步驟1
創作作文2
尺寸1280x720幀號29，時間6s。
第二步。導入iPhone背景並調整其大小。
第三步
將構圖1拖動到構圖2中，這樣構圖2應該是這樣的:(P.S .我加了壹個背景層)
第四步。
選擇構圖1，效果>；Twist > Corner positioning，使復合1的四個角與模板中屏幕的四個角對齊。
？？？？？？？？？？？？？？？？？？？？？？？？？
第二，動態效果制作
接下來，我們來分解壹下動畫:
1.3藍盒子變長，不同時間掉落。
2.透明框架從底部向上移動，寬度始終保持不變。
3.4箱子到達目的地後，文字開始出現。藍色框中的文字放大+不透明到透明，透明框中的文字不透明到透明。
4.雲圖標，伴隨雪花。
5.出現雪花文字。
在形狀層中，可控制的屬性有縮放、位置、不透明度、描邊等。在本文的動態效果中，充分利用這些屬性隨時間的變化來創建動畫效果。
處理過程
首先我推薦兩個腳本插件Easeandwizz和RepostionAnchorPoint。
壹個方便做運動曲線，壹個方便設置錨點位置。
三個藍色的盒子
打開composite 1，選擇三個藍色框，設置如下。
備註:
1.最左邊和最右邊的藍框錨點位於上方(由錨點插件設置)。
2.從0-100%的比例
3.使用Easeandwizz選擇關鍵幀可以很容易地調整運動曲線。
透明框架
透明框的移動開始以很快的速度移動大部分位移，然後慢下來，慢慢移動到原來的位置。這些設置如下
備註:EaseandWizz中設置Quad+out的效果更流暢。
底部文本
備註:
1.三個藍色的盒子。當藍框接觸底部時，文字快速彈出，不透明度從0-& gt；100%，比例從0->；100%
2.透明框中的文字隨透明框移動(位置設置參考透明框)，但左邊的文字在前，右邊的文字在-4度後。請註意時間線中的設置。
雲團
當透明框的文本開始出現時，會出現雲。第壹，透明度範圍從0-100%。
比例壹開始是60%，當透明度達到100%時，就會從60%-->變化；100%
雪花點
當雲效果完成後，雪花點開始壹個個出現。
備註:
1.註意圓點會隨機向右移動，然後彈回，註意移動順序的調整。
2.這次也推薦Quad+Out。
3.註意點是壹個壹個出現的，所以透明度的變化要在時間軸上依次設置。
雪花文本效果
在這裏，蒙版運動被用來創造壹種效果，即雪文本逐漸出現。註意雪景的不透明度也會變化(蒙版的不透明度變化是多余的，請不要模仿)。
效果:
原作者的做法:
效果:
結果:
？？？？？？？？？？？？？？？？？？？？？？？？
第三，出口
方法1:AE+PS。
1.保存後，在AE >中合成:添加到渲染隊列
設置後，點渲染。
2.打開渲染的。mov(文件>；導入>視頻幀到層)
3.Cmd+Shift+S或file >；另存為網絡可用格式
備註:
1.永遠循環選項選擇
2.可以設置圖像尺寸
3.註意選擇Gif格式
方法2:LiceCap
如果不想用PS，可以先在AE裏調整畫布大小，然後用LiceCap，壹個把屏幕錄制成GIF的小軟件，非常方便，堪稱最好的Gif錄制軟件。(有多平臺版本)
錄制效果:
CocoaChina是全球最大的蘋果開發中文社區。官方微信每天定時推送各種精彩的R&D教程資源和工具，介紹app推廣營銷經驗，企業最新招聘外包信息，Cocos2d引擎和CocosStudio開發包最新動態和培訓信息。關註微信，第壹時間了解最新的產品和服務動態。微信在手，天下我有！
如何用ppt思維做壹個手機h5動態頁面HTML5頁面制作工具大致可以分為兩類:基於HTML5的網站工具和手機APP工具(當然還有壹些其他的，比如基於微信微信官方賬號的，下面會介紹)。
先大體說說我個人的感受。
1.基於HTML5的工具網站:功能強大，單個頁面可操作性強，可以完成各種頁面交互效果；但是有時候也會出現操作“失敗”的情況，比如上傳圖片失敗，點擊保存失敗，生成失敗等等。妳知道原因~
2.手機工具APP:相對於工具網站來說比較流暢，應用了大量模板，制作簡單快捷；但是，拘泥於現有的模板，單個頁面不會有很大的操作空間，從而無法實現DIY的交互效果。
我們來說說每壹個用過的工具。
基於HTML5的工具網站:
兔子展覽
優點:頁面的DIY程度高，動態效果也簡單方便實現，可以做出更任性的H5頁面。
缺點:屏幕界面大小無法調節，上傳的地圖會不成比例；生成後，屏幕頁面上會有各種大小的拉伸。
(此圖意在說明上傳圖片的大小是網站本身的默認大小，而不是圖片本身的大小，不利於用戶調整。)
可詳細編輯，單頁可操作性強。有兩種編輯模式:新手(帶模板)和高級(不帶模板)。翻頁效果比兔子展更多，模板更強大。
高度互動期刊
優點:最簡單易用的工具之壹，按照提示壹步壹步添加，最終4步生成微雜誌。與其他在線工具相比，更加穩定。
缺點:目前還沒有嘗試在單個頁面上做交互效果，也沒有找到打開pro功能的入口。
動畫師
優點:和網絡版flash壹樣，功能強大，可以制作HTML5動畫。適合有動畫基礎的人做演示。
缺點:需要動畫基礎；工作界面響應時間長；似乎只有twitter、臉書、google+和tumblr可以分享。
iSpring7
汕頭是壹款將PPT轉化為HTML5的工具，完美兼容PPT，可以制作Html5移動課件。
不過目前我只能連接VPN，然後用Safari打開網站鏈接。
秀佐
優點:布局簡單，生產速度快，寬帶穩定。
缺點:圖片和文字在各種屏幕上的顯示不太適應；您不能調整模板中文本編輯的位置。
移動工具應用程序:
在這壹頁的開頭
優點:模板質量高，模板編輯效率高，操作簡單快捷，效果和體驗在制作H5頁面的APP工具中比較突出。
缺點:單頁可操作性低，只能套用模板。
快速邀請，快速制作邀請。
優點:使用方便，省時高效，便於統計。
缺點:頁面簡單，只能選擇固有模板創建文字和添加圖片。
易啟秀的中小企業移動場景營銷經理
優點:應用模板，快速創建，用於企業介紹和產品推薦。具有強大的推廣統計和客戶管理功能。嗯，這裏要表揚壹個。
缺點:只能用模板，DIY程度低；統計數據的準確性需要進壹步確認。目前看來，可能存在數據缺失的現象(在小範圍的測試中，統計的數量少於應有的數量)。
微帖:通過微信微信官方賬號創建H5頁面。
優點:只需在手機微信官方賬號直接創建頁面，根據提示即可創建，無腦，方便快捷。
摘要
工具網站做的H5頁面更註重單個頁面的自定義交互方案，DIY程度高，相對耗時長，受帶寬因素限制，所以影響操作；
工具APP做的H5頁面更註重效率，目前都是套用模板，單個頁面DIY程度低，交互效果有限。