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

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

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