一篇文章全面 & 解析Android动画

前言

动画是Android开发中常运用的知识，可是动画的种类繁多、使用复杂...本文将从动画种类，使用场景，使用方法举例，献上一份Android动画的全面介绍攻略。

以下是Android动画场景和详细分类

动画	描述
API 21之前Activity过渡动画	activity.overridePendingTransition(R.anim.enteranim, R.anim.exitanim)
API 21（Android5.0）之后Activity过渡动画	ActivityOptions.makeSceneTransitionAnimation()
Transition场景过渡动画（以上两个都属于）	TransitionManager.beginDelayedTransition(rootView)、淡入淡出Fade、滑动Slide、
逐帧动画、补间动画、属性动画	逐帧AnimationDrawable、透明度AlphaAnimation、位移TranslateAnimation、缩放ScaleAnimation、旋转RotateAnimation、属性动画（ValueAnimator/ObjectAnimator）
通过ConstraintLayout实现动画	写好一个正常的ConstraintLayout布局，然后编写一个变化后的布局，然后使用Java代码关联即可

最初的转场动画

虽然 Android 5.0 之后推出了新的过渡动画方式，但通常只是用于特定的场合使用，activity.overridePendingTransition() 通用方式的过渡动画还是很常用的。

companion object {
    fun start(context: Context){
        val intent = Intent(context, SecondActivity::class.java)
        context.startActivity(intent)
        if(context is Activity){
            context.overridePendingTransition(R.anim.anim_in, R.anim.anim_out)
        }
    }
}

overridePendingTransition有两个参数，第一个参数（enterAnim）是作用于SecondActivity 的进入屏幕可见区域效果，第二个参数（exitAnim）是作用于当前 Activity 离开屏幕可见区域效果。

常用效果

iOS 默认的效果，新的Activity从右边进入显示区域，当前Activity从左边离开显示区域。

//X轴从 100% 到 0
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromXDelta="100%"
        android:toXDelta="0" />
</set>

//X轴从 0 到 -100%
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromXDelta="0"
        android:toXDelta="-100%" />
</set>

iOS默认的finish动画，新Activity从左侧进入显示区域，当前的Activity从右侧离开显示区域。

//X轴从 -100% 到 0
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromXDelta="-100%"
        android:toXDelta="0" />
</set>

//X轴从 0 到 100%
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="300"
        android:fromXDelta="0"
        android:toXDelta="100%" />
</set>

overridePendingTransition写法的问题：和View动画一样，使用虽爽，但只支持平移、旋转、缩放和透明度这四种动画类型，遇到稍微复杂的动画也只能撒手了。

Android 5.0 Material 转场动画

在 Android 5.0 之后，我们可以使用 Material Design 为我们带来的转场动画。我们可以通过 ActivityOptions.makeSceneTransitionAnimation() 实现

进入和退出动画包括：Explode(爆炸式)、Slide(滑动式)、Fade(淡入淡出式)
共享元素动画效果，启用共享元素动画的步骤跟进出动画的步骤稍有不同

进入和退出动画的实现

步骤一：创建Material Bundle

    startActivity(intent,ActivityOptions.makeSceneTransitionAnimation(this).toBundle())

步骤二设置动画

override fun onCreate(savedInstanceState: Bundle?) {
    // 开启Material动画
    window.requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)
    super.onCreate(savedInstanceState)
    //setContentView(R.layout.detail_activity)
    // 设置进入的动画
    window.enterTransition = Slide()
    // 设置退出动画
    window.exitTransition = Slide()
}

共享元素动画的实现

步骤一设置Activity A
先给 View 设置 transitionName：

ivShoe.transitionName = transitionName

接着，它需要提供共享的 View 和 TransitionName。

其实，就是想让你告诉系统，什么样的 View 需要做动画，那如果有多个 View 呢？所以，你还得给View 绑定一个 TransitionName，防止动画做混了。

代码：

val options = ActivityOptions.makeSceneTransitionAnimation(this, binding.ivShoe, transitionName)
ImageGalleryActivity.start(this, it, options.toBundle(), transitionName)

如果有多个共享元素，可以将关系存进 Pair，然后把 Pair 放进去，不懂的可以看一下 Api。

步骤二为Activity B设置共享元素动画
默认支持的共享元素的动画也是有限的，支持的种类有：

changeBounds：为目标视图布局边界的变化添加动画效果
changeClipBounds：为目标视图裁剪边界的变化添加动画效果
changeTransform：为目标视图缩放和旋转方面的变化添加动画效果
changeImageTransform：为目标图片尺寸和缩放方面的变化添加动画效果

通过 Window 设置 sharedElementEnterTransition 和 sharedElementExitTransition：

override fun onCreate(savedInstanceState: Bundle?) {
    // 开启Material动画
    window.requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)
    val transitionSet = TransitionSet()
    transitionSet.addTransition(ChangeBounds())
    transitionSet.addTransition(ChangeClipBounds())
    transitionSet.addTransition(ChangeImageTransform())
    window.sharedElementEnterTransition = transitionSet
    window.sharedElementExitTransition = transitionSet
    super.onCreate(savedInstanceState)
    // 我这里的transitionName是通过Intent传进去的
    val transitionName = intent.getStringExtra(CUS_TRANSITION_NAME)
    // 给ImageView设置transitionName
    binding.ivShoe.transitionName = transitionName
}

也可以使用xml的方式来实现共享动画
只需要在跳转时候带上前面页面的View，并设置transitionName，在第二个Activity的xml也设置上相同的transitionName即可。

button_pair1.setOnClickListener {
  val bundle = ActivityOptions.makeSceneTransitionAnimation(activity,button_pair1,"button_pair1").toBundle()
  startActivity(Intent(activity, TargetActivity::class.java).putExtra("animation","pair"), bundle)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button_pair1"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginTop="20dp"
        android:text="共享元素一"
        android:transitionName="button_pair1" />
</LinearLayout>

Transition实现多种动画

实现动画的方式非常简单，只需要在改变显示方式之前调用 TransitionManager.beginDelayedTransition 即可，支持改变显示、隐藏、大小修改、位置修改。setDuration() 设置动画的时长。

// 设置动画方式 - 默认
TransitionManager.beginDelayedTransition(rootView)
button.visibility = View.VISIBLE

// 设置动画方式 - 淡入淡出
val fade = Fade().setDuration(1000)
TransitionManager.beginDelayedTransition(rootView, fade)
button.visibility = View.VISIBLE

// 设置动画方式 - 右边滑动
val slide = Slide(Gravity.RIGHT).setDuration(1000)
TransitionManager.beginDelayedTransition(rootView, slide)
button.visibility = View.VISIBLE

// 分离 Explode()

Animation实现逐帧动画、补间动画、属性动画(ValueAnimator/ObjectAnimator)

逐帧动画
首先添加一组 Drawable 图片，接着使用代码进行控制即可。

//方式1

val animationDrawable = AnimationDrawable()
for (i in 0..9) {
    val id = resources.getIdentifier("frame$i", "drawable", packageName)
    val drawable = resources.getDrawable(id)
    animationDrawable.addFrame(drawable, 100)
}

//方式2 在 drawable 目录下创建一个 img_frame.xml 文件，android:oneshot 是控制是否只播放一次。

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
    <item android:drawable="@drawable/frame0" android:duration="100"/>
    <item android:drawable="@drawable/frame1" android:duration="100"/>
    <item android:drawable="@drawable/frame2" android:duration="100"/>
    <item android:drawable="@drawable/frame3" android:duration="100"/>
    <item android:drawable="@drawable/frame4" android:duration="100"/>
    <item android:drawable="@drawable/frame5" android:duration="100"/>
    <item android:drawable="@drawable/frame6" android:duration="100"/>
    <item android:drawable="@drawable/frame7" android:duration="100"/>
    <item android:drawable="@drawable/frame8" android:duration="100"/>
    <item android:drawable="@drawable/frame9" android:duration="100"/>
</animation-list>

//使用

val animationDrawable = image_view.drawable as AnimationDrawable
// 是否只播放一次
animationDrawable.isOneShot = false
image_view.setImageDrawable(animationDrawable)
button1.setOnClickListener {
    // 播放
    animationDrawable.start()
}
button2.setOnClickListener {
    // 暂停
    animationDrawable.stop()
}

视图动画/补间动画

视图动画是指通过代码定义开始和结束的 关键帧 位置或效果，由SDK实现补充中间的效果，从而实现动画，可以通过xml或者纯Java代码实现，5.0之前 Activity 的转场动画就是通过补间动画实现，补间动画有4种方式：

透明度（淡入淡出）：alpha
位移：translate
缩放：scale
旋转：rotate

XML 实现

透明度：alpha

android:fromAlpha 是起始透明度， android:toAlpha结束透明度。

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromAlpha="1.0"
    android:toAlpha="0.0" />

位移：translate

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromXDelta="0"
    android:fromYDelta="100%"
    android:toXDelta="100%"
    android:toYDelta="0" />

缩放：scale

android:pivotX 和 android:pivotY 是设置缩放的中心点，可以写百分比，也可以写绝对值。

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="1.0"
    android:toYScale="1.0"/>

旋转：rotate

android:pivotX 和 android:pivotY 是设置旋转的中心点。

android:fromDegrees 是开始角度，android:toDegrees 是结束角度。

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="359"
    android:drawable=""
    android:visible="false"/>

组合动画

可以通过<set/> 组合多个动画，通过 android:duration 设置每一个动画的播放时长。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="300"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
    <translate
        android:duration="300"
        android:fromXDelta="0"
        android:fromYDelta="100%"
        android:toXDelta="100%"
        android:toYDelta="0" />
</set>

使用方式

// 加载动画
val animation = AnimationUtils.loadAnimation(this, R.anim.example_alpha)
// 保持动画结束后的状态
animation?.fillAfter = true
// 开始动画
target_view.startAnimation(animation)
// 还原动画起始状态
target_view.clearAnimation()

Java 实现

// 透明度
val alphaAnimation = AlphaAnimation(fromAlpha, toAlpha)
// 位移
val translateAnimation = TranslateAnimation(fromXDelta, toXDelta, fromYDelta, toYDelta)
// 缩放
val scaleAnimation = ScaleAnimation(fromX, toX, fromY, toY, pivotXType, pivotXValue, pivotYType, pivotYValue)
// 旋转
val rotateAnimation = RotateAnimation(fromDegrees, toDegrees, pivotX, pivotY)

// 设置间隔
translateAnimation.duration = 1000

// 动画组合
val animationSet = AnimationSet(true)
animationSet.addAnimation(alphaAnimation)
animationSet.addAnimation(translateAnimation)
animationSet.addAnimation(scaleAnimation)
animationSet.addAnimation(rotateAnimation)

// 开始动画
target_view.startAnimation(animationSet)

属性动画

属性动画很好理解，就是通过反射实现动态改变View的属性，比如透明度，宽高等，让其实现各种动画。
使用 ObjectAnimator 实现四大动画框架：

位移:translationX、translationY、translationZ
透明度:alpha,透明度全透明到不透明:0f->1f
旋转:rotation,旋转一圈:0f->360f
缩放：水平缩放scaleX,垂直缩放scaleY

// 通过反射设置 setAlpha(float) 方法
val objectAnimator = ObjectAnimator.ofFloat(targetView, "alpha", 0F, 1F)
objectAnimator.duration = 1000
objectAnimator.start()
// 通过反射设置 setTranslationY(float) 方法
val objectAnimator = ObjectAnimator.ofFloat(targetView, "translationY", 200f, 0F)

使用 ValueAnimator 实现属性动画
ValueAnimator作为ObjectAnimator的父类，主要动态计算目标对象属性的值，然后设置给对象属性，达到动画效果，而ObjectAnimator则在ValueAnimator的基础上极大地简化对目标对象的属性值的计算和添加效果，融合了 ValueAnimator 的计时引擎和值计算以及为目标对象的命名属性添加动画效果这一功能。

    //ValueAnimator实现
    tvText.setOnClickListener {
        val valueAnimator = ValueAnimator.ofFloat(0f, 180f)
        valueAnimator.addUpdateListener {
               tvText.rotationY = it.animatedValue as Float //手动赋值
        }
        valueAnimator.start()
    }
    //ObjectAnimator实现
     ObjectAnimator.ofFloat(tvText, "rotationY", 0f, 180f).apply { start() }

从上面代码可以看出，使用ValueAnimator实现动画，需要手动赋值给目标对象tvText的rotationY，而ObjectAnimator则是自动赋值，不需要手动赋值就可以达到效果。
动画过程可以通过AnimatorUpdateListener和AnimatorListener来监听。

属性动画也可以用XML的方式来实现

补间动画和属性动画主要区别：

作用对象不同，补间动画只能作用在view上，属性动画可以作用在所有对象上。
属性变化不同，补间动画只是改变显示效果，不会改变view的属性，比如位置、宽高等，而属性动画实际改变对象的属性。
动画效果不同，补间动画只能实现位移、缩放、旋转和透明度四种动画操作，而属性动画还能实现补间动画所有效果及其他更多动画效果。

ConstraintLayout实现动画

XML 代码实现

这种方式非常的简单，写好一个正常的ConstraintLayout布局，然后编写一个变化后的布局，然后使用Java代码关联即可。

变化前后的控件 ID 必须保持一致，否则不生效。
只需要编写需要改变的控件，不需要改变的控件无需编写代码。

Java 代码实现

也可以通过Java代码手动控制控件的位置，下面的代码等同上面的效果。

public class MainActivity extends AppCompatActivity {
    private ConstraintSet constraintSet1;
    private ConstraintSet constraintSet2;
    private ConstraintLayout constraint_layout;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.constraint_layout_normal);
        constraintSet1 = new ConstraintSet();
        constraintSet2 = new ConstraintSet();
        constraint_layout = findViewById(R.id.constraint_layout);
        constraintSet1.clone(constraint_layout);
        constraintSet2.clone(constraint_layout);

        // image_view 的右边缘在父布局的右边缘
        constraintSet2.connect(R.id.image_view,ConstraintSet.RIGHT,R.id.constraint_layout,ConstraintSet.RIGHT);
        // image_view 占父布局宽度的百分百
        constraintSet2.constrainPercentWidth(R.id.image_view,1);

        // content 的顶部在 image_view 的下方
        constraintSet2.connect(R.id.content,ConstraintSet.TOP,R.id.image_view,ConstraintSet.BOTTOM);
        // content 的左边缘在父布局的左边缘
        constraintSet2.connect(R.id.content,ConstraintSet.LEFT,R.id.constraint_layout,ConstraintSet.LEFT);
        // content 的右边缘在父布局的右边缘
        constraintSet2.connect(R.id.content,ConstraintSet.RIGHT,R.id.constraint_layout,ConstraintSet.RIGHT);
        // 取消 content 的底部边缘设置
        constraintSet2.clear(R.id.content,ConstraintSet.BOTTOM);

        findViewById(R.id.start).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AutoTransition transition = new AutoTransition();
                TransitionManager.beginDelayedTransition(constraint_layout, transition);
                constraintSet2.applyTo(constraint_layout);
            }
        });
        findViewById(R.id.recover).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AutoTransition transition = new AutoTransition();
                transition.setDuration(300);
                TransitionManager.beginDelayedTransition(constraint_layout, transition);
                constraintSet1.applyTo(constraint_layout);
            }
        });
    }
}

最后编辑于：2022.02.14 18:03:09

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 228,835评论 6赞 534
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 98,676评论 3赞 419
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 176,730评论 0赞 380
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 63,118评论 1赞 314
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 71,873评论 6赞 410
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 55,266评论 1赞 324
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 43,330评论 3赞 443
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 42,482评论 0赞 289
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 49,036评论 1赞 335
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 40,846评论 3赞 356
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 43,025评论 1赞 371
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 38,575评论 5赞 362
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 44,279评论 3赞 347
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 34,684评论 0赞 26
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 35,953评论 1赞 289
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 51,751评论 3赞 394
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 48,016评论 2赞 375