Android动画分析之翻转效果.docVIP

Android动画分析之翻转效果 到很多人在问如何实现三维的翻转效果，所以今天在这里简单的给大家分析一下，其实在APIDemo中就有这样一个例子，那么我们就以其为例来学习Android中的翻转动画效果的实现，首先看一下运行效果如下图所示。Android中并没有提供直接做3D翻转的动画，所以关于3D翻转的动画效果需要我们自己实现，那么我们首先来分析一下Animation 和 Transformation。Animation动画的主要接口，其中主要定义了动画的 一些属性比如开始时间，持续时间，是否重复播放等等。而Transformation中则包含一个矩阵和alpha值，矩阵是用来做平移，旋转和缩放动画 的，而alpha值是用来做alpha动画的，要实现3D旋转动画我们需要继承自Animation类来实现，我们需要重载 getTransformation和applyTransformation，在getTransformation中Animation会根据动画的 属性来产生一系列的差值点，然后将这些差值点传给applyTransformation，这个函数将根据这些点来生成不同的 Transformation。下面是具体实现：1. publicclassRotate3dAnimationextendsAnimation 2. /开始角度 3. privatefinalfloatmFromDegrees; 4. /结束角度 5. privatefinalfloatmToDegrees; 6. /中心点 7. privatefinalfloatmCenterX; 8. privatefinalfloatmCenterY; 9. privatefinalfloatmDepthZ; 10. /是否需要扭曲 11. privatefinalbooleanmReverse; 12. /摄像头 13. privateCameramCamera; 14. publicRotate3dAnimation(floatfromDegrees,floattoDegrees, 15. floatcenterX,floatcenterY,floatdepthZ,booleanreverse) 16. mFromDegrees=fromDegrees; 17. mToDegrees=toDegrees; 18. mCenterX=centerX; 19. mCenterY=centerY; 20. mDepthZ=depthZ; 21. mReverse=reverse; 22. 23. 24. Override25. publicvoidinitialize(intwidth,intheight,intparentWidth,intparentHeight) 26. super.initialize(width,height,parentWidth,parentHeight); 27. mCamera=newCamera(); 28. 29. /生成Transformation 30. Override31. protectedvoidapplyTransformation(floatinterpolatedTime,Transformationt) 32. finalfloatfromDegrees=mFromDegrees; 33. /生成中间角度 34. floatdegrees=fromDegrees+(mToDegrees-fromDegrees)*interpolatedTime); 35. 36. finalfloatcenterX=mCenterX; 37. finalfloatcenterY=mCenterY; 38. finalCameracamera=mCamera; 39. 40. finalMatrixmatrix=t.getMatrix(); 41. 42. camera.save(); 43. if(mReverse) 44. camera.translate(0.0f,0.0f,mDepthZ*interpolatedTime); 45. else 46. camera.translate(0.0f,0.0f,mDepthZ*(1.0f-interpolatedTime); 47. 48. camera.rotateY(degrees); 49. /取得变换后的矩阵 50. camera.getMatrix(matrix); 51. camera.restore(); 52. 53. matrix.preTranslate(-centerX,-centerY); 54. matrix.postTranslate(centerX,centerY); 55. 56. 其中包括了旋转的开始和结束角度，中心点、是否扭曲、和一 个Camera，这里我们主要分析applyTransformation函数，其中第一个参数就是通过getTransformation函数传递的差 指点，然后我们根据这个差值通过线性差值算法计算出一个中间角度degrees，Camera类是用来实现绕Y轴旋转后透视投影的，因此我们首先通过 t.getMatrix()取得当前的矩阵，然后通过camera.translate来对矩阵进行平移变换操作，camera.rotateY进行旋 转。这样我们就可以很轻松的实现3D旋转效果了，该例子的原意是通过一个列表来供用户选择要实现翻转的图像，所以我们分析至少需要定义两个控 件：ListView和ImageView（要翻转的图像），主界面的xml布局定义如下所示。1. 5. 6. 12. 13. 19. 20. 然后准备好需要的资源，在onCreate函数中准备好 ListView和ImageView，因为要旋转所以我们需要保存视图的缓存信息，通过 setPersistentDrawingCache(ViewGroup.PERSISTENT_ANIMATION_CACHE);可以设置该功能， 当我们选择列表中的图像资源后在onItemClick中将选择的资源Id对应的图像设置到ImageView中，然后通过applyRotation来 启动一个动画，前面有了Rotate3dAnimation的实现，我们要完成3D翻转动画就很简单，直接构建一个Rotate3dAnimation对 象，设置其属性（包括动画监听），这里将动画的监听设置为DisplayNextView，可以用来显示下一个视图，在其中的动画结束监听 （onAnimationEnd）中，通过一个县城SwapViews来交换两个画面，交换过程则是设置ImageView和ListView的显示相关 属性，并构建一个Rotate3dAnimation对象，对另一个界面进行旋转即可，然后启动动画，整个转换过程实际上就是将第一个界面从0度转好90 度，然后就爱你过第二个界面从90度转到0度，这样就形成了一个翻转动画，完整代码如下，我们也加入了一些必要的注解，大家也可以参考APIDemo中的 Transition3d例子。1. publicclassTransition3dextendsActivityimplements2. AdapterView.OnItemClickListener,View.OnClickListener 3. /照片列表 4. privateListViewmPhotosList; 5. privateViewGroupmContainer; 6. privateImageViewmImageView; 7. 8. /照片的名字，用于显示在list中 9. privatestaticfinalStringPHOTOS_NAMES=newString 10. Lyon, 11. Livermore, 12. TahoePier, 13. LakeTahoe, 14. GrandCanyon, 15. Bodie16. ; 17. 18. /资源id 19. privatestaticfinalintPHOTOS_RESOURCES=newint 20. R.drawable.photo1, 21. R.drawable.photo2, 22. R.drawable.photo3, 23. R.drawable.photo4, 24. R.drawable.photo5, 25. R.drawable.photo6 26. ; 27. 28. Override29. protectedvoidonCreate(BundlesavedInstanceState) 30. super.onCreate(savedInstanceState); 31. 32. setContentView(R.layout.animations_main_screen); 33. 34. mPhotosList=(ListView)findViewById(android.R.id.list); 35. mImageView=(ImageView)findViewById(R.id.picture); 36. mContainer=(ViewGroup)findViewById(R.id.container); 37. 38. /准备ListView 39. finalArrayAdapteradapter=newArrayAdapter(this, 40. android.R.layout.simple_list_item_1,PHOTOS_NAMES); 41. 42. mPhotosList.setAdapter(adapter); 43. mPhotosList.setOnItemClickListener(this); 44. 45. /准备ImageView 46. mImageView.setClickable(true); 47. mImageView.setFocusable(true); 48. mImageView.setOnClickListener(this); 49. 50. /设置需要保存缓存 51. mContainer.setPersistentDrawingCache(ViewGroup.PERSISTENT_ANIMATION_CACHE); 52. 53. 54. /* 55. *Setupanew3Drotationonthecontainerview. 56. * 57. *parampositiontheitemthatwasclickedtoshowapicture,or-1toshowthelist 58. *paramstartthestartangleatwhichtherotationmustbegin 59. *paramendtheendangleoftherotation 60. */61. privatevoidapplyRotation(intposition,floatstart,floatend) 62. /计算中心点 63. finalfloatcenterX=mContainer.getWidth()/2.0f; 64. finalfloatcenterY=mContainer.getHeight()/2.0f; 65. 66. /Createanew3Drotationwiththesuppliedparameter 67. /Theanimationlistenerisusedtotriggerthenextanimation 68. finalRotate3dAnimationrotation= 69. newRotate3dAnimation(start,end,centerX,centerY,310.0f,true); 70. rotation.setDuration(500); 71. rotation.setFillAfter(true); 72. rotation.setInterpolator(newAccelerateInterpolator(); 73. /设置监听 74. rotation.setAnimationListener(newDisplayNextView(position); 75. 76. mContainer.startAnimation(rotation); 77. 78. 79. publicvoidonItemClick(AdapterViewparent,Viewv,intposition,longid) 80. /设置ImageView 81. mImageView.setImageResource(PHOTOS_RESOURCESposition); 82. applyRotation(position,0,90); 83. 84. /点击图像时，返回listview 85. publicvoidonClick(Viewv) 86. applyRotation(-1,180,90); 87. 88. 89. /* 90. *Thisclasslistensfortheendofthefirsthalfoftheanimation. 91. *Itthenpostsanewactionthateffectivelyswapstheviewswhenthecontainer 92. *isrotated90degreesandthusinvisible. 93. */94. privatefinalclassDisplayNextViewimplementsAnimation.AnimationListener 95. privatefinalintmPosition; 96. 97. privateDisplayNextView(intposition) 98. mPosition=position; 99. 100. 101. publicvoidonAnimationStart(Animationanimation) 102. 103. /动画结束 104. publicvoidonAnimationEnd(Animationanimation) 105. mContainer.post(newSwapViews(mPosition); 106. 107. 108. publicvoidonAnimationRepeat(Animationanimation) 109. 110. 111. 112. /* 113. *Thisclassisresponsibleforswappingtheviewsandstartthesecond 114. *halfoftheanimation. 115. */116. privatefinalclassSwapViewsimplementsRunnable 117. privatefinalintmPosition; 118. 119. publicSwapViews(intposition) 120. mPosition=position; 121. 122. 123. publicvoidrun() 124. finalfloatcenterX=mContainer.getWidth()/2.0f; 125. finalfloatcenterY=mContainer.getHe