利用MATLAB實現圖片切換動畫效果

內容摘要：本博文介紹MATLAB圖片切換動畫效果的製作以及GIF檔案儲存，並結合具體程式碼詳細解釋。介紹了利用MATLAB程式設計進行幾幅圖片的輪流切換，切換時實現與幻燈片切換相似的炫酷的圖片切換特效。其中涉及一些MATLAB的高階圖形設計，具體的函式及命令文中會詳細介紹。本文先逐步介紹實現思路及程式碼細節，最後附上完整程式碼。

1. 前言

MATLAB中為資料視覺化提供了全面系統的功能函式，據此可以繪製出許多形象生動的精美影象。同時MATLAB的控制代碼圖形為使用者提供了強有力的工具，可以很方便地對圖形的每個可能方面進行控制，這在需要設計GUI的場合用處很大。剛接觸

2. MATLAB動畫製作

       本節介紹MATLAB中動畫製作的常用方式，對原理比較熟悉的讀者可直接跳至第3節。眾所周知動畫其實是很多張圖片的以一定時間間隔的逐幀切換，一個簡單直接的想法當然就是下面程式碼中方式了。首先讀取一張圖片，通過for迴圈逐步擴大要顯示圖片的索引範圍，達到逐步放大圖片的效果。

I=imread('image.jpg');%讀圖
[x,y,z]=size(I);%尺寸
while 1
for i=1:100
   imshow(I(1:x/100*i,1:y/100*i,:));%逐漸放大顯示
end
end
 

圖2.1 顯示效果圖

       上述程式碼有點粗糙，執行過程中隨著圖片的放大視窗也在不斷抖動。這其實跟imshow( )函式有關，每次呼叫它顯示一張圖片系統就會自動新建立一個視窗，視窗的大小是根據要顯示圖片的大小自動縮放的，上面的for迴圈中不斷呼叫imshow( )而圖片的大小是不斷變大的，顯示視窗自然也跟著變化。

       其實MATLAB為動畫製作提供了三種實現方式：質點動畫、電影動畫、程式動畫。質點動畫是最簡單的動畫產生方式，產生一個順著曲線軌跡運動的質點來操作；電影動畫首先會儲存一系列的圖形資料，然後按照一定的順序像電影一樣的播放；程式動畫是在圖形視窗中按照一定的演算法連續擦除和重繪圖形物件。下面逐個簡單演示一下

2.1 質點動畫

       質點動畫由comet、comet3函式產生質點動畫，分別對應二維和三維座標下的質點。首先求解出質點完整的運動軌跡座標x，y（三維時還有z），將x,y作為輸入引數使用comet或comet3直接繪製動點。

comet3函式的使用方法與comet相似。

例項程式碼如下：

clf;  
clear;  
grid on;

vx = 100*cos(1/4*pi);  
vy = 100*sin(1/4*pi);  
t = 0:0.02:15;  
dx = vx*t;  
dy = vy*t-9.8*t.^2/2;  
comet(dx, dy);

圖2.1.1 質點動畫效果圖

2.2 電影動畫

       電影動畫和電影的製作有點相似，實際可以看出是一個先“拍”再“播”的過程，即捕捉將要構成動畫幀的影象逐個存到一個大矩陣中，然後播放這個大矩陣的資料。

getframe與movie函式呼叫格式見表2.2.1及表2.2.2：getframe函式可以捕捉動畫幀，並儲存到矩陣中。

當建立了一系列動畫幀後，可利用movie函式播放這些動畫幀。該函式的用法有：

例項：旋轉的山峰動畫

clc; clear;  
   
% peaks是一個函式，其中有2個變數。由平移和放縮高斯分佈函式獲得。  
% 引數為30，得到的X、Y、Z為30*30的矩陣。  
[X, Y, Z] = peaks(30);  
% surf繪製三維曲面圖  
surf(X,Y,Z);  
   
axis([-3,3,-3,3,-10,10]);  
% 關閉所用座標軸上的標記、格柵和單位標記。但保留由text和gtext設定的物件  
axis off;  
shading interp;   
colormap(hot);  

M = moviein(20);% 建立一個20列的大矩陣    
for i = 1:20    
   view(-37.5+24*(i-1),30);% 改變視點     
   M(i) = getframe;% 將圖形儲存到M矩陣   
end  

movie(M,2);% 播放畫面2次

圖2.2.1 電影動畫例項

2.3 程式動畫

在MATLAB中把用於資料可視和介面製作的基本繪圖要素稱為控制代碼圖形物件，每個圖形物件有相應的屬性值，例如線條Line物件就有顏色、位置等屬性。可以改變圖形物件的屬性值，重繪圖形物件，從而建立程式動畫。其基本思路是：首先新建一個圖形視窗，再迴圈內逐漸改變圖形物件的相應屬性值，並使用drawnow函式更新當前圖形，整個迴圈就會表現出變化的動畫效果。

例項程式碼如下

clear;
clc;
%% 新建圖形視窗並設定初始屬性
hFigure=figure('menubar','none','NumberTitle','off','position',...
     [800 800 360 360],'name','圖片切換動畫效果');
 movegui(hFigure,'center');%設定居中
 %設定座標軸屬性
 hAxes=axes('Visible','off','units','normalized','position',[0 0 1 1]);
 
%% 在圖形視窗中顯示圖片 
 Im=imread('image.jpg');
 hIm=imshow(Im);
 [x,y,z]=size(Im);
%% 修改屬性並重繪
for i=1:100
I=Im(1:x/100*i,1:y/100*i,:);%逐漸放大顯示
set(hIm,'CData',I);
drawnow;
end

        程式碼5-8行新建圖形視窗併為視窗中的物件設定初始屬性，可以理解為給後面顯示影象提供一個自定義的環境。首先第5行figure函式用於Figure圖形視窗的建立，括號中引數設定相應屬性，其中'menubar','none'表示禁用選單欄；‘NumberTitle’，‘off’表示圖形標題中不顯示圖形編號；‘Position’,'[800 800 360 360]'表示設定圖形視窗的位置與大小，格式為[左 底 寬 高]；‘Name’,'圖片切換動畫效果'，表示設定圖形視窗的標題。

       第7行設定圖形視窗在居中位置。第9行axes函式用於Axes座標物件的建立，即在當前圖形視窗中新建一個座標軸，括號裡面引數設定上與figure格式相似，即設定座標軸不可見、計量單位為常規、繪圖區域的位置和大小設為[0 0 1 1]([左 底 寬 高])。

      第12-13行為讀入圖片，並在上面設定的座標中顯示圖片，hIm為image（圖形）物件的控制代碼，可通過控制代碼對該物件進行操作。

      第16-20行是在for迴圈中修改image（圖形）物件的CData屬性，並重繪圖形從而實現動畫的。具體的第18行中，set就是一個用於設定一般物件屬性的函式，第一個引數hIm為圖形控制代碼用於指定對哪個物件進行操作，這裡就是image物件了；後面‘CData’，‘I’是指當前要顯示的影象資料設定為矩陣I。整句就是指對hIm物件設定其要顯示的影象這一屬性為I。第19行drawnow就是將屬性改變了的圖形顯示出來。

實現的效果如圖2.3.1所示

圖2.3.1 程式動畫效果

3. 圖片切換效果製作

       經過前面動畫製作原理的介紹，這節就正式說說開頭那個效果的實現了，為了便於程式設計實現（電影動畫方式需先存後播程式設計稍顯繁瑣）這裡採用程式動畫的製作方式。首先需要準備幾張長方形圖片，為了方便後面處理其大小尺寸應該一致，即幾張影象有相同長寬，並與接下來編寫的M檔案放在同一資料夾下。新建一個M檔案命名為imageswitch.m，我們後面的程式設計都在該檔案下進行。

3.1 效果一實現

       如圖3.1.1所示，將長方形圖片做一個簡單劃分（這裡我的圖片尺寸為1920*1200），以寬度的大小為邊長在中間掏出一個正方形，就是圖中兩條藍色線條分割的中間部分，那麼兩條線的位置就是(1920-1200)/2和1920-(1920-1200)/2也就是360，和1560，如此一來這張圖片就分成了左右兩個長條和中間正方形區域了。

圖3.1.1 分割圖片

       現在一步步從頭開始編寫程式吧，首先實現的是第二幅圖片的左邊長條由頂部向下移動逐漸覆蓋原圖片的左邊長條，同時右邊的長條也逐漸被覆蓋不過是由底部向上移動的。在程式中這一過程其實是一個圖片矩陣中一部分元素逐漸被另一矩陣中元素所替換的過程。說白了圖片的儲存和處理都是以矩陣的形式，圖3.1那張圖片就是一個1920*1200*3的三維矩陣，左邊長條的移動就是橫座標範圍在1-360，縱座標範圍為1-1200的所有元素逐漸由第二張圖資料矩陣的相同範圍上的對應元素所賦值的過程了。我們看一段程式碼理解一下。

function imageswitch1()
%需顯示的圖片檔名預存
S=char('BingWallpaper-2016-09-27.jpg',...
    'BingWallpaper-2016-10-07.jpg');
Imagename=cellstr(S);
%% 讀入圖片
I1=imread(Imagename{1});I2=imread(Imagename{2});
%% 轉換儲存格式為double
I1=im2double(I1);I2=im2double(I2);
%% 
[x,y,z]=size(I1);
Im=I1;
%% 建立圖形視窗並設定圖形物件初始屬性
hFigure=figure('menubar','none','NumberTitle','off','position',...
    [1000 1000 720 450],'name','圖片切換動畫效果');
movegui(hFigure,'center');
axes('Visible','off','units','normalized','position',[0 0 1 1]);
% 顯示圖片
hIm=imshow(Im);

step=x/100;%漸變步長
Length=(y-x)/2;
 % 動畫效果一
    for i=step:step:x
        % 改變影象資料
        Im(1:i,1:Length,:)=I2(x-i+1:x,1:Length,:);
        Im(x-i+1:x,y-Length+1:y,:)=I2(1:i,y-Length+1:y,:);
        set(hIm,'CData',Im);%設定image物件CData屬性為Im
        drawnow ;%重繪當前圖形視窗
    end
end

Im(1:i,1:Length,:)=I2(x-i+1:x,1:Length,:);

      可以看到第二維和第三維的範圍兩邊矩陣是相同的，都分別是1:Length、：，即第二維索引範圍是1到Length（小長條的寬），第三維索引取全部範圍（第三維可認為是對色彩的設定，“：”表示取索引全部範圍，就可以認為是保留色彩了，實際還得理解下RGB影象的儲存方式哦）。第一維範圍為1到i，隨i的增大越來越多的區域被I2中x-i+1到x範圍的I2覆蓋。同理第23行也是逐漸覆蓋原有影象右邊長條，所以這是第二維的範圍應該是y-Length+1到y，而右邊的長條下一張圖片的那一部分是向下逐漸覆蓋的，故第一維兩個矩陣的索引範圍與左邊的相反。

       第24行將image物件的CData屬性設定為賦值後的Im，即顯示的影象是新的Im。第25行用drawnow函式重繪圖形視窗，就會顯示新的一幀。最終以上程式碼執行的動畫效果如圖3.1.2所示

圖3.1.2 長條移動演示

       將中間正方形區域平均分成上下兩部分，上部分割槽域由下一幅圖片相應部分向右移動覆蓋，下部分由下一幅圖片相應部分向左移動覆蓋，效果一的完整效果就是圖3.1.3所示的

圖3.1.3 效果一的完整效果

       這隻要在上面實現長條的程式碼23-24間加上以下兩行程式碼其原理與長條移動相同，只不過這時的索引範圍需要有所改變上層範圍為1到x/2，即上半部分，第二維Im是從Length+1（正方形開始的地方）至Length+i（隨i的增大逐漸覆蓋這個正方形寬度範圍）被I2中最右邊部分開始的畫素部分取代，而第二行正好覆蓋的方向相反。

Im(1:x/2,Length+1:Length+i,:)=I2(1:x/2,y-Length-i+1:y-Length,:);
Im(x/2+1:x,y-Length-i+1:y-Length,:)=I2(x/2+1:x,Length+1:Length+i,:);

       效果一的完整程式碼如下，新建到imageswitch2.m檔案中即可實現圖3.1.3的效果

function imageswitch2()
%需顯示的圖片檔名預存
S=char('BingWallpaper-2016-09-27.jpg',...
    'BingWallpaper-2016-10-07.jpg');
Imagename=cellstr(S);
%% 讀入圖片
I1=imread(Imagename{1});I2=imread(Imagename{2});
%% 轉換儲存格式為double
I1=im2double(I1);I2=im2double(I2);
%% 
[x,y,z]=size(I1);
Im=I1;
%% 建立圖形視窗並設定圖形物件初始屬性
hFigure=figure('menubar','none','NumberTitle','off','position',...
    [1000 1000 720 450],'name','圖片切換動畫效果');
movegui(hFigure,'center');
axes('Visible','off','units','normalized','position',[0 0 1 1]);
% 顯示圖片
hIm=imshow(Im);

step=x/10;%漸變步長
Length=(y-x)/2;
 % 動畫效果一

    for i=step:step:x
        % 改變影象資料
        Im(1:i,1:Length,:)=I2(x-i+1:x,1:Length,:);
        Im(x-i+1:x,y-Length+1:y,:)=I2(1:i,y-Length+1:y,:);
        Im(1:x/2,Length+1:Length+i,:)=I2(1:x/2,y-Length-i+1:y-Length,:);
        Im(x/2+1:x,y-Length-i+1:y-Length,:)=I2(x/2+1:x,Length+1:Length+i,:);
        set(hIm,'CData',Im);%設定image物件CData屬性為Im
        drawnow ;%重繪當前圖形視窗
    end
    Im=I1;

end

         同樣可以將覆蓋的方向改變，如取與上面相反的覆蓋方向就可以實現又一種切換效果了。

3.2 縮放效果製作

       對於中間的正方形區域可以設計一個縮放的效果，如圖3.2.1所示。

圖3.2.1 縮放演示效果

這時對正方形賦值的程式碼如下     

Im(x/2-i/2+1:x/2+i/2,y/2-i/2+1:y/2+i/2,:)=I2(x/2-i/2+1:x/2+i/2,y/2-i/2+1:y/2+i/2,:);

function imageswitch3()
%需顯示的圖片檔名預存
S=char('BingWallpaper-2016-10-13.jpg',...
    'BingWallpaper-2016-10-14.jpg');
Imagename=cellstr(S);
%% 讀入圖片
I1=imread(Imagename{1});I2=imread(Imagename{2});
%% 轉換儲存格式為double
I1=im2double(I1);I2=im2double(I2);
%% 
[x,y,z]=size(I1);
Im=I1;
%% 建立圖形視窗並設定圖形物件初始屬性
hFigure=figure('menubar','none','NumberTitle','off','position',...
    [1000 1000 720 450],'name','圖片切換動畫效果');
movegui(hFigure,'center');
axes('Visible','off','units','normalized','position',[0 0 1 1]);
% 顯示圖片
hIm=imshow(Im);

step=x/10;%漸變步長
Length=(y-x)/2;
 % 動畫效果一
while 1
    
    for i=x:-step:step  
        Im=I1;
        Im(x-i+1:x,1:Length,:)=I2(1:i,1:Length,:);
        Im(1:i,y-Length+1:y,:)=I2(x-i+1:x,y-Length+1:y,:);
        
        Im(x/2-i/2+1:x/2+i/2,y/2-i/2+1:y/2+i/2,:)=I2(x/2-i/2+1:x/2+i/2,y/2-i/2+1:y/2+i/2,:);
        set(hIm,'CData',Im);%設定image物件CData屬性為Im
        drawnow ;%重繪當前圖形視窗
    end
    Im=I1;
end
end

       同樣可以設計一個從中間放大而覆蓋影象的效果，這隻需要改變上面程式碼中for中的賦值部分就可以了，至於具體如何修改大家只要參考第4節中的完整程式碼就行了，限於篇幅這裡就不多說了。

3.3 將動畫儲存為GIF

function imageswitch4()
%需顯示的圖片檔名預存
S=char('BingWallpaper-2016-10-13.jpg',...
    'BingWallpaper-2016-10-14.jpg');
Imagename=cellstr(S);
%% 讀入圖片
I1=imread(Imagename{1});I2=imread(Imagename{2});
%% 轉換儲存格式為double
I1=im2double(I1);I2=im2double(I2);
%% 
[x,y,z]=size(I1);
Im=I1;
%% 建立圖形視窗並設定圖形物件初始屬性
hFigure=figure('menubar','none','NumberTitle','off','position',...
    [1000 1000 720 450],'name','圖片切換動畫效果');
movegui(hFigure,'center');
axes('Visible','off','units','normalized','position',[0 0 1 1]);
% 顯示圖片
hIm=imshow(Im);

step=x/10;%漸變步長
Length=(y-x)/2;
 % 動畫效果一

    jo=0;
    for i=x:-step:step  
        Im=I1;
        Im(x-i+1:x,1:Length,:)=I2(1:i,1:Length,:);
        Im(1:i,y-Length+1:y,:)=I2(x-i+1:x,y-Length+1:y,:);
        
        Im(x/2-i/2+1:x/2+i/2,y/2-i/2+1:y/2+i/2,:)=I2(x/2-i/2+1:x/2+i/2,y/2-i/2+1:y/2+i/2,:);
        set(hIm,'CData',Im);%設定image物件CData屬性為Im
        drawnow ;%重繪當前圖形視窗

        jo=jo+1;
        %依次輸出圖片
        print(hFigure,'-dbmp',sprintf('%d',jo))   
    end
    
%% 依次讀取生成的所有圖片
for j=1:jo
    %獲取當前圖片
    A=imread(sprintf('%d.bmp',j));
    [I,map]=rgb2ind(A,256);
    %生成gif，並儲存
    if(j==1)
        imwrite(I,map,'movefig.gif','DelayTime',0.1,'LoopCount',Inf)
    else
        imwrite(I,map,'movefig.gif','WriteMode','append','DelayTime',0.1)    
    end
end

end

圖3.2.2 movefig.gif

4. 完整程式碼

       實現文中開頭圖中的效果的完整程式碼如下所示，在MATLAB中新建一個m檔案，命名為imageswitch.m執行即可。注意將相應圖片放在m檔案相同資料夾下，圖片的命名需與程式碼中一致（也可修改程式碼中檔名）免得出錯。下面是本文所用到的圖片檔案，需要的可以選中複製下來用於測試程式，只是需要改下檔名與這裡一致。

%作品：圖片切換動畫效果
%作者：吳限 
%2018.3.14
function imageswitch()
%需顯示的圖片檔名預存
S=char('BingWallpaper-2016-09-27.jpg',...
    'BingWallpaper-2016-10-07.jpg',...
    'BingWallpaper-2016-10-13.jpg',...
    'BingWallpaper-2016-10-14.jpg',...
    'BingWallpaper-2016-12-26.jpg');
Imagename=cellstr(S);
%% 讀入圖片
I1=imread(Imagename{1});I2=imread(Imagename{2});
I3=imread(Imagename{3});I4=imread(Imagename{4});
I5=imread(Imagename{5});
%% 轉換儲存格式為double
I1=im2double(I1);I2=im2double(I2);I3=im2double(I3);
I4=im2double(I4);I5=im2double(I5);
%% 
[x,y,z]=size(I1);
Im=I1;
%% 建立圖形視窗並設定圖形物件初始屬性
hFigure=figure('menubar','none','NumberTitle','off','position',...
    [1000 1000 720 450],'name','圖片切換動畫效果');
movegui(hFigure,'center');
axes('Visible','off','units','normalized','position',[0 0 1 1]);
% 顯示圖片
hIm=imshow(Im);

step=x/10;%漸變步長
Length=(y-x)/2;

while 1
    % 動畫效果一
    for i=step:step:x
        % 改變影象資料
        Im(1:i,1:Length,:)=I2(x-i+1:x,1:Length,:);
        Im(x-i+1:x,y-Length+1:y,:)=I2(1:i,y-Length+1:y,:);

        Im(1:x/2,Length+1:Length+i,:)=I2(1:x/2,y-Length-i+1:y-Length,:);
        Im(x/2+1:x,y-Length-i+1:y-Length,:)=I2(x/2+1:x,Length+1:Length+i,:);
        
        set(hIm,'CData',Im);%設定image物件CData屬性為Im
        drawnow ;%重繪當前圖形視窗
    end
   
     % 動畫效果二
    Im=I2;
    for i=x:-step:step
        Im=I4;
        Im(x-i+1:x,1:Length,:)=I3(1:i,1:Length,:);
        Im(1:i,y-Length+1:y,:)=I3(x-i+1:x,y-Length+1:y,:);
        
        Im(x/2-i/2+1:x/2+i/2,y/2-i/2+1:y/2+i/2,:)=I3(x/2-i/2+1:x/2+i/2,y/2-i/2+1:y/2+i/2,:);
        set(hIm,'CData',Im);%設定image物件CData屬性為Im
        drawnow ;%重繪當前圖形視窗
    end
    
    
    %動畫效果三
    Im=I3;
    for i=x:-step:step
        Im=I1;
        Im(1:i,1:Length,:)=I4(x-i+1:x,1:Length,:);
        Im(x-i+1:x,y-Length+1:y,:)=I4(1:i,y-Length+1:y,:);
        
        Im(1:x/2,Length+1:Length+i,:)=I4(1:x/2,y-Length-i+1:y-Length,:);
        Im(x/2+1:x,y-Length-i+1:y-Length,:)=I4(x/2+1:x,Length+1:Length+i,:);
  
        set(hIm,'CData',Im);%設定image物件CData屬性為Im
        drawnow  ;%重繪當前圖形視窗
    end
    
    %動畫效果四
    Im=I4;
    for i=1:step:x
        Im(x-i+1:x,1:Length,:)=I5(1:i,1:Length,:);
        Im(1:i,y-Length+1:y,:)=I5(x-i+1:x,y-Length+1:y,:);
        
        Im(x/2-i/2+1:x/2+i/2,y/2-i/2+1:y/2+i/2,:)=I5(x/2-i/2+1:x/2+i/2,y/2-i/2+1:y/2+i/2,:);
        
        set(hIm,'CData',Im);%設定image物件CData屬性為Im
        drawnow ;%重繪當前圖形視窗
    end
    
    Im=I5;
end
end

BingWallpaper-2016-09-27.jpg

BingWallpaper-2016-10-07.jpg

BingWallpaper-2016-10-13.jpg

BingWallpaper-2016-10-14.jpg

BingWallpaper-2016-12-26.jpg

      本文中所有程式碼的完整m檔案還有圖片檔案已經上傳，程式碼經除錯通過

有需要的朋友在評論區留言，可以將檔案傳送至你的郵箱。

5. 結束語

       這就是利用MATLAB進行圖片切換動畫的全部內容了，還有很多炫麗的動畫效果可以創造，將動畫效果用到PPT演示和GUI設計等方面定能增色不少。本博文介紹的方法在多次修改之下，使其程式更加嚴謹。由於編者能力有限，程式碼即使經過了多次校對，也難免會有疏漏之處。希望您能熱心指出其中的錯誤，以便下次修改時能以一個更完美更嚴謹的樣子，呈現在大家面前。同時如果有更好的實現方法也請您不吝賜教。