Android 滑动效果进阶篇(五)—— 3D旋转

简介:

http://blog.csdn.net/sunboy_2050/article/details/7483166

前面介绍了利用Android自带的控件,进行滑动翻页制作效果,现在我们通过代码实现一些滑动翻页的动画效果。

Animation实现动画有两个方式:帧动画(frame-by-frame animation)和补间动画(tweened animation


本示例通过继承Animation自定义Rotate3D,实现3D翻页效果。效果图如下:



1、Rotate3D(Animation)

首先,自定义Animation的3D动画类Rotate3D

[java]  view plain copy print ?
  1. public class Rotate3D extends Animation {  
  2.     private float fromDegree;   // 旋转起始角度  
  3.     private float toDegree;     // 旋转终止角度  
  4.     private float mCenterX;     // 旋转中心x  
  5.     private float mCenterY;     // 旋转中心y  
  6.     private Camera mCamera;  
  7.   
  8.     public Rotate3D(float fromDegree, float toDegree, float centerX, float centerY) {  
  9.         this.fromDegree = fromDegree;  
  10.         this.toDegree = toDegree;  
  11.         this.mCenterX = centerX;  
  12.         this.mCenterY = centerY;  
  13.   
  14.     }  
  15.   
  16.     @Override  
  17.     public void initialize(int width, int height, int parentWidth, int parentHeight) {  
  18.         super.initialize(width, height, parentWidth, parentHeight);  
  19.         mCamera = new Camera();  
  20.     }  
  21.   
  22.     @Override  
  23.     protected void applyTransformation(float interpolatedTime, Transformation t) {  
  24.         final float FromDegree = fromDegree;  
  25.         float degrees = FromDegree + (toDegree - fromDegree) * interpolatedTime;    // 旋转角度(angle)  
  26.         final float centerX = mCenterX;  
  27.         final float centerY = mCenterY;  
  28.         final Matrix matrix = t.getMatrix();  
  29.   
  30.         if (degrees <= -76.0f) {  
  31.             degrees = -90.0f;  
  32.             mCamera.save();  
  33.             mCamera.rotateY(degrees);       // 旋转  
  34.             mCamera.getMatrix(matrix);  
  35.             mCamera.restore();  
  36.         } else if (degrees >= 76.0f) {  
  37.             degrees = 90.0f;  
  38.             mCamera.save();  
  39.             mCamera.rotateY(degrees);  
  40.             mCamera.getMatrix(matrix);  
  41.             mCamera.restore();  
  42.         } else {  
  43.             mCamera.save();  
  44.             mCamera.translate(00, centerX);       // 位移x  
  45.             mCamera.rotateY(degrees);  
  46.             mCamera.translate(00, -centerX);  
  47.             mCamera.getMatrix(matrix);  
  48.             mCamera.restore();  
  49.         }  
  50.   
  51.         matrix.preTranslate(-centerX, -centerY);  
  52.         matrix.postTranslate(centerX, centerY);  
  53.     }  
  54. }  

然后,实例化Rotate3D的旋转方向

[java]  view plain copy print ?
  1. public void initAnimation() {  
  2.     // 获取旋转中心  
  3.     DisplayMetrics dm = new DisplayMetrics();  
  4.     dm = getResources().getDisplayMetrics();  
  5.     mCenterX = dm.widthPixels / 2;  
  6.     mCenterY = dm.heightPixels / 2;  
  7.       
  8.     // 定义旋转方向  
  9.     int duration = 1000;  
  10.     lQuest1Animation = new Rotate3D(0, -90, mCenterX, mCenterY);    // 下一页的【question1】旋转方向(从0度转到-90,参考系为水平方向为0度)  
  11.     lQuest1Animation.setFillAfter(true);  
  12.     lQuest1Animation.setDuration(duration);  
  13.   
  14.     lQuest2Animation = new Rotate3D(900, mCenterX, mCenterY);     // 下一页的【question2】旋转方向(从90度转到0,参考系为水平方向为0度)(起始第一题)  
  15.     lQuest2Animation.setFillAfter(true);  
  16.     lQuest2Animation.setDuration(duration);  
  17.   
  18.     rQuest1Animation = new Rotate3D(090, mCenterX, mCenterY);     // 上一页的【question1】旋转方向(从0度转到90,参考系为水平方向为0度)  
  19.     rQuest1Animation.setFillAfter(true);  
  20.     rQuest1Animation.setDuration(duration);  
  21.   
  22.     rQuest2Animation = new Rotate3D(-900, mCenterX, mCenterY);    // 上一页的【question2】旋转方向(从-90度转到0,参考系为水平方向为0度)  
  23.     rQuest2Animation.setFillAfter(true);  
  24.     rQuest2Animation.setDuration(duration);  
  25. }  

2、Activity

首先,定义两个布局文件,用于旋转的画面切换

main.xml

[html]  view plain copy print ?
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:id="@+id/layout_main"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="wrap_content"              
  5.     android:orientation="vertical">  
  6.   
  7. ...  
  8.   
  9. </LinearLayout>  

next.xml

[html]  view plain copy print ?
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:id="@+id/layout_next"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="wrap_content"              
  5.     android:orientation="vertical">  
  6.   
  7. ...  
  8.   
  9. </LinearLayout>  
限于篇幅,完整布局文件请详见源码 ^_^


然后,初始化两个旋转的布局文件资源

[java]  view plain copy print ?
  1. private void initMain(){  
  2.        setContentView(R.layout.main);  
  3.   
  4.     layoutmain = (LinearLayout)findViewById(R.id.layout_main);  
  5.     btn_MainLast = (Button)findViewById(R.id.main_last);  
  6.     btn_MainNext = (Button)findViewById(R.id.main_next);  
  7.       
  8.     btn_MainLast.setOnClickListener(listener);  
  9.     btn_MainNext.setOnClickListener(listener);  
  10. }  
  11.   
  12. private void initNext(){  
  13.        setContentView(R.layout.next);  
  14.   
  15.     layoutnext = (LinearLayout)findViewById(R.id.layout_next);  
  16.     btn_NextLast = (Button)findViewById(R.id.next_last);  
  17.     btn_NextNext = (Button)findViewById(R.id.next_next);  
  18.       
  19.     btn_NextLast.setOnClickListener(listener);  
  20.     btn_NextNext.setOnClickListener(listener);  
  21. }  

最后,设置布局文件中的按钮监听事件,响应3D旋转动画和方向

[java]  view plain copy print ?
  1. private View.OnClickListener listener = new View.OnClickListener() {  
  2.     @Override  
  3.     public void onClick(View v) {  
  4.         switch (v.getId()) {  
  5.         case R.id.main_last:    // 上一页  
  6.             layoutmain.startAnimation(lQuest1Animation);    // 当前页向左旋转(0,-90)  
  7.             initNext();  
  8.             layoutnext.startAnimation(lQuest2Animation);    // 下一页向左旋转(90, 0)  
  9.             break;  
  10.         case R.id.main_next:    // 下一页  
  11.             layoutmain.startAnimation(rQuest1Animation);    // 当前页向右旋转(0,90)  
  12.             initNext();  
  13.             layoutnext.startAnimation(rQuest2Animation);    // 下一页向右旋转(-90, 0)  
  14.             break;  
  15.         case R.id.next_last:  
  16.             layoutnext.startAnimation(lQuest1Animation);  
  17.             initMain();  
  18.             layoutmain.startAnimation(lQuest2Animation);  
  19.             break;  
  20.         case R.id.next_next:  
  21.             layoutnext.startAnimation(rQuest1Animation);  
  22.             initMain();  
  23.             layoutmain.startAnimation(rQuest2Animation);  
  24.             break;  
  25.         }  
  26.     }  
  27. };  


源码下载




参考推荐:

animation


相关文章
|
9月前
|
JavaScript Android开发
使用贝叶斯曲线滑动安卓屏幕(autojsPro7)
使用贝叶斯曲线滑动安卓屏幕(autojsPro7)
288 0
|
9月前
|
XML Java Android开发
Android Studio App开发之对图片进行简单加工(包括放缩,旋转等等 附源码)
Android Studio App开发之对图片进行简单加工(包括放缩,旋转等等 附源码)
190 0
|
6月前
|
Android开发
Android使用ViewPager做无限轮播,人为滑动时停止
Android使用ViewPager做无限轮播,人为滑动时停止
108 2
|
7月前
|
Android开发
Android仿高德首页三段式滑动
Android仿高德首页三段式滑动
184 0
|
9月前
|
Android开发
Android使用ViewPager实现图片轮播系列之三:手动滑动 + 左右箭头(1)
Android使用ViewPager实现图片轮播系列之三:手动滑动 + 左右箭头(1)
|
8月前
|
编解码 Android开发
Android 解决TextView多行滑动与NestedScrollView嵌套滑动冲突的问题
Android 解决TextView多行滑动与NestedScrollView嵌套滑动冲突的问题
142 0
|
8月前
|
XML Android开发 UED
|
移动开发 Android开发
h5滑动底部兼容安卓
h5滑动底部兼容安卓
107 0
|
9月前
|
API Android开发 开发者
【Android App】Vulkan实现宇宙中旋转雷达动画效果(附源码和原始视频 超详细必看)
【Android App】Vulkan实现宇宙中旋转雷达动画效果(附源码和原始视频 超详细必看)
306 1
|
9月前
|
Android开发 Kotlin 索引
Android Compose——ScrollableTabRow和LazyColumn同步滑动
Android Compose——ScrollableTabRow和LazyColumn同步滑动
367 0

热门文章

最新文章

  • 1
    如何修复 Android 和 Windows 不支持视频编解码器的问题?
  • 2
    【03】优雅草央千澈详解关于APP签名以及分发-上架完整流程-第三篇安卓APP上架华为商店后面的步骤-华为应用商店相对比较麻烦一些-华为商店安卓上架
  • 3
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 4
    Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
  • 5
    【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 6
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 7
    【iOS-cocos2d-X 游戏开发之十三】cocos2dx通过Jni调用Android的Java层代码(上)
  • 8
    Android数据库开发——SQLite
  • 9
    Android Studio安装使用图文教程
  • 10
    站在巨人的肩膀上---重新自定义 android- ExpandableListView 收缩类,实现列表的可收缩扩展