Android\OPhone动画分析之翻转效果

看到很多人在问如何实现三维的翻转效果，所以今天在这里简单的给大家分析一下，其实在APIDemo中就有这样一个例子，那么我们就以其为例来学习Android中的翻转动画效果的实现，首先看一下运行效果如下图所示。

Android中并没有提供直接做3D翻转的动画，所以关于3D翻转的动画效果需要我们自己实现，那么我们首先来分析一下Animation 和 Transformation。

Animation动画的主要接口，其中主要定义了动画的一些属性比如开始时间，持续时间，是否重复播放等等。而Transformation中则包含一个矩阵和alpha值，矩阵是用来做平移，旋转和缩放动画的，而alpha值是用来做alpha动画的，要实现3D旋转动画我们需要继承自Animation类来实现，我们需要重载getTransformation和applyTransformation，在getTransformation中Animation会根据动画的属性来产生一系列的差值点，然后将这些差值点传给applyTransformation，这个函数将根据这些点来生成不同的Transformation。下面是具体实现：

                    publicclassRotate3dAnimationextendsAnimation{ 
            //开始角度 
            privatefinalfloatmFromDegrees; 
            //结束角度 
            privatefinalfloatmToDegrees; 
            //中心点 
            privatefinalfloatmCenterX; 
            privatefinalfloatmCenterY; 
            privatefinalfloatmDepthZ; 
            //是否需要扭曲 
            privatefinalbooleanmReverse; 
            //摄像头 
            privateCameramCamera; 
            publicRotate3dAnimation(floatfromDegrees,floattoDegrees, 
            floatcenterX,floatcenterY,floatdepthZ,booleanreverse){ 
            mFromDegrees=fromDegrees; 
            mToDegrees=toDegrees; 
            mCenterX=centerX; 
            mCenterY=centerY; 
            mDepthZ=depthZ; 
            mReverse=reverse; 
            } 
            
            @Override
            publicvoidinitialize(intwidth,intheight,intparentWidth,intparentHeight){ 
            super.initialize(width,height,parentWidth,parentHeight); 
            mCamera=newCamera(); 
            } 
            //生成Transformation 
            @Override
            protectedvoidapplyTransformation(floatinterpolatedTime,Transformationt){ 
            finalfloatfromDegrees=mFromDegrees; 
            //生成中间角度 
            floatdegrees=fromDegrees+((mToDegrees-fromDegrees)*interpolatedTime); 
            
            finalfloatcenterX=mCenterX; 
            finalfloatcenterY=mCenterY; 
            finalCameracamera=mCamera; 
            
            finalMatrixmatrix=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); 
            } 
            }

其中包括了旋转的开始和结束角度，中心点、是否扭曲、和一个Camera，这里我们主要分析applyTransformation函数，其中第一个参数就是通过getTransformation函数传递的差指点，然后我们根据这个差值通过线性差值算法计算出一个中间角度degrees，Camera类是用来实现绕Y轴旋转后透视投影的，因此我们首先通过t.getMatrix()取得当前的矩阵，然后通过camera.translate来对矩阵进行平移变换操作，camera.rotateY进行旋转。这样我们就可以很轻松的实现3D旋转效果了，该例子的原意是通过一个列表来供用户选择要实现翻转的图像，所以我们分析至少需要定义两个控件：ListView和ImageView（要翻转的图像），主界面的xml布局定义如下所示。

                    <FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            
            <ListView
            android:id="@android:id/list"
            android:persistentDrawingCache="animation|scrolling"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layoutAnimation="@anim/layout_bottom_to_top_slide"/>
            
            <ImageView
            android:id="@+id/picture"
            android:scaleType="fitCenter"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"/>
            
            </FrameLayout>

然后准备好需要的资源，在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例子。

                    publicclassTransition3dextendsActivityimplements
            AdapterView.OnItemClickListener,View.OnClickListener{ 
            //照片列表 
            privateListViewmPhotosList; 
            privateViewGroupmContainer; 
            privateImageViewmImageView; 
            
            //照片的名字，用于显示在list中 
            privatestaticfinalString[]PHOTOS_NAMES=newString[]{ 
            "Lyon", 
            "Livermore", 
            "TahoePier", 
            "LakeTahoe", 
            "GrandCanyon", 
            "Bodie"
            }; 
            
            //资源id 
            privatestaticfinalint[]PHOTOS_RESOURCES=newint[]{ 
            R.drawable.photo1, 
            R.drawable.photo2, 
            R.drawable.photo3, 
            R.drawable.photo4, 
            R.drawable.photo5, 
            R.drawable.photo6 
            }; 
            
            @Override
            protectedvoidonCreate(BundlesavedInstanceState){ 
            super.onCreate(savedInstanceState); 
            
            setContentView(R.layout.animations_main_screen); 
            
            mPhotosList=(ListView)findViewById(android.R.id.list); 
            mImageView=(ImageView)findViewById(R.id.picture); 
            mContainer=(ViewGroup)findViewById(R.id.container); 
            
            //准备ListView 
            finalArrayAdapter<String>adapter=newArrayAdapter<String>(this, 
            android.R.layout.simple_list_item_1,PHOTOS_NAMES); 
            
            mPhotosList.setAdapter(adapter); 
            mPhotosList.setOnItemClickListener(this); 
            
            //准备ImageView 
            mImageView.setClickable(true); 
            mImageView.setFocusable(true); 
            mImageView.setOnClickListener(this); 
            
            //设置需要保存缓存 
            mContainer.setPersistentDrawingCache(ViewGroup.PERSISTENT_ANIMATION_CACHE); 
            } 
            
            /** 
            *Setupanew3Drotationonthecontainerview. 
            * 
            *@parampositiontheitemthatwasclickedtoshowapicture,or-1toshowthelist 
            *@paramstartthestartangleatwhichtherotationmustbegin 
            *@paramendtheendangleoftherotation 
            */
            privatevoidapplyRotation(intposition,floatstart,floatend){ 
            //计算中心点 
            finalfloatcenterX=mContainer.getWidth()/2.0f; 
            finalfloatcenterY=mContainer.getHeight()/2.0f; 
            
            //Createanew3Drotationwiththesuppliedparameter 
            //Theanimationlistenerisusedtotriggerthenextanimation 
            finalRotate3dAnimationrotation= 
            newRotate3dAnimation(start,end,centerX,centerY,310.0f,true); 
            rotation.setDuration(500); 
            rotation.setFillAfter(true); 
            rotation.setInterpolator(newAccelerateInterpolator()); 
            //设置监听 
            rotation.setAnimationListener(newDisplayNextView(position)); 
            
            mContainer.startAnimation(rotation); 
            } 
            
            publicvoidonItemClick(AdapterViewparent,Viewv,intposition,longid){ 
            //设置ImageView 
            mImageView.setImageResource(PHOTOS_RESOURCES[position]); 
            applyRotation(position,0,90); 
            } 
            //点击图像时，返回listview 
            publicvoidonClick(Viewv){ 
            applyRotation(-1,180,90); 
            } 
            
            /** 
            *Thisclasslistensfortheendofthefirsthalfoftheanimation. 
            *Itthenpostsanewactionthateffectivelyswapstheviewswhenthecontainer 
            *isrotated90degreesandthusinvisible. 
            */
            privatefinalclassDisplayNextViewimplementsAnimation.AnimationListener{ 
            privatefinalintmPosition; 
            
            privateDisplayNextView(intposition){ 
            mPosition=position; 
            } 
            
            publicvoidonAnimationStart(Animationanimation){ 
            } 
            //动画结束 
            publicvoidonAnimationEnd(Animationanimation){ 
            mContainer.post(newSwapViews(mPosition)); 
            } 
            
            publicvoidonAnimationRepeat(Animationanimation){ 
            } 
            } 
            
            /** 
            *Thisclassisresponsibleforswappingtheviewsandstartthesecond 
            *halfoftheanimation. 
            */
            privatefinalclassSwapViewsimplementsRunnable{ 
            privatefinalintmPosition; 
            
            publicSwapViews(intposition){ 
            mPosition=position; 
            } 
            
            publicvoidrun(){ 
            finalfloatcenterX=mContainer.getWidth()/2.0f; 
            finalfloatcenterY=mContainer.getHeight()/2.0f; 
            Rotate3dAnimationrotation; 
             
            if(mPosition>-1){ 
            //显示ImageView 
            mPhotosList.setVisibility(View.GONE); 
            mImageView.setVisibility(View.VISIBLE); 
            mImageView.requestFocus(); 
            
            rotation=newRotate3dAnimation(90,180,centerX,centerY,310.0f,false); 
            }else{ 
            //返回listview 
            mImageView.setVisibility(View.GONE); 
            mPhotosList.setVisibility(View.VISIBLE); 
            mPhotosList.requestFocus(); 
            
            rotation=newRotate3dAnimation(90,0,centerX,centerY,310.0f,false); 
            } 
            
            rotation.setDuration(500); 
            rotation.setFillAfter(true); 
            rotation.setInterpolator(newDecelerateInterpolator()); 
            //开始动画 
            mContainer.startAnimation(rotation); 
            } 
            } 
            
            }

更多相关文章

随机推荐