OPhone动画原理及示例

OPhone平台提供了一套完整的动画框架，使得开发者可以用它来开发各种动画效果，本文将向读者阐述OPhone平台的动画框架是如何实现的。任何一个框架都有其优势和局限性，只有明白了其实现原理，开发者才能知道哪些功能可以利用框架来实现，哪些功能须用其他途径实现。 (作者：鲁威）6 |3 W6 X5 c, _  W  G9 {( Q
OPhone动画框架原理6 H' r9 C5 u$ S1 S  d
        现有的OPhone动画框架是建立在View的级别上的，在View类中有一个接口startAnimation来使动画开始，startAnimation函数会将一个Animation类别的参数传给View，这个Animation是用来指定我们使用的是哪种动画，现有的动画有平移，缩放，旋转以及alpha变换等。如果需要更复杂的效果，我们还可以将这些动画组合起来，这些在下面会讨论到。; f$ H2 R) i1 F# n
       要了解OPhone动画是如何画出来的，我们首先要了解OPhone的View是如何组织在一起，以及他们是如何画自己的内容的。OPhone的View层次结构见图1：
) P+ V# g+ k! X! p( |1 L

3 G+ S2 ]7 I) Z, L

        当一个ChildView要重画时，它会调用其成员函数invalidate()这个函数将通知其ParentView这个ChildView要重画，这个过程一直向上遍历到ViewRoot，当ViewRoot收到这个通知后就会调用DecorView的dispatchDraw()这个函数，dispatchDraw会调用其每一个ChildView的draw()函数，View的draw()函数就是它具体画它的内容的地方，它会调用onDraw函数，对用户来说只需要重载View::onDraw()就可以了。View::onDraw()有一个画布参数Canvas,画布顾名思义就是画东西的地方，OPhone会为每一个View设置好画布，View就可以调用Canvas的方法，比如：drawText, drawBitmap, drawPath等等去画内容。每一个ChildView的画布是由其ParentView设置的，ParentView根据ChildView在其内部的布局来调整Canvas，其中画布的属性之一就是定义和ChildView相关的坐标系，默认是横轴为X轴，从左至右，值逐渐增大，竖轴为Y轴，从上至下，值逐渐增大,见图2：

5 s" t$ I' K" m/ Z. L1 S

* Y8 \0 U  t  ]7 K, B0 Y

        OPhone动画就是通过ParentView来调整ChildView的画布坐标系来实现的，下面以平移动画来做示例，见图3，假设在动画开始时ChildView在ParentView中的初始位置在(100,200)处，这时ParentView会根据这个坐标来设置ChildView的画布，在ParentView的dispatchDraw中它发现ChildView有一个平移动画，而且当前的平移位置是(100, 200)，于是它通过调用画布的函数traslate(100, 200)来告诉ChildView在这个位置开始画，这就是动画的第一帧。如果ParentView发现ChildView有动画，就会不断的调用invalidate()这个函数，这样就会导致自己会不断的重画，就会不断的调用dispatchDraw这个函数，这样就产生了动画的后续帧，当再次进入dispatchDraw时，ParentView根据平移动画产生出第二帧的平移位置(500, 200)，然后继续执行上述操作，然后产生第三帧，第四帧，直到动画播完。具体算法描述如下：

view plaincopy to clipboardprint?
  g$ t- G. r; R: V- w' v8 E2 |

• dispatchDraw()   
• {   
•     ....   
•     Animation a = ChildView.getAnimation()   
•     Transformation tm = a.getTransformation();   
•     Use tm to set ChildView's Canvas;   
•     Invalidate();   
•     ....   
• }  

dispatchDraw() { .... Animation a = ChildView.getAnimation() Transformation tm = a.getTransformation(); Use tm to set ChildView's Canvas; Invalidate(); .... }

        以上是以平移动画为例子来说明动画的产生过程，这其中又涉及到两个重要的类型，Animation 和 Transformation，这两个类是实现动画的主要的类，Animation中主要定义了动画的一些属性比如开始时间，持续时间，是否重复播放等等，这个类主要有两个重要的函数：getTransformation 和 applyTransformation，在getTransformation中Animation会根据动画的属性来产生一系列的差值点，然后将这些差值点传给applyTransformation，这个函数将根据这些点来生成不同的Transformation，Transformation中包含一个矩阵和alpha值，矩阵是用来做平移，旋转和缩放动画的，而alpha值是用来做alpha动画的，以上面的平移矩阵为例子，当调用dispatchDraw时会调用getTransformation来得到当前的Transformation，这个Transformation中的矩阵如下：

/ F$ Q$ n, ?6 W0 L& o

        所以具体的动画只需要重载applyTransformation这个函数即可，类层次图如下：4 k" ?  Q1 U3 s/ ?# Q6 L9 j# N; t5 Y

4 `5 a* V) K  N0 p( I0 h- C; a- H# i

2 {6 e* k* J5 C

" a1 B! t( }, q% J- z5 V

        用户可以定义自己的动画类，只需要继承Animation类，然后重载applyTransformation这个函数。对动画来说其行为主要靠差值点来决定的，比如，我们想开始动画是逐渐加快的或者逐渐变慢的，或者先快后慢的，或者是匀速的，这些功能的实现主要是靠差值函数来实现的，OPhone提供了一个Interpolator的基类，你要实现什么样的速度可以重载其函数getInterpolation，在Animation的getTransformation中生成差值点时，会用到这个函数。
        以上就是OPhone的动画框架的原理，了解了原理对我们的开发来说就可以清晰的把握动画的每一帧是怎样生成的，这样便于开发和调试。

4 ~, n" x7 p( V! B  i9 u

动画示例

        在这个例子中，将要实现一个绕Y轴旋转的动画，这样可以看到3D透视投影的效果，代码如下：

( [* T' H4 a  K8 G) U4 z$ ]
; Y: m7 k! b. `! \
view plaincopy to clipboardprint?

• public: [# n8 [4 ^' Q% V0 P
  class Rotate3dAnimation extends Animation {   
• 
  private
  final2 N- z; W3 b! N
  float mFromDegrees;   
• - W: }" \1 ?) F9 r( F
  private$ z, q# F& ~! a' g
  final: [# f3 o; k: @8 y
  float mToDegrees;   
• 
  private7 z% _7 h6 @% y& j. J% l
  final, J3 n! y0 \9 A; ^: w7 S
  float mCenterX;   
• 2 l, z' m9 @6 i% e8 }; Y& k' q
  private+ E2 P, A6 }# ~; _) k( _
  final5 X5 |7 q+ x1 c) X" u* N- y/ u  s
  float mCenterY;   
• , i- F1 ~6 g7 r% v( z7 |7 m( X6 f0 @
  private) e0 b9 |# x/ |3 ?/ A
  final
  float mDepthZ;   
• ' w: j! k! x* r! |1 D
  private
  final
  boolean mReverse;   
• # R6 O: L8 {6 @) I7 i5 r: ~+ }4 N6 M' x
  private Camera mCamera;   
• 2 o0 W8 I, s. g
  
• 
  /**
•      * Creates a new 3D rotation on the Y axis. The rotation is defined by its  
•      * start angle and its end angle. Both angles are in degrees. The rotation  
•      * is performed around a center point on the 2D space, definied by a pair  
•      * of X and Y coordinates, called centerX and centerY. When the animation  
•      * starts, a translation on the Z axis (depth) is performed. The length  
•      * of the translation can be specified, as well as whether the translation  
•      * should be reversed in time.  
•      *  
•      * @param fromDegrees the start angle of the 3D rotation  
•      * @param toDegrees the end angle of the 3D rotation  
•      * @param centerX the X center of the 3D rotation  
•      * @param centerY the Y center of the 3D rotation  
•      * @param reverse true if the translation should be reversed, false otherwise  
•      */+ I% j/ E0 W! {
  
• 
  public Rotate3dAnimation(float fromDegrees, float toDegrees,   
• 
  float centerX, float centerY, float depthZ, boolean reverse) {   
•         mFromDegrees = fromDegrees;   
•         mToDegrees = toDegrees;   
•         mCenterX = centerX;   
•         mCenterY = centerY;   
•         mDepthZ = depthZ;   
•         mReverse = reverse;   
•     }   
• % s* E) G* D# Q$ A) T7 w4 G. X
  
• 0 `5 w& S) q7 k1 l; S
  @Override
  
• 0 \- V* y* c9 |7 n
  public" [7 d' K) l+ a( i/ K1 O* ]
  void initialize(int width, int height, int parentWidth, int parentHeight) {   
• 
  super.initialize(width, height, parentWidth, parentHeight);   
•         mCamera = new Camera();   
•     }   
• 
  
• 
  @Override# T; [; K  M; ]3 P9 i1 r9 D
  
• 
  protected) [# q: L5 s  m1 T4 ]6 \
  void applyTransformation(float interpolatedTime, Transformation t) {   
• 
  final. \% f. t6 ~& t( e8 a6 \
  float fromDegrees = mFromDegrees;   
• # K! [+ ~# Z' O5 E' ?/ G2 {
  float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);   
• 
  
• 
  final- o  c; m: `  v* {8 ~
  float centerX = mCenterX;   
• " r0 M! O4 J3 S- U4 i8 G
  final
  float centerY = mCenterY;   
• 8 ?2 f& l: `  T! I
  final Camera camera = mCamera;   
• 
  
• 
  final Matrix matrix = t.getMatrix();   
• 
  
•         camera.save();   
• 
  if (mReverse) {   
•             camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);   
•         } else {   
•             camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));   
•         }   
•         camera.rotateY(degrees);   
•         camera.getMatrix(matrix);   
•         camera.restore();   
• 
  
•         matrix.preTranslate(-centerX, -centerY);   
•         matrix.postTranslate(centerX, centerY);   
•     }   
• }  

3 f; Q3 c* N6 h9 U
public class Rotate3dAnimation extends Animation { private final float mFromDegrees; private final float mToDegrees; private final float mCenterX; private final float mCenterY; private final float mDepthZ; private final boolean mReverse; private Camera mCamera; /** * Creates a new 3D rotation on the Y axis. The rotation is defined by its * start angle and its end angle. Both angles are in degrees. The rotation * is performed around a center point on the 2D space, definied by a pair * of X and Y coordinates, called centerX and centerY. When the animation * starts, a translation on the Z axis (depth) is performed. The length * of the translation can be specified, as well as whether the translation * should be reversed in time. * * @param fromDegrees the start angle of the 3D rotation * @param toDegrees the end angle of the 3D rotation * @param centerX the X center of the 3D rotation * @param centerY the Y center of the 3D rotation * @param reverse true if the translation should be reversed, false otherwise */ public Rotate3dAnimation(float fromDegrees, float toDegrees, float centerX, float centerY, float depthZ, boolean reverse) { mFromDegrees = fromDegrees; mToDegrees = toDegrees; mCenterX = centerX; mCenterY = centerY; mDepthZ = depthZ; mReverse = reverse; } @Override public void initialize(int width, int height, int parentWidth, int parentHeight) { super.initialize(width, height, parentWidth, parentHeight); mCamera = new Camera(); } @Override protected void applyTransformation(float interpolatedTime, Transformation t) { final float fromDegrees = mFromDegrees; float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime); final float centerX = mCenterX; final float centerY = mCenterY; final Camera camera = mCamera; final Matrix matrix = t.getMatrix(); camera.save(); if (mReverse) { camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime); } else { camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime)); } camera.rotateY(degrees); camera.getMatrix(matrix); camera.restore(); matrix.preTranslate(-centerX, -centerY); matrix.postTranslate(centerX, centerY); } }       在这个例子中我们重载了applyTransformation函数，interpolatedTime就是getTransformation函数传下来的差值点，在这里做了一个线性插值算法来生成中间角度：float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);( f  m% r( C7 t( h$ f/ p# S) B
       Camera类是用来实现绕Y轴旋转后透视投影的，我们只需要其返回的Matrix值,这个值会赋给Transformation中的矩阵成员，当ParentView去为ChildView设置画布时，就会用它来设置坐标系，这样ChildView画出来的效果就是一个绕Y轴旋转同时带有透视投影的效果。利用这个效果便可以作出像iPhone的CoverFlow这样比较酷的动画。
9 c, z3 n/ i$ L. r
结束语6 q- G3 Q) t# d; }
        本文介绍了OPhone动画框架的基本原理，可以帮助开发者深入理解OPhone的动画是如何实现的，从而能够充分利用现有框架来作出够眩，够酷的动画效果。