-
Android案例手册 - 多个按钮立体3D翻书效果
往期文章分享 本文约8.6千字，新手阅读需要11分钟，复习需要4分钟 【收藏随时查阅不再迷路】
👉关于作者
众所周知，人生是一个漫长的流程，不断克服困难，不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考，于是我决定将自己的思考，经验和故事全部分享出来，以此寻找共鸣 ！！！
专注于Android/Unity和各种游戏开发技巧，以及各种资源分享（网站、工具、素材、源码、游戏等）
有什么需要欢迎私我，交流群让学习不再孤单。
👉前提
这是小空坚持写的Android新手向系列，欢迎品尝。
大佬（√）
新手（√√√）
👉实践过程
说真的，这效果不知道咋形容比较好，就起了个【多个按钮立体3D翻书效果】的标题。
这个讲的动画实现起来就有些复杂了。
我们都知道，旋转通常分为x轴y轴和z轴，z轴其实就是基本的旋转动画RotateAnimation，所以立体的通常都是绕X轴或绕y轴。
实现步骤
1.继承Animation重新applyTransformation，然后通过方法applyTransformation中的回调参数来控制动画。其中interpolatedTime是插值时间用来帮助计算旋转的角度，Transformation用来控制变换聚辰
2.然后利用Camera来控制旋转算法进而实现旋转操作
我们先摆出整体代码，之后在详细看代码说明
😜Java版
public class MenuAnimationJava { /** * 开始动画 展开 * * @param view */ public static void startAnim(Button... view) { int size = view.length; for (int i = 0; i < view.length; i++) { final int position = i; //延迟的时间 final double delay = 500 * (position * 1.0f / size); Log.e("TAG", "startAnim: 延迟的时间" + delay); new Handler(Looper.getMainLooper()).postDelayed(new Runnable() { @Override public void run() { animateView(view[position]); } }, (long) delay); } } private static void animateView(View view) { view.setEnabled(true); view.setVisibility(View.VISIBLE); FlipAnimationJava rotation =new FlipAnimationJava(90, 0, 0.0f, view.getHeight() / 2.0f); rotation.setDuration(200); rotation.setFillAfter(true); rotation.setInterpolator(new AccelerateInterpolator()); view.startAnimation(rotation); } /** * 关闭动画 * * @param view */ public static void closeAnim(Button... view) { int size = view.length; for (int i = 0; i < view.length; i++) { final int position = i; //延迟的时间 final double delay = 800 * (position * 1.0f / size); Log.e("TAG", "startAnim: 延迟的111时间" + delay); new Handler(Looper.getMainLooper()).postDelayed(new Runnable() { @Override public void run() { animateHideView(view[position]); } }, (long) delay); } } private static void animateHideView(final View view) { view.setVisibility(View.VISIBLE); FlipAnimationJava rotation =new FlipAnimationJava(0, 90, 0.0f, view.getHeight() / 2.0f); rotation.setDuration(200); rotation.setFillAfter(true); rotation.setInterpolator(new AccelerateInterpolator()); view.startAnimation(rotation); rotation.setAnimationListener(new Animation.AnimationListener() { @Override public void onAnimationStart(Animation animation) { } @Override public void onAnimationEnd(Animation animation) { view.setVisibility(View.INVISIBLE); view.setEnabled(false); } @Override public void onAnimationRepeat(Animation animation) { } }); } } class FlipAnimationJava extends Animation { private final float mFromDegrees; private final float mToDegrees; private final float mCenterX; private final float mCenterY; private Camera mCamera; public FlipAnimationJava(float fromDegrees, float toDegrees,float centerX, float centerY) { mFromDegrees = fromDegrees; mToDegrees = toDegrees; mCenterX = centerX; mCenterY = centerY; } @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) { //计算出角度 float degrees = mFromDegrees + ((mToDegrees - mFromDegrees) * interpolatedTime); final float centerX = mCenterX; final float centerY = mCenterY; final Camera camera = mCamera; final Matrix matrix = t.getMatrix(); // 将当前的摄像头位置保存下来，以便变换进行完成后恢复成原位 camera.save(); //是给我们的View加上旋转效果，在移动的过程中，视图还会以XYZ轴为中心进行旋转。 rotateY是y轴 rotateX 是x轴 rotateZ是z轴 camera.rotateY(degrees); // 这个是将我们刚才定义的一系列变换应用到变换矩阵上面，调用完这句之后，我们就可以将camera的位置恢复了，以便下一次再使用。 camera.getMatrix(matrix); // camera位置恢复 camera.restore(); // 下面两句是为了动画是以View中心为旋转点 // matrix.preTranslate(-centerX, -centerY); // matrix.postTranslate(centerX, centerY); } }- 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
- 116
- 117
- 118
- 119
- 120
- 121
- 122
😜Kotlin版
object MenuAnimationKotlin { /** * 开始动画 展开 * * @param view */ fun startAnim(vararg view: Button?) { val size = view.size for (i in view.indices) { //延迟的时间 val delay = (500 * (i * 1.0f / size)).toDouble() Log.e("TAG", "startAnim: 延迟的时间$delay") Handler(Looper.getMainLooper()).postDelayed({ animateView(view[i]!!) }, delay.toLong()) } } private fun animateView(view: View) { view.isEnabled = true view.visibility = View.VISIBLE val rotation = FlipAnimationKotlin(90f, 0f, 0.0f, view.height / 2.0f) rotation.duration = 200 rotation.fillAfter = true rotation.interpolator = AccelerateInterpolator() view.startAnimation(rotation) } /** * 关闭动画 * * @param view */ fun closeAnim(vararg view: Button?) { val size = view.size for (i in view.indices) { //延迟的时间 val delay = (800 * (i * 1.0f / size)).toDouble() Log.e("TAG", "startAnim: 延迟的111时间$delay") Handler(Looper.getMainLooper()).postDelayed({ animateHideView(view[i]!!) }, delay.toLong()) } } private fun animateHideView(view: View) { view.visibility = View.VISIBLE val rotation = FlipAnimationKotlin(0f, 90f, 0.0f, view.height / 2.0f) rotation.duration = 200 rotation.fillAfter = true rotation.interpolator = AccelerateInterpolator() view.startAnimation(rotation) rotation.setAnimationListener(object : Animation.AnimationListener { override fun onAnimationStart(animation: Animation) {} override fun onAnimationEnd(animation: Animation) { view.visibility = View.INVISIBLE view.isEnabled = false } override fun onAnimationRepeat(animation: Animation) {} }) } } internal class FlipAnimationKotlin( private val mFromDegrees: Float, private val mToDegrees: Float, private val mCenterX: Float, private val mCenterY: Float ) : Animation() { private var mCamera: Camera? = null override fun initialize(width: Int, height: Int, parentWidth: Int, parentHeight: Int) { super.initialize(width, height, parentWidth, parentHeight) mCamera = Camera() } override fun applyTransformation(interpolatedTime: Float, t: Transformation) { //计算出角度 val degrees = mFromDegrees + (mToDegrees - mFromDegrees) * interpolatedTime val centerX = mCenterX val centerY = mCenterY val camera = mCamera val matrix = t.matrix // 将当前的摄像头位置保存下来，以便变换进行完成后恢复成原位 camera!!.save() //是给我们的View加上旋转效果，在移动的过程中，视图还会以XYZ轴为中心进行旋转。 rotateY是y轴 rotateX 是x轴 rotateZ是z轴 camera.rotateY(degrees) // 这个是将我们刚才定义的一系列变换应用到变换矩阵上面，调用完这句之后，我们就可以将camera的位置恢复了，以便下一次再使用。 camera.getMatrix(matrix) // camera位置恢复 camera.restore() // 下面两句是为了动画是以View中心为旋转点 // matrix.preTranslate(-centerX, -centerY); // matrix.postTranslate(centerX, centerY); } }- 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
布局xml
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <Button android:id="@+id/viewBtn3" android:layout_width="50dp" android:layout_height="50dp" android:text="3" /> <Button android:id="@+id/viewBtn2" android:layout_width="50dp" android:layout_height="50dp" android:text="2" /> <Button android:id="@+id/viewBtn1" android:layout_width="50dp" android:layout_height="50dp" android:text="1" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_marginTop="60dp" android:orientation="vertical"> <Button android:id="@+id/viewBtn6" android:layout_width="50dp" android:layout_height="50dp" android:text="6" /> <Button android:id="@+id/viewBtn5" android:layout_width="50dp" android:layout_height="50dp" android:text="5" /> <Button android:id="@+id/viewBtn4" android:layout_width="50dp" android:layout_height="50dp" android:text="4" /> </LinearLayout>- 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
动画方法调用
class TempActivity : AppCompatActivity() { var isOpenAnim: Boolean = false override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_test) btnAnim.setOnClickListener { if (isOpenAnim) { isOpenAnim = false MenuAnimationJava.startAnim(viewBtn3,viewBtn2,viewBtn1) MenuAnimationKotlin.startAnim(viewBtn3,viewBtn2,viewBtn1) } else { isOpenAnim = true MenuAnimationJava.closeAnim(viewBtn1,viewBtn2,viewBtn3) MenuAnimationKotlin.closeAnim(viewBtn1,viewBtn2,viewBtn3) } } } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
我们详细看看applyTransformation方法的逻辑，重点是：
float degrees = mFromDegrees + ((mToDegrees - mFromDegrees) * interpolatedTime);
interpolatedTime是插值从0到1的变化，mToDegrees是目标角度，mFromDegrees是起始角度。
从效果图中可以看出关闭动画是按钮围绕Y轴旋转的，那么就是按钮绕Y轴旋转向下，从0度垂直于Y轴，变为就是90度，按照上面的公式计算就是的 0+（90-0）* interpolatedTime，
interpolatedTime是从0到1递增数值，可得关闭动画的旋转角度degrees是0度过度到90度。
反之开始展开动画则是从原来的90度变为0度，公式为90+（0-90）* interpolatedTime，因为interpolatedTime是从0变为1，则公式所得值越来越小直到0。
如果需要不同的原点作为旋转点的话，就需要用到了preTranslate和postTranslate属性。他们通常是成对出现的。
比如下面的效果图。
…… FlipAnimationJava rotation = new FlipAnimationJava(90, 0, view.getWidth() , 0.0f); FlipAnimationJava rotation = new FlipAnimationJava(0, 90, view.getWidth() , 0.0f); …… matrix.preTranslate(-centerX, -centerY); matrix.postTranslate(centerX, centerY); …… val rotation = FlipAnimationKotlin(90f, 0f, view.width / 2.0f, view.height / 2.0f) val rotation = FlipAnimationKotlin(0f, 90f, view.width / 2.0f, view.height / 2.0f) …… matrix.preTranslate(-centerX, -centerY); matrix.postTranslate(centerX, centerY);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
我们动画类计算好了，在外部只需要给多个View延时启动就好了，不同的View延时时间不同，能造成更好的视觉效果。，如此，我们的小实现就结束了。
👉其他
📢作者：小空和小芝中的小空
📢转载说明-务必注明来源：https://zhima.blog.csdn.net/
📢这位道友请留步☁️，我观你气度不凡，谈吐间隐隐有王者霸气💚，日后定有一番大作为📝！！！旁边有点赞👍收藏🌟今日传你，点了吧，未来你成功☀️，我分文不取，若不成功⚡️，也好回来找我。温馨提示：点击下方卡片获取更多意想不到的资源。
-
相关阅读:
关于 Invalid bound statement (not found): 错误的解决
Vue-单文件组件使用说明
postgresql源码学习（38）—— 备份还原② - do_pg_start_backup函数
FAST-LIO论文阅读
Pytorch intermediate(四) Language Model (RNN-LM)
NTP时间同步
uni-app 、Spring Boot 、ant Design 打造的一款跨平台包含小说（仿真翻页、段落听书）、短视频、壁纸等功能含完备后台管理的移动应用
Linux指导的常用命令
Swift的可选类型Optional
异步加载 JavaScript
- 原文地址：https://blog.csdn.net/qq_27489007/article/details/125470060
