SeniorUI32_共享元素动画

SeniorUI_高级UI汇总目录
在Android L中新增了如下几种动画：

• Touch feedback（触摸反馈）
• Reveal effect（揭露效果）
• Activity transitions（Activity转换效果）
  包括转场动画、共享元素动画
• Curved motion（曲线运动）
• View state changes （视图状态改变）
• Animate Vector Drawables（可绘矢量动画）

一 设置当个View共享

1 效果图

2 步骤

• onCreate中，setContentView之前添加
  getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

  @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        setContentView(R.layout.meterial_design_animation_activity);
		...
    }

• 两个Activity的布局中都有共同类型的View，同时 android:transitionName相同
  transitionName为任意字符串，只要前后两个View声明的一样

 <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/d"
        android:scaleType="centerCrop"
        android:layout_weight="1"
        android:transitionName="@string/app_name"
        />

• ActivityA中设置跳转

     ActivityOptionsCompat comapt = ActivityOptionsCompat.makeSceneTransitionAnimation(this, imageView, getString(R.string.app_name));
        ActivityCompat.startActivity(this, new Intent(this, SecondActivity.class), comapt.toBundle());

二 多个View共享

1 效果图

2 设置

1. 布局设置不同的transitionName

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/d"
        android:scaleType="centerCrop"
        android:layout_weight="1"
        android:transitionName="@string/app_name"
        />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/d"
        android:scaleType="centerCrop"
        android:transitionName="@string/app"
        />
</LinearLayout>

2 实现

   Pair<View, String> img1 = Pair.create(imageView, getString(R.string.app_name));
        Pair<View, String> img2 = Pair.create(imageView2, getString(R.string.app));
        ActivityOptionsCompat comapt = ActivityOptionsCompat.makeSceneTransitionAnimation(this, img1, img2);
        //跳转
        ActivityCompat.startActivity(this, new Intent(this, SecondActivity.class), comapt.toBundle());
  

三 自定义共享元素

1 效果图

2 设置

• res目录下，新建transition文件夹，创建transitionSet类型的xml文件

enter.xml

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeBounds
        android:duration="3000"
        android:startDelay="0"
        />
</transitionSet>

• AppTheme中设置即可

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!--允许自定义专场动画-->
        <item name="android:windowAllowEnterTransitionOverlap">true</item>
        <item name="android:windowAllowReturnTransitionOverlap">true</item>
        <item name="android:windowEnterTransition">@android:transition/slide_bottom</item>
        <item name="android:windowExitTransition">@android:transition/slide_bottom</item>
        <item name="android:windowSharedElementEnterTransition">@transition/enter</item>
        <item name="android:windowSharedElementExitTransition">@transition/enter</item>
    </style>

• 注意：需要全局的Theme，前后Activity也是这个Theme

四 Demo

MaterialDesignAnimationActivity