--- theme: github --- ### α.自动为布局更新添加动画 Android系统提供了可以在每次布局更改后运行的预加载动画。我们只需要在布局中设置一个属性，就能实现如下的动画效果： ![2021-05-09 at 14.48.42.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/049f0f8f9cc244e28e6b487370f78dfe~tplv-k3u1fbpfcp-watermark.image) 关于addView和removeView的代码就不贴了，核心实现： ```java android:animateLayoutChanges="true" ... /> ``` ### β.使用过渡为布局变化添加动画效果通过Android的过渡框架，我们只需要提供起始布局和结束布局，过渡框架就能自动帮我们给从起始布局到结束布局的运动添加动画效果，先来看个效果： ![2021-05-09 at 17.44.14.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/66b9a8233e4c4f34a61f1ac319d96e78~tplv-k3u1fbpfcp-watermark.image) Android给我们提供了几种动画类型，具体见下： ![WX20210509-200529@2x.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/528c227b03f8486d93db0b6c212052c4~tplv-k3u1fbpfcp-watermark.image) 在两种布局之间添加动画效果的基本流程如下所示： 1. 为起始布局和结束布局分别创建Scene对象。通常起始布局是根据当前布局自动确定的。 2. 创建一个Transition对象来定义所需要的动画类型。 3. 调用TransitionManager.go()，系统会自动运行动画来交换布局。 ![transitions_diagram.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a4c2e8b17e240b9abeef6a544162eff~tplv-k3u1fbpfcp-watermark.image) 好了，上面的效果，核心代码见下，Activity的主布局： **res/layout/anim_layout.xml** ```java ... ... ``` 第一个场景的布局定义如下： **res/layout/starting_scene.xml** ```java ``` 第二个场景的布局定义如下： **res/layout/ending_scene.xml** ```java ``` 当然，我们除了可以在xml中创建layout以外，同样也可以直接动态代码生成layout，这里就不细说了。之后，我们就可以创建相应的Scene对象了: ```java ViewGroup sceneRoot = (ViewGroup) findViewById(R.id.scene_root); Scene startScene = Scene.getSceneForLayout(sceneRoot, R.layout.starting_scene, this); Scene endingScene = Scene.getSceneForLayout(sceneRoot, R.layout.ending_scene, this); ``` 我们再定义场景之间的动画样式，这里就直接使用changeBounds： ```java Transition transition = new ChangeBounds(); ``` 当然，我们也可以在资源文件中指定动画样式，效果是一样的，创建资源xml： res/transition/change_bounds_transition.xml 在代码中这样引用： ```java Transition transition = TransitionInflater.from(this).inflateTransition(R.transition.change_bounds_transition); ``` 最后开始动画： ```java TransitionManager.go(endingScene, transition); ``` ### γ.矢量可绘制对象矢量可绘制对象是一种无需像素化或进行模糊处理就能够缩放的可绘制对象。通过AnimatedVectorDrawable类（向后兼容的AnimatedVectorDrawableCompat），我们可以为矢量可绘制对象的属性添加动画效果，例如旋转或更改路径数据来将其变为其他图片。下面来看一个效果： ![2021-05-09 at 22.14.50.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/39c8b856f2954bf68817d9c458597042~tplv-k3u1fbpfcp-watermark.image) 矢量可绘制对象添加动画效果，需要的3个xml文件： - 一个矢量可绘制对象，其中 < vector > 元素位于 res/drawable/ - 一个添加动画效果之后的矢量可绘制对象，其中位于 res/drawable/ - 一个或多个对象Animator，其中< objectAnimator >元素位于 res/animator/ 第一个< vector >文件见下，其中< group >元素定义一组路径或子组，而< path >元素定义要绘制的路径（path的获取方式见节末）。而android:name属性，是为了各个组和路径指定唯一的名称，以便我们可以通过Animator定义中引用它们： res/drawable/vectordrawable.xml ```java ``` 第二个< animated-vector >文件见下，按照矢量可绘制对象< vector >中的名称进行引用： res/drawable/animatorvectordrawable.xml ```java ``` 第三个 < objectAnimator > 文件见下，将矢量可绘制对象的路径从一个形状变为另一个形状，注意这两个路径都必须兼容变形： res/animator/path_morph.xml ```java ``` 最后获取对应的AnimatedVectorDrawable对象，并开始动画： ```java ImageView imageView = findViewById(R.id.vector_image); imageView.setBackgroundResource(R.drawable.animatorvectordrawable); // Android 5.0 (API 21) 及更高版本 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { AnimatedVectorDrawable rocketAnimation = (AnimatedVectorDrawable) imageView.getBackground(); imageView.setOnClickListener((View) -> rocketAnimation.start()); } ``` 对于矢量图的path，我们可以使用在线绘图工具https://editor.method.ac/ ,绘制完图形后，点击view->Source 查看图形path即可。或者直接使用 https://shapeshifter.design/ ，编辑完成后直接可以导出Animated Vector Drawable. ### δ.裁剪视图动画通过系统ViewAnimationUtils提供的方法，我们能很容易实现如下的效果： ![2021-05-25 at 01.00.34.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/32a51a764dc245ae90c2115f43a1b82c~tplv-k3u1fbpfcp-watermark.image) 其使用方法及参数说明见下： ```java final View shape = findViewById(R.id.circle); Animator circularReveal = ViewAnimationUtils.createCircularReveal( shape, // 要想裁剪为圆形的View 0, 0, // 相对于视图来说，动画圆的中心的x,y坐标 0, // 动画圆开始的半径 // 动画圆结束的半径 (float) Math.hypot(shape.getWidth(), shape.getHeight())); circularReveal.setDuration(3000); circularReveal.setInterpolator(new AccelerateDecelerateInterpolator()); // start the animation circularReveal.start(); ``` 这是我们的shape: View 见下： ```java ``` 如想对于动画有个更具体的了解，可查看[google developer 官网](https://developer.android.google.cn/training/animation/layout)。下节我会再介绍下Activity间的过渡动画，敬请期待吧，demo 我上传道 [github](https://github.com/zuo26/BlogSample)了。 >本文到这里就结束了，希望对你有帮助。