假期要開始了，很多學(xué)子都在為自己的前途奔波，今天小編也整理了很多關(guān)于上海h5動畫設(shè)計信息，以及大家所關(guān)心的這些問題H5動畫如何用，效果才好？，H5動畫設(shè)計利器 Animate CC，了解一下，干貨|H5動畫制作技巧，應(yīng)用之星教你如何設(shè)置H5頁面動畫效果??

1.H5動畫如何用，效果才好？

h5中的快閃效果只可以添加快閃功能嗎場景中的圖片出現(xiàn)又消失到底是怎么設(shè)置的呢？翻頁時候炫酷旋轉(zhuǎn)的背景是模板自帶的嗎？今天就給大家說一說設(shè)計師的那些秘密一個神奇的功能——動畫?。。赢?文字，可以做出快閃效果文字編輯好之后，點擊添加動畫重點在于延遲時間的設(shè)置1、第一個出現(xiàn)的文字上添加進入和退出動畫，時間、次數(shù)設(shè)置成1，延遲時間設(shè)置成0（可以按照自己的要求改時間）。2、第二個出現(xiàn)的文字動畫的時間、次數(shù)依然是1，延遲時間就需要設(shè)置成2，是第一個動畫進入和退出時間的總和。3、第三個文本延遲時間設(shè)置成4，其他的都設(shè)置都不變。按以上操作，文本就可以按照順序出現(xiàn)以及消失了，圖片的操作也和文字設(shè)置的方式一致。有些小伙伴，不想使用快閃組件，但是要達到快閃的效果，最好將動畫播放時間設(shè)置短一點，也可以是零點幾秒。那么以此代替就行了。預(yù)覽效果動畫+形狀（或者自己上傳的圖片），做出旋轉(zhuǎn)炫酷翻頁背景1、選擇形狀或者自己上傳的圖片，第一個添加動畫，只設(shè)置進入動畫，時間和次數(shù)都一樣2、第二個形狀的時間，次數(shù)都一樣，延遲時間增加間隔小一點。3、第三個形狀只需要增加延遲時間就好了。以此添加，預(yù)覽就會出現(xiàn)圖片或者形狀以此出現(xiàn)的效果，并且不會消失。想要背景豐富，動態(tài)更多，就可以添加動畫實現(xiàn)預(yù)覽效果圖PS:常用進入動畫：中心縮小，向左淡入、向上翻滾、打字機有趣的強調(diào)動畫：直線軌跡、曲線軌跡、閃爍

2.H5動畫設(shè)計利器 Animate CC，了解一下

每逢節(jié)假日或特殊時刻，雙微運營活動中的H5項目設(shè)計師們想必都經(jīng)歷了不少。你是否也有這樣的問題？在16年至17年的工作中，由于項目需求，需要產(chǎn)出許多的H5動畫頁面，初期我嘗試了很多工具和方法，多是借助第三方平臺，不過這些平臺都無法實現(xiàn)更生動和復(fù)雜的動畫效果。我也尋找過研發(fā)同事的幫助，請他們安照視頻效果來進行還原實現(xiàn)，卻發(fā)現(xiàn)還原效果總是不太滿意，中間的對接調(diào)整也是一個非常耗時的過程；迫于時間的壓力，我需要快速的制作完成這些H5動畫頁面，也就是在這段時期，我找到了Animate cc，曾經(jīng)的 Flash ；圖為 aminate 演示項目發(fā)布后的效果展示更新的已經(jīng)淡出我的視野很久，這次卻突然用驚艷的方式回到我的視線范圍；2015后整合了Edge Animate 與Flash ，adobe推出了合二為一后的 Animate CC，極大的增強了對HTML5的技術(shù)支持，作為設(shè)計者能方便的創(chuàng)建導(dǎo)出 Canvas、WebGL，SVG等動畫格式；使用后的效果：在找到了這款H5制作利器后，我和研發(fā)同事的效率變得極大的提高；我直接就能在animate中創(chuàng)作我心儀的動畫并設(shè)計一些簡單的交互，最后輸出Html/JS/精靈圖/json文件 給到我的同事，而他只需簡單的調(diào)試后就能直接發(fā)布….令我驚喜的是，這樣直觀的方式不但能讓動畫效果100%還原，并且整個文件都很小…圖為我17年時使用 aminate 制作的項目片段效果展示，里面很多的動畫第三方平臺是很難實現(xiàn)的，光靠研發(fā)同事還原也很花費時間的，而且我們當(dāng)時的時間真的很緊張...強大的Animate CC如果你是設(shè)計人員，需要制作H5動畫，真的沒有哪個工具比Animate CC功能更全面，使用更方便了。Animate CC 的動畫制作方式和原Flash時期大同小異，曾經(jīng)使用過的同學(xué)能很快就找回熟悉的感覺，相比市面其他平臺或軟件，所能制作的H5動畫效果及交互也更為精細(xì)復(fù)雜。新的 Animate還支持?jǐn)z像頭增強，可以在動畫中創(chuàng)建深度感。利用圖層創(chuàng)建深度，并在圖層深度中引入攝像頭以創(chuàng)建視差效果。例如，畫面游戲中的交互式攝像頭。熟悉ae的朋友是否已經(jīng)想到了很多玩法？如何加入交互頁面交互中的控制則依賴對“元件” 的 “動作”設(shè)置；如果不熟悉編寫代碼，可以使用操作向?qū)砑哟a，這樣無需編寫代碼，可以專注于動畫場景的編排導(dǎo)演。在我使用過程中，以下幾句是經(jīng)常會使用的：/* 某一幀播放*/ this.[parent.]play(); /* 某一幀暫停*/ this.[parent.]stop(); /* 跳到第X幀然后播放*/ this.[parent.](X); /* 跳到第X幀然后暫停*/ this.[parent.](X); /* 單擊以轉(zhuǎn)到 Web 頁*/ this.movieClip_1.("click", fl_); function fl_() { window.open(" } 項目的導(dǎo)出animate cc的canvas項目生成的主要內(nèi)容是js文件，最后輸出會包括Html文件，JS，精靈圖和json文件；在設(shè)計制作動畫的過程時的一些經(jīng)驗：1.可以在文檔設(shè)置中將 精靈圖尺寸調(diào)低、避免圖像過大帶來的加載卡頓；2.導(dǎo)出時排除一些無用的圖像資源；3.盡量利用“元件”做重復(fù)動畫；4.設(shè)計動畫背景時候，記得超出舞臺一定高度，以兼容一些機型屏幕尺寸；最后的最后，希望大家都能體驗使用起來，這樣市面上也會少一些 翻書似得 “PPT” 運營H5；

3.干貨|H5動畫制作技巧

近年來，H5頁面火爆整個移動互聯(lián)網(wǎng)，這些頁面的炫酷展現(xiàn)，都離不開動畫制作，而動效設(shè)計和制作早已成為一名合格設(shè)計師必需掌握的技能。目前，設(shè)計師制作H5頁面更多的是借助H5制作工具，本文將以H5制作工具為例和大家一起挖掘幾種常見的H5動畫制作方法。H5制作工具自帶的動畫功能目前市面上用的比較多的H5制作工具有木疙瘩、ih5等，本文將以木疙瘩為例給大家介紹。關(guān)鍵幀動畫：可以實現(xiàn)常見的動畫效果，比如位移、大小、旋轉(zhuǎn)、透明度改變等。變形動畫：可以實現(xiàn)形狀的改變和顏色過渡的動畫效果。進度動畫：可以實現(xiàn)進度走勢效果，圖表走勢圖和打字機效果用進度動畫來做比較理想。逐幀動畫：逐幀動畫就是在時間軸的每幀上逐幀繪制不同的內(nèi)容，使其連續(xù)播放而成動畫。優(yōu)點：逐幀動畫具有非常大的靈活性，幾乎可以表現(xiàn)任何想表現(xiàn)的內(nèi)容，而它類似于電影的播放模式，很適合于表演細(xì)膩的動畫。例如：人物或動物急劇轉(zhuǎn)身、頭發(fā)及衣服的飄動、走路、說話以及精致的3D效果等等。缺點：因為每一幀都不是不同的圖片，制作會增加負(fù)擔(dān)并且最終輸出的文件也很大，在移動互聯(lián)網(wǎng)上不利于傳播。鑒于以上優(yōu)缺點，大家在動畫制作過程中可以少量地添加逐幀動畫來表現(xiàn)一些細(xì)節(jié)。逐幀動畫的實現(xiàn)很簡單，但逐幀動畫的內(nèi)容制作，可能會讓一些同學(xué)頭痛，下面給大家羅列3種獲得逐幀動畫內(nèi)容的方法。手繪如果手繪能力較好的設(shè)計師可以將每一幀的畫面自己畫出來，當(dāng)然這樣工作量也會比較大從視頻里獲取如果看中里某個視頻里某段動畫效果，想用到項目當(dāng)中來，可以通過AE將視頻轉(zhuǎn)換成序列幀圖片，具體操作方法如下：將視頻文件導(dǎo)入到AE中，找到合成菜單--添加到渲染隊列--在面板里將格式改為“JPG“序列或者“PNG“序列--渲染出來即是一張張內(nèi)容不同的的靜態(tài)圖片。如果圖片太大的話，可以通過圖片壓縮工具來對圖片大小做進一步優(yōu)化。從GIF動畫里獲取如果看中的是GIF動畫里面的素材，同樣也可以將圖片獲取，需要先下載一個看圖軟件“2345看圖王“或者“7GIF“，可以將GIF圖里的每一幀圖片保存出來。GIF動畫GIF動畫的制作方法有很多種，可以通過PS來制作，也可以在AE中制作好視頻再導(dǎo)入到PS中轉(zhuǎn)成GIF動畫形式。GIF圖片擅長于制作細(xì)節(jié)的小動畫，位圖，優(yōu)勢在于“體型”小，制作成本低，GIF動畫常在H5動效里用做loading效果、熱門小標(biāo)簽等，所以，小的動畫可以用GIF來展現(xiàn)。視頻H5頁面中，很多效果其實是視頻，比如曾經(jīng)有一個標(biāo)題叫做“該新聞已被BMW快速刪除“寶馬案例，刷爆了整個微信朋友圈，如果不帶交互效果，用視頻全屏的方式來播放動畫也是有非常不錯的選擇。在H5制作工具中插入代碼實現(xiàn)動效很多H5制作工具，也支持插入代碼來輔助實現(xiàn)一些功能，以木疙瘩為例，點擊腳本工具可以插入代碼。比如做事件綁定，可以加入這樣一段代碼：mugeda.('',function(){});如果對前端有深入了解的設(shè)計師，也可以將制作的H5頁面從制作工具中導(dǎo)出為html文件格式，在源文件里面添加一些前端代碼，html5加上css3.0配合可以實現(xiàn)很多不錯的效果，比如：3D效果,svg和canvas繪圖動畫等。以上五種方法，系統(tǒng)全面地涵蓋了目前市面上常見的H5動畫制作的方法，理解了以上方法，也就理解了動畫制作的原理。在動畫制作的過程中，針對不同的動畫效果，你可以選擇最合適的動畫制作方法來實現(xiàn)。

4.應(yīng)用之星教你如何設(shè)置H5頁面動畫效果

“H5”，這個由HTML5簡化而來的詞匯，借由微信這個移動社交平臺，正在走進更多人的視野。本文聚焦于基于微信傳播的H5頁面的動畫設(shè)計，希望與大家進行交流探討。首先我們選擇H5頁面制作平臺，以“應(yīng)用之星”平臺為例。第一步：進入網(wǎng)站，注冊登錄，點擊“應(yīng)用制作”，進入制作頁面。第二步：選擇“高級模式”，點“＋”創(chuàng)建應(yīng)用，或者直接選擇模板使用。第三步：進入H5界面制作，根據(jù)你的需求選擇控件使用。其中文本控件、圖片控件、按鈕控件、視頻控件、圖形控件、圖組控件、表單控件、地圖控件、撥號控件和投票控件都能設(shè)置動畫。以“地圖控件”為例來講如何設(shè)置動畫。其中時間是指動畫持續(xù)播放的時間，比如你設(shè)置2秒，則播放2秒；延遲是指動畫延遲播放的時間，比如你設(shè)置了延遲播放2秒，那么打開這個頁面時，動畫在2秒后才開始播放。注意一下先設(shè)置動畫時間，再設(shè)置動畫方式。另外圖形控件和圖片控件，設(shè)置動畫時，若設(shè)置次數(shù)，則該動畫播放的次數(shù)；若勾選循環(huán)方式，則動畫效果無限循環(huán)，次數(shù)和循環(huán)只能選擇一個使用，不能同時使用。第四步：當(dāng)你一切制作好后，點擊“發(fā)布”，進入預(yù)覽頁面，WEB二維碼即生成的H5頁面。在預(yù)覽頁面可以看看設(shè)置的動畫效果，如果效果不好，點擊“返回”修改；如果效果好的話，直接用微信二維碼掃描分享至朋友圈。是不是很簡單？有需要的朋友可以試試！

以上都是我為大家細(xì)心準(zhǔn)備參考的，希望對你們有所幫助。