EDA365电子论坛网

标题: 利用MATLAB实现图片切换动画效果详解 [打印本页]

作者: uqHZau 时间: 2021-1-19 17:43
标题: 利用MATLAB实现图片切换动画效果详解

内容摘要：本博文介绍MATLAB图片切换动画效果的制作以及GIF文件保存，并结合具体代码详细解释。介绍了利用MATLAB编程进行几幅图片的轮流切换，切换时实现与幻灯片切换相似的炫酷的图片切换特效。其中涉及一些MATLAB的高级图形设计，具体的函数及命令文中会详细介绍。本文先逐步介绍实现思路及代码细节，最后附上完整代码。

1. 前言
MATLAB中为数据可视化提供了全面系统的功能函数，据此可以绘制出许多形象生动的精美图像。同时MATLAB的句柄图形为用户提供了强有力的工具，可以很方便地对图形的每个可能方面进行控制，这在需要设计GUI的场合用处很大。刚接触时看到许多用MATLAB制作出炫丽的仿真动画不明觉厉，在大学的MATLAB编程课里也经常有编写一个图片切换动画的作业或课设。这里写一个有几幅图片轮流切换不同效果的程序，为此提供一个参考思路，希望对大家有所启发。

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直接绘制动点。

调用格式	调用说明
comet(y)	显示质点绕着向量y的动画轨迹运动（二维）
comet(x,y)	显示质点在横轴、纵轴方向的运动随向量x，y的动画轨迹（二维）
comet(x,y,p)	效果与上一个相同，额外定义轨迹尾巴线的长度p*length(y)，p介于0,1之间，默认为0.1

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.1.1 质点动画效果图

2.2 电影动画
   电影动画和电影的制作有点相似，实际可以看出是一个先“拍”再“播”的过程，即捕捉将要构成动画帧的图像逐个存到一个大矩阵中，然后播放这个大矩阵的数据。

基本步骤：
  1、调用moviein函数初始化内存，创建一个足够大的矩阵，用于存储构成每一帧图像的数据。
  2、利用getframe抓取当前画面（即每帧图像），返回的数据用于构成动画矩阵。
  3、调用movie函数按照指定的速度进行指定次数播放该电影动画。例如：movie(M, n)可以播放由矩阵M所定义的画面n次，默认只播放一次。

getframe与movie函数调用格式见表2.2.1及表2.2.2：getframe函数可以捕捉动画帧，并保存到矩阵中。

表2.2.1 getframe函数用法

调用格式

调用说明

f=getframe从当前图形框中得到动画帧
f = getframe(h)从图形句柄h中得到动画帧
f=getframe(h,rect)从图形句柄h的指定区域rect中得到动画帧

当创建了一系列动画帧后，可利用movie函数播放这些动画帧。该函数的用法有：

表2.2.2 movie函数用法

调用格式

调用说明

movie(M)将矩阵M中的动画帧播放一次
movie(M, n)将矩阵M中的动画帧播放n次
movie(M,n,fps)将矩阵M中的动画帧以每秒fps帧的速度播放n次

实例：旋转的山峰动画

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.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
   代码中第1-19行是新建图形窗口并对图形对象设置属性值为后面动画制作提供一个好的“环境”，在2.3节中已经详细介绍这里就不再赘述了。21-30行就是重点了，21行是设置一个赋值的范围跨度，值越大后面动画进行的速度就越快；22行的Length就是小长条的宽，为了方便后面用到；整个动画的实现在for循环中进行，第26行Im是将要显示的矩阵而后面的I2是下一张图片的数据矩阵，在第12行Im已经被赋值为第一张图片的数据矩阵I1了，现在要做的就是随着for循环的进行i的值逐渐增大长条逐渐被赋值了。22行语句如下

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,：);
   要实现缩小就需要正方形区域的索引范围以一定速度缩小，最终由下一张图片完全覆盖，实现图3.2.1效果的完整代码如下

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
   MATLAB 制作gif动态图的基本思想就是，将一张张的静态图组合成一张能动的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

   前面第1-33行代码与之前的代码一致，在第37行print(hFigure,'-dbmp',sprintf('%d',jo)) 中hFigure是当前图形窗口的图形句柄，指定输出当前窗口的图像，'-dbmp'指定输出文件格式，sprintf（'%d',jo）是对bmp文件命名为jo。后面第41-51行的for循环是遍历刚刚生成的图片将其组合成gif文件，生成的gif文件如图3.2.2所示。

                                                                                          图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

作者: NNNei256 时间: 2021-1-19 18:23
利用MATLAB实现图片切换动画效果详解

欢迎光临 EDA365电子论坛网 (https://bbs.eda365.com/)