Android 转场动画Transition 、Share El

作者: kongjn | 来源:发表于2017-09-02 13:21 被阅读0次

Android 转场动画Transition 、Share El
UIView动画
Android Transition
聊聊Android的转场动画
iOS 转场动画封装
Android 动画
React 动画
动画之Activity transition(转场动画)
自定义转场动画非正式翻译
自定义视图控制器转场动画

一款好的app没有动画是肯定不行的（尼古拉斯.赵四）

今天在写了个Demo的加了一下转场动画，效果如下：

GIF.gif

此Demo包含了Transition 、Share Elements两种动画效果，分别在Activity和fragment中实现，API 19 以上支持，以下就显示没有动画效果

Transition 的进场动画

Visibility 类动画转场，可见性（目前就学了这个）

image.png

只有三个继承类：

Explode :扩散式
Fade：渐隐式
Slide：平移式

首先要在onCreate中设置，要在setContentView前面哦：

// 允许使用transitions  
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
//或者在主题中加入
<item name="android:windowContentTransitions" tools:targetApi="lollipop">true</item>
//还要加一条，不然会出现白屏哦
<item name="android:windowIsTranslucent">true</item>

Acitivity1:

        Fade fade = new Fade();//渐隐
        fade.setDuration(500);
        Slide slide = new Slide(Gravity.END);//右边平移
        slide.setDuration(500);
        Explode explode = new Explode();//展开回收
        explode.setDuration(500);
        getWindow().setReenterTransition(slide);
        getWindow().setExitTransition(explode);
        getWindow().setAllowEnterTransitionOverlap(false);
        getWindow().setAllowReturnTransitionOverlap(false);

....Intent 代码

        Intent i = new Intent(this, target);
        ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(this);
//      两种方法都能用，不要问我源码怎么实现，没空研究了
//      ActivityOptionsCompat transitionActivityOptions =ActivityOptionsCompat.makeSceneTransitionAnimation(this);
        startActivity(i, transitionActivityOptions.toBundle());

Acitivity2:

        Explode explode = new Explode();
        explode.setDuration(500);
        Slide slide = new Slide();
        slide.setDuration(500);
        slide.setSlideEdge(Gravity.START);
        getWindow().setEnterTransition(slide);
        getWindow().setReturnTransition(explode);

GIF.gif

简单实用！

Share Elements 的进场动画

Activity 通过getWindow来设置，看源码。。。目测没有开放

Window类源码

Fragment 中，这个开放了

Fragment 源码
setSharedElementEnterTransition()
当A startB 时，共享元素以A中的位置作为起始，B中的位置为结束来播放动画。在B中设置
setSharedElementReturnTransition()
当B 返回A时，共享元素以B中的位置作为起始，A中的位置为结束来播放动画。在B中设置

请看源码：一步两步找到里面的 AnimationInfo ，这个类保存了我们的动画

Fragment 源码

AnimationInfo 初始化的时候，有些设置了默认的过渡效果，为null的才是我们需要设置的

    static class AnimationInfo {
    ...
        private Object mEnterTransition = null;
        private Object mReturnTransition = USE_DEFAULT_TRANSITION;
        private Object mExitTransition = null;
        private Object mReenterTransition = USE_DEFAULT_TRANSITION;
        private Object mSharedElementEnterTransition = null; //手动设置
        private Object mSharedElementReturnTransition = USE_DEFAULT_TRANSITION; //系统有默认
        private Boolean mAllowReturnTransitionOverlap;
        private Boolean mAllowEnterTransitionOverlap;

在Activity 中动画就不用我们考虑了，人家压根不给你设置，fragment中 setSharedElementEnterTransition需要我们自己来设置，setSharedElementEnterTransition有默认可以不设置，mAllowReturnTransitionOverlap 和 mAllowEnterTransitionOverlap 都是默认为 false

（必须）使用 Share Elements 前，需要设置共享元素的 transitionName

//XML中设置
android:transitionName="image1"
//或者代码设置
mImageView1.setTransitionName("image1");
//或者
Pair.create(imageView, "image1")

上完成代码！ Acitivity1:（共享元素四个两个imageView，两个TextView）

Intent代码---
    //share elements 多个元素
    private void transitionToActivity(Class target, ImageView imageView, ImageView imageView2, TextView text1, TextView text2) {
        Pair[] pairs = new Pair[]{Pair.create(imageView, "image1"), Pair.create(imageView2, "image2"),
                Pair.create(text1, "text1"), Pair.create(text2, "text2")};
        Intent i = new Intent(this, target);
        ActivityOptionsCompat transitionActivityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(this, pairs);
        startActivity(i, transitionActivityOptions.toBundle());
    }

Acitivity2:(这些只是设置给子元素而已,android:transitionName已经在XML中设置)

        Fade fade = new Fade();
        fade.setDuration(500);
        Slide slide = new Slide(Gravity.END);
        slide.setDuration(500);
        getWindow().setReturnTransition(fade);
        getWindow().setEnterTransition(slide);

GIF.gif

Share Elements Activity 和 fragment 交互

activity1：

    //share elements 单个元素
    private void startActivity(Class target, ImageView imageView1) {
        Intent i = new Intent(this, target);
        ActivityOptionsCompat transitionActivityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(this, imageView1, "image1");
        startActivity(i, transitionActivityOptions.toBundle());
    }

activity4:

public class Main4Activity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main4);
        Slide slideTransition = new Slide(Gravity.LEFT);
        slideTransition.setDuration(500);
        Fragment1 fragment1 = Fragment1.newInstance();

        fragment1.setReenterTransition(slideTransition);
        fragment1.setExitTransition(slideTransition);
        //共享元素动画设置
        fragment1.setSharedElementEnterTransition(new ChangeBounds());
        getSupportFragmentManager().beginTransaction().replace(R.id.fragment, fragment1)
                .commit();
    }

fragment1：

    private void addNextFragment() {
        Fragment2 fragment2 = Fragment2.newInstance();

        Slide slideTransition = new Slide(Gravity.RIGHT);
        slideTransition.setDuration(500);

        ChangeBounds changeBoundsTransition = new ChangeBounds();
        changeBoundsTransition.setDuration(500);
        
        fragment2.setEnterTransition(slideTransition);
        fragment2.setSharedElementEnterTransition(changeBoundsTransition);

        getFragmentManager().beginTransaction().replace(R.id.fragment, fragment2)
                .addToBackStack(null)
                .addSharedElement(mImageView,"image1")
                .commit();
    }

fragment2：