一種圖片動畫的實(shí)現(xiàn)方法
【技術(shù)領(lǐng)域】
[0001] 本發(fā)明涉及計(jì)算機(jī)圖形處理技術(shù)領(lǐng)域，特別涉及一種圖片動畫的實(shí)現(xiàn)方法。
【背景技術(shù)】
[0002] 目前，實(shí)現(xiàn)圖片的動畫技術(shù)主要包括關(guān)節(jié)動畫和幀動畫，關(guān)節(jié)動畫是用普通mesh 保存最初始的各頂點(diǎn)坐標(biāo)，以及一系列后續(xù)時(shí)刻所對應(yīng)的各骨骼的運(yùn)動矩陣，無需保存每 時(shí)刻的頂點(diǎn)數(shù)據(jù)，節(jié)省了大量存儲空間，但是其缺點(diǎn)也比較明顯，主要是在兩段骨骼交接 處，容易產(chǎn)生裂縫，從而影響動畫真實(shí)效果。幀動畫是在時(shí)間軸的每幀上逐幀繪制不同的內(nèi) 容，使其連續(xù)播放而構(gòu)成動畫效果，幀動畫具有非常大的靈活性，可以實(shí)現(xiàn)很多復(fù)雜的動畫 效果，它類似與電影的播放模式，較適合于表演細(xì)膩的動畫。但其也存在這如下缺點(diǎn)，即在 時(shí)間軸的每幀上逐幀繪制不同的內(nèi)容的同時(shí)需要大量圖片資源，因而動畫文件所占用的空 間特別大。

【發(fā)明內(nèi)容】

[0003] 本發(fā)明的目的在于提供一種圖片動畫的實(shí)現(xiàn)方法，以解決現(xiàn)有技術(shù)中關(guān)節(jié)動畫和 幀動畫在實(shí)現(xiàn)圖片動畫過程所存在的不足的問題。
[0004] 為解決上述技術(shù)問題，本發(fā)明提供一種圖片動畫的實(shí)現(xiàn)方法，所述圖片動畫的實(shí) 現(xiàn)方法包括：將圖片導(dǎo)入2D骨骼動畫編輯器，并在所述圖片中需要做動畫效果的部分添加 網(wǎng)格點(diǎn)；
[0005] 設(shè)定所述圖片在所述2D骨骼動畫編輯器中時(shí)間軸上的n個(gè)狀態(tài)，以得到對應(yīng)每個(gè) 圖片狀態(tài)的關(guān)鍵幀；
[0006] 移動所述網(wǎng)格點(diǎn)以使所述圖片變形順次歷經(jīng)所述圖片在所述2D骨骼動畫編輯器 中時(shí)間軸上的n個(gè)狀態(tài)，以得到n個(gè)關(guān)鍵幀的頂點(diǎn)位置坐標(biāo)及導(dǎo)入2D骨骼動畫編輯器的所 述圖片的圖片大小及圖片像素格式；
[0007] 利用插值算法根據(jù)所述n個(gè)關(guān)鍵幀的頂點(diǎn)位置坐標(biāo)，計(jì)算n個(gè)關(guān)鍵幀中每相鄰兩 個(gè)關(guān)鍵幀之間過渡的中間幀的頂點(diǎn)位置坐標(biāo)；
[0008] 根據(jù)所述n個(gè)關(guān)鍵幀的頂點(diǎn)位置坐標(biāo)、所有中間幀的頂點(diǎn)位置坐標(biāo)及導(dǎo)入2D骨骼 動畫編輯器的所述圖片的圖片大小及圖片像素格式，實(shí)現(xiàn)圖片動畫顯示效果。
[0009] 可選的，在所述的圖片動畫的實(shí)現(xiàn)方法中，移動所述網(wǎng)格點(diǎn)以使所述圖片變形順 次歷經(jīng)所述圖片在所述2D骨骼動畫編輯器中時(shí)間軸上的n個(gè)狀態(tài)的過程，所述2D骨骼動 畫編輯器生成了json文件，所述json文件記錄了所述n個(gè)關(guān)鍵幀的頂點(diǎn)位置坐標(biāo)。
[0010] 可選的，在所述的圖片動畫的實(shí)現(xiàn)方法中，移動所述網(wǎng)格點(diǎn)以使所述圖片變形順 次歷經(jīng)所述圖片在所述2D骨骼動畫編輯器中時(shí)間軸上的n個(gè)狀態(tài)的過程，所述2D骨骼動 畫編輯器還生成了atlas文件，所述atlas文件記錄所述圖片動畫所需的導(dǎo)入2D骨骼動畫 編輯器的所述圖片的圖片大小及像素格式。
[0011] 可選的，在所述的圖片動畫的實(shí)現(xiàn)方法中，通過調(diào)整所述2D骨骼動畫編輯器中的 貝塞爾曲線以控制所述n個(gè)關(guān)鍵幀中相鄰兩個(gè)關(guān)鍵幀之間的差值，以實(shí)現(xiàn)各關(guān)鍵幀之間的 平滑過渡。
[0012] 可選的，在所述的圖片動畫的實(shí)現(xiàn)方法中，所述插值算法為線性插值算法。
[0013] 可選的，在所述的圖片動畫的實(shí)現(xiàn)方法中，所述插值算法為內(nèi)在形狀插值算法。 [0014] 可選的，在所述的圖片動畫的實(shí)現(xiàn)方法中，所述插值算法為仿射變換插值算法。
[0015] 在本發(fā)明所提供的圖片動畫的實(shí)現(xiàn)方法中，僅在圖片中需要做動畫效果的部分添 加網(wǎng)格點(diǎn)，通過移動所述網(wǎng)格點(diǎn)以使所述圖片變形順次歷經(jīng)所述圖片在所述2D骨骼動畫 編輯器中時(shí)間軸上的n個(gè)狀態(tài)，以得到n個(gè)關(guān)鍵幀的頂點(diǎn)位置坐標(biāo)及導(dǎo)入2D骨骼動畫編輯 器的所述圖片的圖片大小及圖片像素格式，后續(xù)僅需要連續(xù)播放n個(gè)關(guān)鍵幀的頂點(diǎn)位置坐 標(biāo)及導(dǎo)入2D骨骼動畫編輯器的所述圖片的圖片大小及圖片像素格式，就可實(shí)現(xiàn)圖片動畫 的顯示，整個(gè)制作過程僅需一張圖片，減少了其在動畫文件中所占用的空間，從而獲得了更 加逼真，生動的動畫效果。
【附圖說明】
[0016] 圖1是本發(fā)明一實(shí)施例中圖片動畫的實(shí)現(xiàn)方法的步驟流程圖。
【具體實(shí)施方式】
[0017] 以下結(jié)合附圖和具體實(shí)施例對本發(fā)明提出的圖片動畫的實(shí)現(xiàn)方法作進(jìn)一步詳細(xì) 說明。根據(jù)下面說明和權(quán)利要求書，本發(fā)明的優(yōu)點(diǎn)和特征將更清楚。需說明的是，附圖均采 用非常簡化的形式且均使用非精準(zhǔn)的比例，僅用以方便、明晰地輔助說明本發(fā)明實(shí)施例的 目的。
[0018] 圖1是本發(fā)明一實(shí)施例中圖片動畫的實(shí)現(xiàn)方法的步驟流圖，如圖1所示，所述的圖 片動畫的實(shí)現(xiàn)方法包括：
[0019] 首先，執(zhí)行步驟S1，將圖片導(dǎo)入2D骨骼動畫編輯器，并在所述圖片中需要做動畫 效果的部分添加網(wǎng)格點(diǎn)；對于圖片來說實(shí)現(xiàn)動畫效果，可以根據(jù)需要實(shí)現(xiàn)動畫效果的部分 進(jìn)行添加網(wǎng)格點(diǎn)，減少了動畫制作過程中的部分工作量，滿足實(shí)際需求。
[0020] 接著，執(zhí)行步驟S2,設(shè)定所述圖片在所述2D骨骼動畫編輯器中時(shí)間軸上的n個(gè)狀 態(tài)，以得到對應(yīng)每個(gè)圖片狀態(tài)的關(guān)鍵幀；
[0021] 網(wǎng)格點(diǎn)允許你在矩形邊界內(nèi)定義多邊形，這將提高最終紋理貼圖集的空間使用 率，因?yàn)樵诙噙呅瓮獾南袼貙⒈缓雎缘?，這種優(yōu)化對移動設(shè)備來特別重要。網(wǎng)格的另外一個(gè) 功能就是支持圖片自由變形（FFD)，設(shè)置初始狀態(tài)圖像的頂點(diǎn)，適當(dāng)網(wǎng)格點(diǎn)數(shù)會使圖片的動 畫效果更細(xì)膩。這里的圖片自由變形FFD可以允許通過移動網(wǎng)格點(diǎn)來變形圖片。FFD能實(shí) 現(xiàn)網(wǎng)格的拉伸、擠壓、彎曲、反彈，等一些矩形圖片無法實(shí)現(xiàn)的功能。
[0022] 接著，執(zhí)行步驟S3,移動所述網(wǎng)格點(diǎn)以使所述圖片變形順次歷經(jīng)所述圖片在所述 2D骨骼動畫編輯器中時(shí)間軸上的n個(gè)狀態(tài)，以得到n個(gè)關(guān)鍵幀的頂點(diǎn)位置坐標(biāo)及導(dǎo)入2D骨 骼動畫編輯器的所述圖片的圖片大小及圖片像素格式；
[0023] 具體的，移動所述網(wǎng)格點(diǎn)以使所述圖片變形順次歷經(jīng)所述圖片在所述2D骨骼動 畫編輯器中時(shí)間軸上的n個(gè)狀態(tài)的過程，所述2D骨骼動畫編輯器生成了json文件及atlas 文件，所述json文件記錄了所述n個(gè)關(guān)鍵幀的頂點(diǎn)位置坐標(biāo)；所述atlas文件記錄所述圖 片動畫所需的導(dǎo)入2D骨骼動畫編輯器的所述圖片的圖片大小及像素格式。這里，在2D骨骼 動畫編輯器中時(shí)間軸上設(shè)定圖片n個(gè)狀態(tài)的過程，也是將動畫的播放劃分為n時(shí)間節(jié)點(diǎn)，從 而得到n個(gè)關(guān)鍵幀，例如第一個(gè)時(shí)間節(jié)點(diǎn)到第二時(shí)間節(jié)點(diǎn)過程中，圖片狀態(tài)的變換對應(yīng)的 就是n個(gè)關(guān)鍵幀中第一關(guān)鍵幀到第二關(guān)鍵幀的動畫播放過程。這里第一關(guān)鍵幀為圖片的初 始狀態(tài)，在第二個(gè)時(shí)間節(jié)點(diǎn)上拖動圖片的網(wǎng)格點(diǎn)，圖片狀態(tài)改變（圖片變形），得到第二關(guān) 鍵幀，依次類推，設(shè)置第2~n個(gè)時(shí)間節(jié)點(diǎn)圖片狀態(tài)，得到相應(yīng)的關(guān)鍵幀，需要說明的是，本 實(shí)施例中，在所述圖片中需要做動畫效果的部分添加網(wǎng)格點(diǎn)的圖片狀態(tài)對應(yīng)第一關(guān)鍵幀， 其他的關(guān)鍵幀都是通過對圖片中的網(wǎng)格點(diǎn)拖動，即圖片變形得到。
[0024] 接著，執(zhí)行步驟S4,利用插值算法根據(jù)所述n個(gè)關(guān)鍵幀的頂點(diǎn)位置坐標(biāo)，計(jì)算n個(gè) 關(guān)鍵幀中每相鄰兩個(gè)關(guān)鍵幀之間過渡的中間幀的頂點(diǎn)位置坐標(biāo)；
[0025] 接著，執(zhí)行步驟S5,根據(jù)所述n個(gè)關(guān)鍵幀的頂點(diǎn)位置坐標(biāo)、所有中間幀的頂點(diǎn)位置 坐標(biāo)及導(dǎo)入2D骨骼動畫編輯器的所述圖片的圖片大小及圖片像素格式，實(shí)現(xiàn)圖片動畫顯 示效果。
[0026] 實(shí)際上播放中間狀態(tài)圖片的過程是通過在程序中載入json文件，獲取json文件 中記錄的n個(gè)關(guān)鍵幀對應(yīng)的頂點(diǎn)位置坐標(biāo)，之后根據(jù)插值算法計(jì)算獲得n個(gè)關(guān)鍵幀中相鄰 兩個(gè)關(guān)鍵幀之間過渡的中間幀所對應(yīng)的頂點(diǎn)位置坐標(biāo)，播放時(shí)調(diào)用導(dǎo)入2D骨骼動畫編輯 器的所述圖片的圖片大小及圖片像素格式，完美實(shí)現(xiàn)圖片的動畫顯示效果。
[0027] 實(shí)現(xiàn)圖片動畫顯示的過程的程序如下：
【主權(quán)項(xiàng)】
1. 一種圖片動畫的實(shí)現(xiàn)方法，其特征在于，包括： 將圖片導(dǎo)入2D骨骼動畫編輯器，并在所述圖片中需要做動畫效果的部分添加網(wǎng)格點(diǎn)； 設(shè)定所述圖片在所述2D骨骼動畫編輯器中時(shí)間軸上的n個(gè)狀態(tài)，以得到對應(yīng)每個(gè)圖片 狀態(tài)的關(guān)鍵幀； 移動所述網(wǎng)格點(diǎn)以使所述圖片變形順次歷經(jīng)所述圖片在所述2D骨骼動畫編輯器中時(shí) 間軸上的n個(gè)狀態(tài)，以得到n個(gè)關(guān)鍵幀的頂點(diǎn)位置坐標(biāo)及導(dǎo)入2D骨骼動畫編輯器的所述圖 片的圖片大小及圖片像素格式； 利用插值算法根據(jù)所述n個(gè)關(guān)鍵幀的頂點(diǎn)位置坐標(biāo)，計(jì)算n個(gè)關(guān)鍵幀中每相鄰兩個(gè)關(guān) 鍵幀之間過渡的中間幀的頂點(diǎn)位置坐標(biāo)； 根據(jù)所述n個(gè)關(guān)鍵幀的頂點(diǎn)位置坐標(biāo)、所有中間幀的頂點(diǎn)位置坐標(biāo)及導(dǎo)入2D骨骼動畫 編輯器的所述圖片的圖片大小及圖片像素格式，實(shí)現(xiàn)圖片動畫顯示效果。
2. 如權(quán)利要求1所述的圖片動畫的實(shí)現(xiàn)方法，其特征在于，移動所述網(wǎng)格點(diǎn)以使所述 圖片變形順次歷經(jīng)所述圖片在所述2D骨骼動畫編輯器中時(shí)間軸上的n個(gè)狀態(tài)的過程，所述 2D骨骼動畫編輯器生成了json文件，所述json文件記錄了所述n個(gè)關(guān)鍵幀的頂點(diǎn)位置坐 標(biāo)。
3. 如權(quán)利要求1所述的圖片動畫的實(shí)現(xiàn)方法，其特征在于，移動所述網(wǎng)格點(diǎn)以使所述 圖片變形順次歷經(jīng)所述圖片在所述2D骨骼動畫編輯器中時(shí)間軸上的n個(gè)狀態(tài)的過程，所述 2D骨骼動畫編輯器還生成了atlas文件，所述atlas文件記錄所述圖片動畫所需的導(dǎo)入2D 骨骼動畫編輯器的所述圖片的圖片大小及像素格式。
4. 如權(quán)利要求1所述的圖片動畫的實(shí)現(xiàn)方法，其特征在于，通過調(diào)整所述2D骨骼動畫 編輯器中的貝塞爾曲線以控制所述n個(gè)關(guān)鍵幀中相鄰兩個(gè)關(guān)鍵幀之間的差值，以實(shí)現(xiàn)各關(guān) 鍵幀之間的平滑過渡。
5. 如權(quán)利要求1~4中任一項(xiàng)所述的圖片動畫的實(shí)現(xiàn)方法，其特征在于，所述插值算法 為線性插值算法。
6. 如權(quán)利要求1~4中任一項(xiàng)所述的圖片動畫的實(shí)現(xiàn)方法，其特征在于，所述插值算法 為內(nèi)在形狀插值算法。
7. 如權(quán)利要求1~4中任一項(xiàng)所述的圖片動畫的實(shí)現(xiàn)方法，其特征在于，所述插值算法 為仿射變換插值算法。
【專利摘要】本發(fā)明提供了一種圖片動畫的實(shí)現(xiàn)方法，僅在圖片中需要做動畫效果的部分添加網(wǎng)格點(diǎn)，通過移動所述網(wǎng)格點(diǎn)以使所述圖片變形順次歷經(jīng)所述圖片在所述2D骨骼動畫編輯器中時(shí)間軸上的n個(gè)狀態(tài)，以得到n個(gè)關(guān)鍵幀的頂點(diǎn)位置坐標(biāo)及導(dǎo)入2D骨骼動畫編輯器的所述圖片的圖片大小及圖片像素格式，后續(xù)僅需要連續(xù)播放n個(gè)關(guān)鍵幀的頂點(diǎn)位置坐標(biāo)及導(dǎo)入2D骨骼動畫編輯器的所述圖片的圖片大小及圖片像素格式，就可實(shí)現(xiàn)圖片動畫的顯示，整個(gè)制作過程僅需一張圖片，減少了其在動畫文件中所占用的空間，從而獲得了更加逼真，生動的動畫效果。
【IPC分類】G06T13-80
【公開號】CN104700444
【申請?zhí)枴緾N201510106792
【發(fā)明人】余澄丹
【申請人】上海鴻利數(shù)碼科技有限公司
【公開日】2015年6月10日
【申請日】2015年3月10日