UI 动画特效及效率探讨
NOTE: 动画特效的原理：简单的：逐帧绘制，复杂的 调研3D库的实现
目前的调研是两个方面，一，windows的 GDI 二，安卓的绘制
一：
最近用GDI＋绘图，初次使用，感觉绘制效率不太满足要求。搜索了些相关资料，多数也只谈到了使用双缓冲（仅仅是解决了画面的闪烁问题）。了解到DirectX绘制要快的多（picasa 就使用的DirectX），但好象没有这个必要，毕竟偶只是在窗口中绘制有动画效果的2维图片。认真研究了一番，也总结了一些提高效率的方法。如果哪位高手有更好的建议，希望指点一二，偶的这篇文章算是抛砖引玉：）
先描述下问题域：在一幅背景画面上有几个圆形按钮，这几个圆形按钮绕成一个大圆环，要做出的效果是：点击按钮，所有的按钮都沿大圆环转动。当然，其过程要平滑。
起初，不知道绘制图片的时间大多浪费的什么地方，一步步摸索，相关资料也是少的可怜啊！
我的解决方法：
1、在对话框初始化的时候，加载图片（包括背景图片、圆形按钮的图片），用类成员指针记录下来。
2、在OnPaint中，把背景和圆形按钮的图片都绘制一次，在内存中把按钮绘制到背景图片的相应的位置上（位置已经计算好了），再一次性画到屏幕上。像这样：
CDC* pDC = GetDC();
Graphics graphics (pDC-> GetSafeHdc());
// 设定裁剪区域（这个区域我剪切成了一个圆环，目的就是提高绘制速度，反复绘制时，只绘制这个圆环区域）
if (!bDrawBkGrd)
graphics.SetClip (m_pClipRgn);
// 内存中绘制
Image* pImg = m_pBkImg-> Clone (); // 不消耗CPU时间
Graphics* pGraphics = graphics.FromImage (pImg);
for (int i = 0; i < 7; i++)
{
pGraphics-> DrawImage (m_pImg[i], m_place[i].X, m_place[i].Y, m_pImg[i]-> GetWidth(), m_pImg[i]-> GetHeight());
}
// 绘制到屏幕
graphics.DrawImage (pImg, 0, 0, pImg-> GetWidth(), pImg-> GetHeight());
delete pGraphics;
delete pImg;
ReleaseDC (pDC);
这样反复绘制时的效果不会闪烁，呵呵。
3、但绘制速度不快，大概是12.5帧/秒。背景图片是1027 X 768的PNG图片，按钮图片是100 X 110的jpg图片，我的机器是P4 1.7G，512内存，显卡是NVIDIA TNT2，绘制效率低了点。
4、一定还能提高帧速，俺研究了半天，试了下CachedBitmap，代码改为：
CDC* pDC = GetDC();
Graphics graphics (pDC-> GetSafeHdc());
// 设定裁剪区域（这个区域我剪切成了一个圆环，目的就是提高绘制速度，反复绘制时，只绘制这个圆环区域）
if (!bDrawBkGrd)
graphics.SetClip (m_pClipRgn);
// 内存中绘制
Image* pImg = m_pBkImg-> Clone (); // 不消耗CPU时间
Graphics* pGraphics = graphics.FromImage (pImg);
for (int i = 0; i < 7; i++)
{
CachedBitmap cachedBitmap((Bitmap*)m_pImg[i], &graphics);
pGraphics-> DrawCachedBitmap (&cachedBitmap, m_place[i].X, m_place[i].Y);
}
// 绘制到屏幕
graphics.DrawImage (pImg, 0, 0, pImg-> GetWidth(), pImg-> GetHeight());
delete pGraphics;
delete pImg;
ReleaseDC (pDC);
果然！呵呵，帧速提高到了15.5帧/秒
5、总结了这些经验，希望能够和大家分享下。上面的代码是包装在一个函数中的。让触发事件来调用，在OnPaint中也有调用。如果哪位高手有什么好的建议的话，还望不吝赐教！帧速越高越好啊，不知道用GDI＋速度能够提高到多少：）24帧以上最好了！
偶贴的上一个帖子名字是“GDI＋的绘图效率问题，大家讨论一下吧！”。在其中解决的效率问题远远不够。现在工作中的模块做的差不多了，总结了一下最近得到的经验结论，贴出来大家进一步讨论下。。。也算是在CSDN上得到了诸多帮助的一个小小的回报：） 在交流中共同进步吧！
不知道为什么MS把GDI+中的 DrawImage 这个函数效率做的这么低，（当然了，它的优点是使用方便、支持透明PNG格式等等，还有什么优点有经验的朋友不妨贴出来共享下：） 那么到底有多低呢？我也不知道，所以刚才做了个试验。让DrawImage和::BitBlt速度做了个比较！
先说下我的机器配置：2*3.0G Intel CPU，1G的内存，Intel945的显卡。在一个窗口中用DrawImage画一个590X480大小的PNG图片，画了100次，用了.......长时间；用BitBlt画同样大小的bmp图片，画了1000次，用了...长时间，多少时间我不管了，帧速我是计算出来了大约是 DrawImage 16.5帧/秒，BitBlt 2169.2帧/秒 。没错！确实是这个数字。我数学学的不好，就用计算器算了一下BitBlt的绘图速度是DrawImage的131.5倍。。。
代码也贴出来吧，写的比较粗糙：
void CCmpBitBltToDrawImageDlg::OnBnClickedButton1()
{
Bitmap* ppng = NULL;
CDC* pDC = GetDC ();
Graphics* pGrp = Graphics::FromHDC (pDC-> GetSafeHdc ());
ppng = Bitmap::FromFile (L"res//tray.png");
clock_t start = clock ();
for (int i = 0; i < 100; i++)
{
pGrp-> DrawImage (ppng, 0, 0);
}
delete pGrp;
ReleaseDC (pDC);
delete ppng;
clock_t time = clock () - start;
float ftime = time / 1000.0f;
CString str;
str.Format ("%.1f frame per second/n", 100 / ftime);
AfxMessageBox (str);
}
void CCmpBitBltToDrawImageDlg::OnBnClickedButton2()
{
CDC memDC;
CBitmap bmp;
if (0 == bmp.LoadBitmap (IDB_BITMAP1))
{
AfxMessageBox ("载入图片失败");
return;
}
CDC* pDC = GetDC ();
memDC.CreateCompatibleDC (pDC);
memDC.SelectObject (&bmp);
clock_t start = clock ();
for (int i = 0; i < 2000; i++)
{
::BitBlt (pDC-> GetSafeHdc (), 0, 0, 590, 480, memDC.GetSafeHdc (),
0, 0, SRCCOPY);
}
ReleaseDC (pDC);
clock_t time = clock () - start;
float ftime = time / 1000.0f;
CString str;
str.Format ("%.1f frame per second/n", 2000 / ftime);
AfxMessageBox (str);
}
对了，我没有在OnPaint用CPaintDC，是因为用CPaintDC DrawImage不出东西。不知道为什么？哪位高手知道烦请告诉我。
前面罗嗦了半天，下面进入正题。
我做的界面模块之前用DrawImage方法来绘图，以我的机器配置有70多个帧吧，人眼是察觉不出来了。觉得速度可以了，但这个模块是跑在虚拟机是的，内存的使用是受限制的，限制到128M，另外可能也有模拟硬件的原因，速度由70多帧降到了9帧。大家都知道只有屏幕的刷新速度达到24帧/秒以上，人眼才会感觉画面流畅。
所以，我得想办法解决问题呵呵。
因为利用了双缓冲，我在内存中建立了一个Graphics绘图平面m_pMemGraphics，先把零碎元素画到这个内存平面上，再一次性将它绘制到屏幕上。这个Graphics对象对象是利用FromImage方法创建的（也就是说，在这个绘图平面上绘图是把所有的东西都画到了这个Graphics对象所依赖的图片上，然后需要绘制到屏幕上的时候，只能用DrawImage的办法将这个图片画到屏幕上。偶也想到了用BitBlt的方法以提高效率，但用FromImage方法创建的Graphcis对象的DC是一片漆黑！找了半天利用它的DC的方法也不得要领，在codeproject上找到一个例子是VB.NET的，分析了半天还是没有办法。。。这又是一个疑问，希望知道的高手告诉俺怎么做，在这里先谢了），我就只好用DrawImage了。也想了其它的几个办法，包括GDI和GDI＋混合使用，GDI＋使用了GDI创建的DC。但反过来，就像上面我描述的"一片漆黑"，行不通，我还是先说一下暂时没有使用BitBlt怎样改进的绘图效果吧：
1. 使用SetClip限定你的绘制区域。
2. 仅仅是限定的绘制区域也是不行的，还要把你所要绘制的图片剪切的尽量小，和SetClip配合使用。
3. 多浪费点儿内存使用 CachedBitmap 吧，绘图速度会好很多，DrawCachedBitmap 要比 DrawImage 快一些。
使用了以上几种方法我的程序绘制速度由70多帧提高到了200多帧。。。还可以哦，仍然是DrawImage和DrawCachedBitmap而没有使用BitBlt。嘿嘿好了，今天想到的就这么多，先写这些吧。我的结论是：绘图尽量使用BitBlt 来替代 DrawImage。
贴段示例代码吧，也因为功能性的东西写的比较分散了，就贴一个函数好了，道理是相同的。。。
void CDesktopDlg::DrawRing ()
{
// 设置剪切区域
m_pGraphics-> SetClip (m_pClipRgn);
// 内存中绘制背景
m_pMemTrayGrp-> DrawCachedBitmap (m_pCachedTrayBmp, 0, 0); // <------注意m_pCachedTrayBmp和 // m_pTrayBmp是相同的图片，只是一份复 // 制，用来提高绘图速度。
if (m_lstShowBtnRing.size () > 0)
{
// 内存中绘制按钮
for (list <CEbankButtonAttr*> ::iterator itor = m_lstShowBtnRing.begin ();
itor != m_lstShowBtnRing.end (); itor ++)
{
m_pMemTrayGrp-> DrawCachedBitmap ((*itor)-> m_pCachedBmp, (*itor)-> x,
(*itor)-> y));
}
}
// 绘制到屏幕
m_pGraphics-> DrawImage (m_pTrayBmp, *m_pTrayRect);
}
二：安卓的做法
根据文章的推测，安卓的绘制图片到DC的效率已经是高于50帧的，所以实时去绘制才能达到 控制帧数 在50的效果，不然屏幕显示会出现脱节现象
通过之前介绍的如何自定义View， 我们知道使用它可以做一些简单的动画效果。它通过不断循环的执行View.onDraw方法，每次执行都对内部显示的图形做一些调整，我们假设 onDraw方法每秒执行20次，这样就会形成一个20帧的补间动画效果。但是现实情况是你无法简单的控制View.onDraw的执行帧数，这边说的执 行帧数是指每秒View.onDraw方法被执行多少次，这是为什么呢？首先我们知道，onDraw方法是由系统帮我们调用的，我们是通过调用View的 invalidate方法通知系统需要重新绘制View，然后它就会调用View.onDraw方法。这些都是由系统帮我们实现的，所以我们很难精确去定 义View.onDraw的执行帧数，这个就是为什么我们这边要了解SurfaceView了，它能弥补View的一些不足。
首先我们先写一个自定义View实现动画效果，AnimateViewActivity.java：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
package
com.android777.demo.uicontroller.graphics;
import
android.app.Activity;
import
android.content.Context;
import
android.graphics.Canvas;
import
android.graphics.Color;
import
android.graphics.Paint;
import
android.os.Bundle;
import
android.view.View;
public
class
AnimateViewActivity
extends
Activity {
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
setContentView(
new
AnimateView(
this
));
}
class
AnimateView
extends
View{
float
radius =
10
;
Paint paint;
public
AnimateView(Context context) {
super
(context);
paint =
new
Paint();
paint.setColor(Color.YELLOW);
paint.setStyle(Paint.Style.STROKE);
}
@Override
protected
void
onDraw(Canvas canvas) {
canvas.translate(
200
,
200
);
canvas.drawCircle(
0
,
0
, radius++, paint);
if
(radius >
100
){
radius =
10
;
}
invalidate();
//通过调用这个方法让系统自动刷新视图
}
}
}
|
运行上面的Activity，你将看到一个圆圈，它原始半径是10，然后不断的变大，直到达到100后又恢复到10，这样循环显示，视觉效果上说你将看到一个逐渐变大的圆圈。
上面就是一个简单的自定义View实现的动画效果，它能做的只是简单的动画效果，具有一些局限性。首先你无法控制动画的显示速度，目前它是以最快的 速度显示，但是当你要更快，获取帧数更高的动画呢？ 因为View的帧数是由系统控制的，所以你没办法完成上面的操作。如果你需要编写一个游戏，它需要的帧数比较高，那么View就无能为力了，因为它被设计 出来时本来就不是用来处理一些高帧数显示的。你可以把View理解为一个经过系统优化的，可以用来高效的执行一些帧数比较低动画的对象，它具有特定的使用 场景，比如有一些帧数较低的游戏就可以使用它来完成：贪吃蛇、俄罗斯方块、棋牌类等游戏，因为这些游戏执行的帧数都很低。但是如果是一些实时类的游戏，如 射击游戏、塔防游戏、RPG游戏等就没办法使用View来做，因为它的帧数太低了，会导致动画执行不顺畅。所以我们需要一个能自己控制执行帧数的对 象，SurfaceView因此诞生了。
什么是SurfaceView呢？
为什么是SurfaceView呢？Surface的意思是表层，表面的意思，那么SurfaceView就是指一个在表层的View对象。为什么 说是在表层呢，这是因为它有点特殊跟其他View不一样，其他View是绘制在表层外，而它就是充当表层对象。假设你要在一个球上画画，那么球的表层就当 做你的画布对象，你画的东西会挡住它的表层，我们默认没使用SurfaceView，那么球的表层就是空白的，如果我们使用了SurfaceView，我 们可以理解为我们拿来的球本身表面就具有纹路，你是画再纹路之上的，如果你画的是半透明的，那么你将可以透过你画的东西看到球面本身的纹路。SDK的文档 说到：SurfaceView就是在Window上挖一个洞，它就是显示在这个洞里，其他的View是显示在Window上，所以View可以显式在 SurfaceView之上，你也可以添加一些层在SurfaceView之上。
SurfaceView还有其他的特性，上面我们讲了它可以控制帧数，那它是什么控制的呢？这就需要了解它的使用机制。一般在很多游戏设计中，我们都是开辟一个后台线程计算游戏相关的数据，然后根据这些计算完的新数据再刷新视图对象，由于对View执行绘制操作只能在UI线程上， 所以当你在另外一个线程计算完数据后，你需要调用View.invalidate方法通知系统刷新View对象，所以游戏相关的数据也需要让UI线程能访 问到，这样的设计架构比较复杂，要是能让后台计算的线程能直接访问数据，然后更新View对象那改多好。我们知道View的更新只能在UI线程中，所以使 用自定义View没办法这么做，但是SurfaceView就可以了。它一个很好用的地方就是允许其他线程(不是UI线程)绘制图形(使用Canvas)，根据它这个特性，你就可以控制它的帧数，你如果让这个线程1秒执行50次绘制，那么最后显示的就是50帧。
如何使用SurfaceView？
首先SurfaceView也是一个View，它也有自己的生命周期。因为它需要另外一个线程来执行绘制操作，所以我们可以在它生命周期的初始化阶 段开辟一个新线程，然后开始执行绘制，当生命周期的结束阶段我们插入结束绘制线程的操作。这些是由其内部一个SurfaceHolder对象完成的。 SurfaceHolder，顾名思义，它里面保存了一个队Surface对象的引用，而我们执行绘制方法就是操作这个 Surface，SurfaceHolder因为保存了对Surface的引用，所以使用它来处理Surface的生命周期，说到底 SurfaceView的生命周期其实就是Surface的生命周期，因为SurfaceHolder保存对Surface的引用，所以使用 SurfaceHolder来处理生命周期的初始化。首先我们先看看建立一个SurfaceView的大概步骤，先看看代码：
DemoSurfaceView.java：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
package
com.android777.demo.uicontroller.graphics;
import
android.content.Context;
import
android.view.SurfaceHolder;
import
android.view.SurfaceHolder.Callback;
import
android.view.SurfaceView;
public
class
DemoSurfaceView
extends
SurfaceView
implements
Callback{
public
DemoSurfaceView(Context context) {
super
(context);
init();
//初始化,设置生命周期回调方法
}
private
void
init(){
SurfaceHolder holder = getHolder();
holder.addCallback(
this
);
//设置Surface生命周期回调
}
@Override
public
void
surfaceChanged(SurfaceHolder holder,
int
format,
int
width,
int
height) {
}
@Override
public
void
surfaceCreated(SurfaceHolder holder) {
}
@Override
public
void
surfaceDestroyed(SurfaceHolder holder) {
}
}
|
上面代码我们在SurfaceView的构造方法中执行了init初始化方法，在这个方法里，我们先获取SurfaceView里的 SurfaceHolder对象，然后通过它设置Surface的生命周期回调方法，使用DemoSurfaceView类本身作为回调方法代理类。 surfaceCreated方法，是当SurfaceView被显示时会调用的方法，所以你需要再这边开启绘制的线 程，surfaceDestroyed方法是当SurfaceView被隐藏会销毁时调用的方法，在这里你可以关闭绘制的线程。上面的例子运行后什么也不 显示，因为还没定义一个执行绘制的线程。下面我们修改下代码，使用一个线程绘制一个逐渐变大的圆圈：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
package
com.android777.demo.uicontroller.graphics;
import
android.content.Context;
import
android.graphics.Canvas;
import
android.graphics.Color;
import
android.graphics.Paint;
import
android.view.SurfaceHolder;
import
android.view.SurfaceHolder.Callback;
import
android.view.SurfaceView;
public
class
DemoSurfaceView
extends
SurfaceView
implements
Callback{
LoopThread thread;
public
DemoSurfaceView(Context context) {
super
(context);
init();
//初始化,设置生命周期回调方法
}
private
void
init(){
SurfaceHolder holder = getHolder();
holder.addCallback(
this
);
//设置Surface生命周期回调
thread =
new
LoopThread(holder, getContext());
}
@Override
public
void
surfaceChanged(SurfaceHolder holder,
int
format,
int
width,
int
height) {
}
@Override
public
void
surfaceCreated(SurfaceHolder holder) {
thread.isRunning =
true
;
thread.start();
}
@Override
public
void
surfaceDestroyed(SurfaceHolder holder) {
thread.isRunning =
false
;
try
{
thread.join();
}
catch
(InterruptedException e) {
e.printStackTrace();
}
}
/**
* 执行绘制的绘制线程
* @author Administrator
*
*/
class
LoopThread
extends
Thread{
SurfaceHolder surfaceHolder;
Context context;
boolean
isRunning;
float
radius = 10f;
Paint paint;
public
LoopThread(SurfaceHolder surfaceHolder,Context context){
this
.surfaceHolder = surfaceHolder;
this
.context = context;
isRunning =
false
;
paint =
new
Paint();
paint.setColor(Color.YELLOW);
paint.setStyle(Paint.Style.STROKE);
}
@Override
public
void
run() {
Canvas c =
null
;
while
(isRunning){
try
{
synchronized
(surfaceHolder) {
c = surfaceHolder.lockCanvas(
null
);
doDraw(c);
//通过它来控制帧数执行一次绘制后休息50ms
Thread.sleep(
50
);
}
}
catch
(InterruptedException e) {
e.printStackTrace();
}
finally
{
surfaceHolder.unlockCanvasAndPost(c);
}
}
}
public
void
doDraw(Canvas c){
//这个很重要，清屏操作，清楚掉上次绘制的残留图像
c.drawColor(Color.BLACK);
c.translate(
200
,
200
);
c.drawCircle(
0
,
0
, radius++, paint);
if
(radius >
100
){
radius = 10f;
}
}
}
}
|
上面代码编写了一个使用SurfaceView制作的动画效果，它的效果跟上面自定义View的一样，但是这边的SurfaceView可以控制动 画的帧数。在SurfaceView中内置一个LoopThread线程，这个线程的作用就是用来绘制图形，在SurfaceView中实例化一个 LoopThread实例，一般这个操作会放在SurfaceView的构造方法中。然后通过在SurfaceView中的SurfaceHolder的 生命周期回调方法中插入一些操作，当Surface被创建时(SurfaceView显示在屏幕中时)，开启LoopThread执行绘 制，LoopThread会一直刷新SurfaceView对象，当SurfaceView被隐藏时就停止改线程释放资源。这边有几个地方要注意下：
1.因为SurfaceView允许自定义的线程操作Surface对象执行绘制方法，而你可能同时定义多个线程执行绘制，所以当你获取 SurfaceHolder中的Canvas对象时记得加同步操作，避免两个不同的线程同时操作同一个Canvas对象，当操作完成后记得调用 SurfaceHolder.unlockCanvasAndPost方法释放掉Canvas锁。
2.在调用doDraw执行绘制时，因为SurfaceView的特点，它会保留之前绘制的图形，所以你需要先清空掉上一次绘制时留下的图形。(View则不会，它默认在调用View.onDraw方法时就自动清空掉视图里的东西)。
3. 记得在回调方法：onSurfaceDestroyed方法里将后台执行绘制的LoopThread关闭，这里是使用join方法。这涉及到线程如何关闭 的问题，多数人建议是通过一个标志位：isRunning来判断线程是否该停止运行，如果你想关闭线程只需要将isRunning改成false即可，线 程会自动执行完run方法后退出。
总结：
通过上面的分析，现在大家应该会简单使用SurfaceView了，总的归纳起来SurfaceView和View不同之处有：
1. SurfaceView允许其他线程更新视图对象(执行绘制方法)而View不允许这么做，它只允许UI线程更新视图对象。
2. SurfaceView是放在其他最底层的视图层次中，所有其他视图层都在它上面，所以在它之上可以添加一些层，而且它不能是透明的。
3. 它执行动画的效率比View高，而且你可以控制帧数。
4. 因为它的定义和使用比View复杂，占用的资源也比较多，除非使用View不能完成，再用SurfaceView否则最好用View就可以。(贪吃蛇，俄罗斯方块，棋牌类这种帧数比较低的可以使用View做就好)