TW201730846A - 色彩補間動畫的實現方法和裝置 - Google Patents

Abstract

本發明提供一種色彩補間動畫的實現方法，所述色彩補間動畫的展示區域具有重疊的兩個圖層，其中一個圖層的透明度為不透明，另一個圖層的透明度為完全透明，所述方法包括：在不透明圖層顯示起點填充方案，在完全透明圖層顯示終點填充方案；將不透明圖層的透明度逐漸變化為完全透明，同時將完全透明圖層的透明度逐漸變化為完全不透明。透過本發明的技術方案，不論填充方案是否複雜，都能夠由軟體自動實現平滑自然的動畫效果，無需設計人員的額外工作，提高了動畫實現的效率。

Description

色彩補間動畫的實現方法和裝置

本發明係關於影像處理技術領域，尤其係關於一種色彩補間動畫的實現方法和裝置。

動畫包括逐幀動畫和補間動畫，逐幀動畫是在時間軸的每幀上逐幀繪製不同的內容，連續播放這些幀可以形成動畫；補間動畫是在已知動畫的起始和結束畫面的基礎上，由軟體自動產生動畫的中間部分，省去了中間部分複雜的製作過程。

色彩補間動畫是補間動畫的一種，指的是某個區域的填充色彩隨時間變化而形成動畫效果。色彩補間動畫可以單獨使用，也可以與其他補間動畫(如填充區域的形狀、位移、縮放、旋轉等補間動畫)相結合，形成更為複雜的動畫效果。

現有技術提供了將某個展示區域的填充色彩，從第一種純色逐漸變換為第二種純色的動畫實現，具體而言，通常是以一定的規則來逐漸將填充色彩的色值，從第一種純色的色值變換為第二種純色的色值。但是對於非純色的複 雜填充方案，如具有漸變、紋理、圖案等填充效果的填充方案，由於展示區域的各個像素點的色值大多不相同，並且在色值改變時需要相互配合，才能展現出協調的顏色效果，按照現有技術中變化色值的方式，往往會出現突兀、生硬的動畫過程，效果很差，而需要設計人員提供動畫中間部分的填充方案，工作量相當大，動畫實現的效率太低。

有鑑於此，本發明提供一種色彩補間動畫的實現方法，所述色彩補間動畫的展示區域具有重疊的兩個圖層，其中一個圖層的透明度為不透明，另一個圖層的透明度為完全透明，所述方法包括：在不透明圖層顯示起點填充方案，在完全透明圖層顯示終點填充方案；將不透明圖層的透明度逐漸變化為完全透明，同時將完全透明圖層的透明度逐漸變化為完全不透明。

本發明還提供了一種色彩補間動畫的實現裝置，所述色彩補間動畫的展示區域具有重疊的兩個圖層，其中一個圖層的透明度為不透明，另一個圖層的透明度為完全透明，所述裝置包括：起點終點顯示單元，用於在不透明圖層顯示起點填充方案，在完全透明圖層顯示終點填充方案；第一透明度變化單元，用於將不透明圖層的透明度逐 漸變化為完全透明，同時將完全透明圖層的透明度逐漸變化為完全不透明。

由以上技術方案可見，本發明的實施例透過色彩補間動畫的展示區域上兩個重疊圖層的透明度變化，將顯示起點填充方案的圖層由不透明逐漸變化為完全透明，同時將顯示終點填充方案的圖層由完全透明逐漸變化為不透明，達到由起點填充方案變換為終點填充方案的動畫效果，不論填充方案是否複雜，都能夠由軟體自動實現平滑自然的動畫效果，無需設計人員的額外工作，提高了動畫實現的效率。

圖1是本發明實施例一中一種色彩補間動畫的實現方法的流程圖；圖2是本發明實施例二中一種色彩補間動畫的實現方法的流程圖；圖3是本發明應用示例中使用者的信用分、信用等級以及填充方案的對應關係示意圖；圖4是本發明應用示例中一種動畫顯示使用者信用等級的流程圖；圖5是本發明實施例所在設備的一種硬體結構圖；圖6是本發明實施例中一種色彩補間動畫的實現裝置的邏輯結構圖。

本發明的實施例提出一種新的色彩補間動畫的實現方法，在展示區域上設置相互重疊的兩個圖層，分別顯示起點填充方案和終點填充方案，將顯示起點填充方案的圖層由不透明逐漸變化為完全透明，將顯示終點填充方案的圖層由完全透明逐漸變化為不透明，從而達到由起點填充方案變換到終點填充方案的動畫效果，無需設計人員的工作即可達到自然平滑的過渡效果，使動畫的實現效率得以提高，以解決現有技術中存在的問題。

本發明的實施例可以應用在任何具有計算、儲存和顯示能力的設備上，包括手機、平板電腦、PC(Personal Computer，個人電腦)、筆記本、伺服器等設備。

本發明的實施例中，色彩補間動畫在某個展示區域內進行。該展示區域可以是任意的形狀、大小和位置。該展示區域可以是固定不變的，其形狀、大小和位置固定；也可以是動態變化的，其形狀、大小和/或位置都可以發生變化；換言之，本發明實施例中的實現色彩補間動畫的技術方案可以單獨使用，也可以與實現其他補間動畫(如填充區域的形狀、位移、縮放、和/或旋轉等補間動畫)的技術方案結合起來使用。

本發明的實施例中，初始化時，在色彩補間動畫的展示區域上產生兩個圖層，這兩個圖層相互重疊，其中一個圖層的透明度設置為完全透明，另一個圖層的透明度設置為不透明。產生圖層的具體方式和設置圖層透明度的方式 可參照現有技術實現，不再贅述。

相互重疊的兩個圖層以上下的方式排列，當上方圖層為不透明時，會完全遮擋下方圖層，使用者在展示區域看到的是上方圖層的顯示內容；當上方圖層為完全透明時，會完全呈現下方圖層，使用者在展示區域看到的是下方圖層的顯示內容；當上方圖層的透明度是完全透明和不透明之間的某個中間值時，使用者在展示區域看到的是上方圖層和下方圖層的顯示內容按照該透明度中間值進行疊加後的視覺效果。

本發明的實施例一中，色彩補間動畫在展示區域由起點填充方案以動畫效果變換到終點填充方案。其中，起點填充方案或終點填充方案可以是純色填充方案，也可以是帶有漸變、紋理、或圖案等填充效果的填充方案，還可以是使用者自己產生的各種其他具有顏色變化的填充方案。本實施例中色彩補間動畫的實現方法的流程如圖1所示。

步驟110，在不透明圖層顯示起點填充方案，在完全透明圖層顯示終點填充方案。

在初始化完成後，展示區域上兩個重疊的圖層，一個是不透明圖層，另一個是完全透明圖層。將起點填充方案顯示在不透明圖層，將終點填充方案顯示在完全透明圖層，這樣，使用者在展示區域將看到起點填充方案對應的視覺效果。

步驟120，將不透明圖層的透明度逐漸變化為完全透明，同時將完全透明圖層的透明度逐漸變化為完全不透 明。

在補間動畫的動畫時長內，將不透明圖層的透明度從不透明逐漸變化為完全透明；同樣在該動畫時長內，將完全透明圖層的透明度從完全透明逐漸變化為不透明。這樣，使用者將看到展示區域從起點填充方案對應的視覺效果，在動畫時長內隨著透明度的變化，逐漸變化成終點填充方案對應的視覺效果，從而完成了從起點填充方案到終點填充方案的動畫實現。

現有技術中提供了多種在動畫時長內逐漸變化透明度的方式，本發明的各個實施例中可以參照實現。需要說明的是，兩個圖層變化透明度的方式可以是各自獨立進行，也可以用相關聯的方式來協同進行。設透明度為0表示完全透明，透明度為1表示不透明，一個例子中，可以令上方圖層的透明度在動畫時長內從0勻速變化到1，令下方圖層的透明度在動畫時長內從1以加速度變化到0；另一個例子中，可以令上方圖層的透明度在動畫時長內從0以加速度變化到1，而令下方圖層的透明度保持與上方圖層的透明度之和為1。

在兩個圖層的透明度變化完成後，色彩補間動畫結束。此時，可以刪除當前的完全透明圖層，即本實施例中顯示起點填充方案的圖層，以及時釋放所佔用的系統資源。

本發明的實施例二中，色彩補間動畫中共有N個填充方案(N為大於等於2的自然數)，在展示區域由第1個 填充方案以動畫效果變換到第2個填充方案，然後再以動畫效果從第2個填充方案變換到第3個填充方案(在N大於等於3時)，直到變換到第N個填充方案後動畫結束。其中，每個填充方案可以是純色填充方案，也可以是帶有漸變、紋理、或圖案等填充效果的填充方案，還可以是使用者自己產生的各種其他具有顏色變化的填充方案。

本實施例中色彩補間動畫的實現方法的流程如圖2所示。本實施例主要針對與實施例一中不同的部分進行說明，相同部分請參見實施例一中的描述，不再重複。

步驟210，在不透明圖層顯示第1個填充方案，在完全透明圖層顯示第2個填充方案。

步驟220，將不透明圖層的透明度逐漸變化為完全透明，同時將完全透明圖層的透明度逐漸變化為完全不透明。

步驟230，在透明度變化完成後，如果當前的不透明圖層顯示的第k(k為不大於N的自然數)個填充方案不是第N個填充方案，在當前的完全透明圖層顯示第(k+1)個填充方案；將當前完全透明圖層的透明度逐漸變化為不透明，同時將當前不透明圖層的透明度逐漸變化為完全透明；重複本步驟直到k等於N。

在透明度變化完成後，設當前的不透明圖層(即在剛剛完成的透明度變化過程中，由完全透明變為不透明的圖層)上所顯示的是第k個填充方案，則第k個填充方案是截止到當前，本實施例中色彩補間動畫到達的最後一個填 充方案。如果k不等於N，第k個填充方案還需要繼續以動畫方式變化到第(k+1)個填充方案。如果k等於N，則動畫結束。

當k不等於N時，將第(k+1)個填充方案顯示在當前的完全透明圖層(即在剛剛完成的透明度變化過程中，由不透明變為完全透明的圖層)上。然後在從第k個填充方案到第(k+1)個填充方案的動畫時長內，將當前完全透明圖層的透明度逐漸變化為不透明，同時將當前不透明圖層的透明度逐漸變化為完全透明。

在本次透明度變化過程中，使用者將看到展示區域從第k個填充方案對應的視覺效果，在該動畫時長內隨著透明度的變化，逐漸變化成第(k+1)個填充方案對應的視覺效果。

本次透明度變化之後的當前不透明圖層與當前完全透明圖層，與本次透明度變化之前的當前不透明圖層與當前完全透明圖層互換。重複本步驟直到k等於N，這樣，展示區域從第1個填充方案以動畫效果變化到第2個填充方案，依次按照填充方案的排列順序，逐個變化到第N個填充方案後動畫結束。

當k等於N，動畫結束時，可以刪除當前的完全透明圖層。

可見，本發明的實施例一和實施例二中，在展示區域上設置相互重疊的兩個圖層，透過將第一個圖層由不透明逐漸變化為完全透明，同時將第二個圖層由完全透明逐漸 變化為不透明，達到第一個圖層的填充方案逐漸變化為第二圖層的填充方案的動畫效果，並且過渡過程平滑自然，在達到良好效果的同時避免了額外的人工工作，使動畫的實現效率得以提高。

在本發明的一個應用示例中，一種互聯網征信系統按照使用者的信用歷史、行為偏好、履約能力、身份特質、人脈關係等維度，以一定的評估演算法來為每個使用者產生信用分，並且按照使用者的信用分來確定使用者的信用等級，每個信用等級對應於一定範圍的信用分。該征信系統中使用者信用分的範圍是350到950，劃分為第1到第5共5個信用等級，級別越高，信用度越好。

使用者可以在該徵信系統的使用者端App(應用程式)中查看自己的信用等級。App中在一個圓形區域以不同顏色的具有漸變效果的填充方案來顯示使用者的不同信用等級，第k個填充方案對應於第k個信用等級。圖3所示為該徵信系統使用者的信用分、信用等級以及填充方案的對應關係，其中，第1個填充方案為色值從#EA5254漸變到#F4653C的紅色填充方案，對應於第1個信用等級；類似的，第2到第5個填充方案分別為橙色、綠色、青色和藍色具有漸變效果的填充方案，分別對應於第2到第5個信用等級。

為了提升使用者的體驗，當使用者打開顯示其信用等級的頁面時，將從第1個信用等級開始，以動畫方式顯示使用者的信用等級提升過程，直到達到使用者的信用等級 為止。換言之，在表示信用等級的圓形區域中，從第1個填充方案開始，以動畫方式遍歷中間的填充方案，直到顯示為使用者信用等級N對應的第N個填充方案時，動畫結束。

本應用示例中動畫的實現流程如圖4所示。

步驟401，在圓形區域初始化兩個UIView視圖，其中上方圖層為視圖Front視圖，下方圖層為視圖Bottom，將Front的透明度設置為0，將Bottom的透明度設置為1。本應用示例中，透明度為0表示完全透明，透明度為1表示不透明。

步驟402，獲取使用者的信用等級N。

步驟403，判斷N是否為1，如果是，執行步驟404，否則轉步驟405。

步驟404，在Bottom顯示第1個填充方案，刪除Front，流程結束。當使用者的信用等級為1時，無需進行動畫顯示，直接顯示第1個填充方案即可。

步驟405，令b等於1，f等於2。b表示在Bottom顯示的填充方案的序號，f表示在Front顯示的填充方案的序號。

步驟406，在Bottom顯示第b個填充方案，在Front顯示第f個填充方案。

步驟407，判斷當前Front的透明度是否為0，如果是，執行步驟408，否則轉步驟411。本步驟用來判斷當前的完全透明圖層是Front還是Bottom。

步驟408，在預定時長內，將Front的透明度由0勻速變化為1，將Bottom的透明度由1勻速變化為0。該預定時長是在相鄰信用等級間顯示動畫效果的預設時長。

步驟409，判斷f是否等於N，如果是，動畫結束，轉步驟414；否則執行步驟410。本步驟也可以判斷b是否等於(N-1)。

步驟410，將b加2，刷新Bottom的顯示(即顯示加2後的第b個填充方案)，轉步驟407。

步驟411，在預定時長內，將Front的透明度由1勻速變化為0，將Bottom的透明度由0勻速變化為1。

步驟412，判斷b是否等於N，如果是，動畫結束，轉步驟414；否則執行步驟413。本步驟也可以判斷f是否等於(N-1)。

步驟413，將f加2，刷新Front的顯示(即顯示加2後的第f個填充方案)，轉步驟407。

步驟414，刪除當前透明度為0的視圖。

與上述流程實現對應，本發明的實施例還提供了一種色彩補間動畫的實現裝置。該裝置可以透過軟體實現，也可以透過硬體或者軟硬體結合的方式實現。以軟體實現為例，作為邏輯意義上的裝置，是透過所在設備的CPU(Central Process Unit，中央處理器)將對應的電腦程式指令讀取到記憶體中運行形成的。從硬體層面而言，除了圖5所示的CPU、記憶體以及非易失性記憶體之外，該裝置所在的設備通常還包括用於進行無線信號收發的晶片等 其他硬體，和/或用於實現網路通信功能的板卡等其他硬體。

圖6所示為本發明實施例提供的一種裝置，所述色彩補間動畫的展示區域具有重疊的兩個圖層，其中一個圖層的透明度為不透明，另一個圖層的透明度為完全透明，所述裝置包括起點終點顯示單元和第一透明度變化單元，其中：起點終點顯示單元用於在不透明圖層顯示起點填充方案，在完全透明圖層顯示終點填充方案；第一透明度變化單元用於將不透明圖層的透明度逐漸變化為完全透明，同時將完全透明圖層的透明度逐漸變化為完全不透明。

一個例子中，所述色彩補間動畫包括：從第1個填充方案變化到第2個填充方案，依次逐個變化到第N個填充方案，N為大於1的自然數；所述起點填充方案為第1個填充方案，所述終點填充方案為第2個填充方案；所述裝置還包括第二透明度變化單元，用於在透明度變化完成後，如果當前的不透明圖層顯示的第k個填充方案不是第N個填充方案，在當前的完全透明圖層顯示第(k+1)個填充方案；將當前完全透明圖層的透明度逐漸變化為不透明，同時將當前不透明圖層的透明度逐漸變化為完全透明；重複本步驟直到k等於N；k為不大於N的自然數。

上述例子中，所述N為使用者的信用等級，第k個信用等級對應於第k個填充方案；所述裝置還可以包括動畫取消單元，用於對信用等級為1的使用者，在不透明圖層顯示第1個填充方案，刪除完全透明圖層。

可選的，所述裝置還包括動畫結束單元，用於在動畫結束後，刪除當前的完全透明圖層。

可選的，所述起點填充方案和終點填充方案包括：具有漸變、紋理、或圖案效果的填充方案。

可選的，所述色彩補間動畫的展示區域包括：固定不變的展示區域，或動態變化的展示區域。

以上所述僅為本發明的較佳實施例而已，並不用以限制本發明，凡在本發明的精神和原則之內，所做的任何修改、等同替換、改進等，均應包含在本發明保護的範圍之內。

在一個典型的配置中，計算設備包括一個或多個處理器(CPU)、輸入/輸出介面、網路介面和記憶體。

記憶體可能包括電腦可讀介質中的非永久性記憶體，隨機存取記憶體(RAM)和/或非易失性記憶體等形式，如唯讀記憶體(ROM)或快閃記憶體(flash RAM)。記憶體是電腦可讀介質的示例。

電腦可讀介質包括永久性和非永久性、可移動和非可移動媒體可以由任何方法或技術來實現資訊儲存。資訊可以是電腦可讀指令、資料結構、程式的模組或其他資料。電腦的儲存介質的例子包括，但不限於相變記憶體(PRAM)、靜態隨機存取記憶體(SRAM)、動態隨機存取記憶體(DRAM)、其他類型的隨機存取記憶體(RAM)、唯讀記憶體(ROM)、電可擦除可程式設計唯讀記憶體(EEPROM)、快閃記憶體或其他記憶體技 術、唯讀光碟唯讀記憶體(CD-ROM)、數位多功能光碟(DVD)或其他光學儲存、磁盒式磁帶，磁帶磁磁片儲存或其他磁性存放裝置或任何其他非傳輸介質，可用於儲存可以被計算設備存取的資訊。按照本文中的界定，電腦可讀介質不包括暫存電腦可讀媒體(transitory media)，如調變的資料信號和載波。

還需要說明的是，術語“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過程、方法、商品或者設備不僅包括那些要素，而且還包括沒有明確列出的其他要素，或者是還包括為這種過程、方法、商品或者設備所固有的要素。在沒有更多限制的情況下，由語句“包括一個......”限定的要素，並不排除在包括所述要素的過程、方法、商品或者設備中還存在另外的相同要素。

本領域技術人員應明白，本發明的實施例可提供為方法、系統或電腦程式產品。因此，本發明可採用完全硬體實施例、完全軟體實施例或結合軟體和硬體方面的實施例的形式。而且，本發明可採用在一個或多個其中包含有電腦可用程式碼的電腦可用儲存介質(包括但不限於磁碟記憶體、CD-ROM、光學記憶體等)上實施的電腦程式產品的形式。

Claims (12)

1. 一種色彩補間動畫的實現方法，其中，所述色彩補間動畫的展示區域具有重疊的兩個圖層，其中一個圖層的透明度為不透明，另一個圖層的透明度為完全透明，所述方法包括：在不透明圖層顯示起點填充方案，在完全透明圖層顯示終點填充方案；將不透明圖層的透明度逐漸變化為完全透明，同時將完全透明圖層的透明度逐漸變化為完全不透明。
2. 根據申請專利範圍第1項所述的方法，其中，所述色彩補間動畫包括：從第1個填充方案變化到第2個填充方案，依次逐個變化到第N個填充方案，N為大於1的自然數；所述起點填充方案為第1個填充方案，所述終點填充方案為第2個填充方案；所述方法還包括：在透明度變化完成後，如果當前的不透明圖層顯示的第k個填充方案不是第N個填充方案，在當前的完全透明圖層顯示第(k+1)個填充方案；將當前完全透明圖層的透明度逐漸變化為不透明，同時將當前不透明圖層的透明度逐漸變化為完全透明；重複本步驟直到k等於N；k為不大於N的自然數。
3. 根據申請專利範圍第2項所述的方法，其中，所述N為使用者的信用等級，第k個信用等級對應於第k個填充方案； 所述方法還包括：對信用等級為1的使用者，在不透明圖層顯示第1個填充方案，刪除完全透明圖層。
4. 根據申請專利範圍第1至3項中任意一項所述的方法，其中，所述方法還包括：在動畫結束後，刪除當前的完全透明圖層。
5. 根據申請專利範圍第1項所述的方法，其中，所述起點填充方案和終點填充方案包括：具有漸變、紋理、或圖案效果的填充方案。
6. 根據申請專利範圍第1項所述的方法，其中，所述色彩補間動畫的展示區域包括：固定不變的展示區域，或動態變化的展示區域。
7. 一種色彩補間動畫的實現裝置，其中，所述色彩補間動畫的展示區域具有重疊的兩個圖層，其中一個圖層的透明度為不透明，另一個圖層的透明度為完全透明，所述裝置包括：起點終點顯示單元，用於在不透明圖層顯示起點填充方案，在完全透明圖層顯示終點填充方案；第一透明度變化單元，用於將不透明圖層的透明度逐漸變化為完全透明，同時將完全透明圖層的透明度逐漸變化為完全不透明。
8. 根據申請專利範圍第7項所述的裝置，其中，所述色彩補間動畫包括：從第1個填充方案變化到第2個填充方案，依次逐個變化到第N個填充方案，N為大於1的自然數； 所述起點填充方案為第1個填充方案，所述終點填充方案為第2個填充方案；所述裝置還包括：第二透明度變化單元，用於在透明度變化完成後，如果當前的不透明圖層顯示的第k個填充方案不是第N個填充方案，在當前的完全透明圖層顯示第(k+1)個填充方案；將當前完全透明圖層的透明度逐漸變化為不透明，同時將當前不透明圖層的透明度逐漸變化為完全透明；重複本步驟直到k等於N；k為不大於N的自然數。
9. 根據申請專利範圍第8項所述的裝置，其中，所述N為使用者的信用等級，第k個信用等級對應於第k個填充方案；所述裝置還包括：動畫取消單元，用於對信用等級為1的使用者，在不透明圖層顯示第1個填充方案，刪除完全透明圖層。
10. 根據申請專利範圍第7至9項中任意一項所述的裝置，其中，所述裝置還包括：動畫結束單元，用於在動畫結束後，刪除當前的完全透明圖層。
11. 根據申請專利範圍第7項所述的裝置，其中，所述起點填充方案和終點填充方案包括：具有漸變、紋理、或圖案效果的填充方案。
12. 根據申請專利範圍第7項所述的裝置，其中，所述色彩補間動畫的展示區域包括：固定不變的展示區域，或動態變化的展示區域。