高力グリッドAndroidのアニメーショントランジション

序文

遷移非常にエッジの相互作用のアニメーション、シーン遷移とアニメーションの方法から紙の使用、そして最終的には、ユーザーの頭の中で遷移アニメーションナゲッツを達成します。

トランジションアニメーション該当するバージョン

唯一のAndroid 5.0(API 21)でアクティビティ遷移APIは、以降のバージョンで使用することができます。あなたはバージョンの判断を使用する必要がする前に。21のアニメーションの遷移よりも大きい、または使用しないAPIのバージョンを使用している場合。

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

また、あなたは、ウィンドウのコンテンツの遷移を許可するように設定する必要があります。つまり、フィールド:アンドロイド:windowActivityTransitions。スタイルファイルに次のように活動が行われてもよいです。

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowActivityTransitions">true</item>
</style>

動的コードに次のように配置してもよいです。

// inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

// set an exit transition
getWindow().setExitTransition(new Explode());

トランジションのアニメーションは、シーンを使用します

:遷移アニメーションアンドロイド、三つの主要なシナリオがある
1、インターフェイスを2つのスイッチングアクティビティ遷移効果の間には。

2、または2つの活性遷移間のフラグメントは、要素を共有しました。

3、アニメーションの観点から同じ活性。
以下では、これらの3つの方法の詳細な説明です。

1、2つの活性遷移との間のインターフェースを切り替えます

ときに、2つのスイッチング動作、2つのアニメーションは、以下、アニメーションのアニメーションに活性アクティビティからB、Bを切り替えることとA.を終了しますあります

高力グリッドAndroidのアニメーショントランジション

入り口と出口メソッドの主な活動:

  • Window.setEnterTransition()アニメーションアプローチを設定します
  • Window.setExitTransition()を設定し、アニメーションの外観
  • ウィンドウ()。SetReturnTransition()は、活動のアニメーションを返すように設定します
  • 。ウィンドウ()アニメーションsetReenterTransition()は再入力するために設けられている
    下図:
    高力グリッドAndroidのアニメーショントランジション
    :Googleが提供android.transition.Transitionパッケージは三つの方法で活性BにアクティビティAから切り替え爆発、スライド及びフェード。
    1、爆発:画面の中央から出入りします。
    図2は、スライド一の側から画面の反対側に入るか、終了します。
    3、フェード:透明度を変更することにより、現れたり消えします。

    下記に示すように、結果:
    高力グリッドAndroidのアニメーショントランジション高力グリッドAndroidのアニメーショントランジション高力グリッドAndroidのアニメーショントランジション

    上記の3つのアニメーションは、2つの方法で実装します:

    XML宣言によって1、。

    ディレクトリの解像度での新しいactivity_fade.xmlファイルフォルダの下の移行に新しいフォルダ移行。
    RES /移行/ activity_fade.xml

    <?xml version="1.0" encoding="utf-8"?>
    <fade xmlns:android="http://schemas.android.com/apk/res/"
    android:duration="1000"/>

    RES /移行/ activity_slide.xml

    <?xml version="1.0" encoding="utf-8"?>
    <slide xmlns:android="http://schemas.android.com/apk/res/"
    android:duration="1000"/>

    ActivityBへActivityAから切り替えているので、これActivityA出口アニメーション方法が使用され:.は、GetWindow()setExitTransition(スライド):ActivityAコードは以下の通りであります

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_transition);
        setupWindowAnimations();
    }

    private void setupWindowAnimations() {
        Slide slide = TransitionInflater.from(this).inflateTransition(R.transition.activity_slide);
        getWindow().setExitTransition(slide);
    }

ActivityB入るアニメーション使用:.は、GetWindow()setEnterTransition(フェード);以下のように、ActivityBコードは

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_transition);
        setupWindowAnimations();
    }

    private void setupWindowAnimations() {
        Fade fade = TransitionInflater.from(this).inflateTransition(R.transition.activity_fade);
        getWindow().setEnterTransition(fade);
    }
図2に示すように、実装コードモード。

スライドオブジェクト1000ミリ秒の設定時間を実装する:ActivityAコードは以下の通りです。

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_transition);
        setupWindowAnimations();
    }

    private void setupWindowAnimations() {
        Slide slide = new Slide();
        slide.setDuration(1000);
        getWindow().setExitTransition(slide);
    }

ActivityB FIDEは1000ミリ秒との設定した目標時間を達成します。

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_transition);
        setupWindowAnimations();
    }

    private void setupWindowAnimations() {
        Fade fade = new Fade();
        fade.setDuration(1000);
        getWindow().setEnterTransition(fade);
    }

最終的な効果は、次の2つの方法の上方に達成されます。
高力グリッドAndroidのアニメーショントランジション

上面的动画过程分析:
1、Activity A 启动Activity B
2、Transition FrameWork层得到Activity A的退出动画slide并且应用到全部可见的view中。
3、Transition FrameWork层得到Activity B的进入动画fade并且应用到全部可见的view中。
4、当从Activity B返回到Activity A的时候会分别执行Enter和Exit相反的动画(没有设置returnTransition,和reenterTransition时)。

ReturnTransition & ReenterTransition
Return 和Reenter Transition是enter 和exit相反的过程。当从Activity A进入到Activity B时会执行 exit和enter当从Activity B退回到Activity A时会执行Return Transition和Reenter Transition。

  • EnterTransition <--> ReturnTransition

  • ExitTransition <--> ReenterTransition
    如果没有定义Return 或者 Reenter,那么Android会反向执行Enter和Exit变换。如下图从Activity B退回到Activity A:
    高力グリッドAndroidのアニメーショントランジション
    给Activity A增加了ReturnTransition的代码如下:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_transition);
        setupWindowAnimations();
    }
    
    private void setupWindowAnimations() {
        Fade fade = new Fade();
        fade.setDuration(1000);
        getWindow().setEnterTransition(fade);
    
        Slide slide = new Slide();
        slide.setDuration(1000);
        getWindow().setReturnTransition(slide);        
    }

    增加了返回动画和没有增加返回动画的对比效果如下:
    高力グリッドAndroidのアニメーショントランジション高力グリッドAndroidのアニメーショントランジション

高力グリッドAndroidのアニメーショントランジション高力グリッドAndroidのアニメーショントランジション

2、 Shared elements between Activities

Shared elements转换确定两个Activity之间共享的视图如何在这两个Activity之间转换。例如,如果两个Activity在不同的位置和大小中具有相同的图像,则通过Shared elements转换会在这两个Activity之间平滑地转换和缩放图像。

主要方法

高力グリッドAndroidのアニメーショントランジション
如下图,当从Activity A跳转到Activity B时,ActivityA, ActivityB中的两个item有动画变化,但是要注意的时ActivityA ,ActivityB中的item是两个独立的item。
高力グリッドAndroidのアニメーショントランジション

shared elements转换包括以下几种:
  • changeBounds 改变目标布局中view的边界
  • changeClipBounds 裁剪目标布局中view的边界
  • changeTransform 实现旋转或者缩放动画
  • changeImageTransform 实现目标布局中ImageView的旋转或者缩放动画
    实现上面的效果需要三个步骤:

    1、 Enable Window Content Transition

    设置styles.xml文件,允许windowContentTransitions如下:
    value/style.xml

    <style name="MaterialAnimations" parent="@style/Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="android:windowContentTransitions">true</item
    ...
    </style>
    2、定义一个相同的transition名称

    分别在Activity A 和Activity B的布局文件中定义item,这两个item的属性可以不一样,但是android:transitionName必须一样。如下:
    layout/activity_a.xml

    <ImageView
        android:id="@+id/small_blue_icon"
        style="@style/MaterialAnimations.Icon.Small"
        android:src="@drawable/circle"
        android:transitionName="@string/blue_name" />

    layout/activity_b.xml

    <ImageView
        android:id="@+id/big_blue_icon"
        style="@style/MaterialAnimations.Icon.Big"
        android:src="@drawable/circle"
        android:transitionName="@string/blue_name" />
    3、在activity中启动shared element

    使用ActivityOptions.makeSceneTransitionAnimation()方法
    ActivityA.java

    blueIconImageView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent i = new Intent(MainActivity.this, SharedElementActivity.class);
    
        View sharedView = blueIconImageView;
        String transitionName = getString(R.string.blue_name);
    
        ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, sharedView, transitionName);
        startActivity(i, transitionActivityOptions.toBundle());
    }
    });

    結果は以下の通りである:
    高力グリッドAndroidのアニメーショントランジション
    複数の共有要素AN活動を開始します

    ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));

    間の断片の共有要素
    に類似の要素は、3つのステップに分け、プロセス間および活性断片間共用します。

    1、windowContentTransitionsすることができます
    <style name="MaterialAnimations" parent="@style/Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="android:windowContentTransitions">true</item>
    ...
    </style>
    図2に示すように、一般的な変換名の定義

レイアウト/ fragment_a.xml

<ImageView
        android:id="@+id/small_blue_icon"
        style="@style/MaterialAnimations.Icon.Small"
        android:src="@drawable/circle"
        android:transitionName="@string/blue_name" />

レイアウト/ fragment_b.xml

<ImageView
        android:id="@+id/big_blue_icon"
        style="@style/MaterialAnimations.Icon.Big"
        android:src="@drawable/circle"
        android:transitionName="@string/blue_name" />
3、使用FragmentTransaction
FragmentB fragmentB = FragmentB.newInstance(sample);

// Defines enter transition for all fragment views
Slide slideTransition = new Slide(Gravity.RIGHT);
slideTransition.setDuration(1000);
sharedElementFragment2.setEnterTransition(slideTransition);

// Defines enter transition only for shared element
ChangeBounds changeBoundsTransition = TransitionInflater.from(this).inflateTransition(R.transition.change_bounds);
fragmentB.setSharedElementEnterTransition(changeBoundsTransition);

getFragmentManager().beginTransaction()
        .replace(R.id.content, fragmentB)
        .addSharedElement(blueView, getString(R.string.blue_name))
        .commit();

示す結果
高力グリッドAndroidのアニメーショントランジション

アニメーションの設定は、重複を許可します

setAllowEnterTransitionOverlap(重複)を設定することで、アプローチが有効か無効アニメーションとアニメーション重複出演を重ねることは、真または偽です。

FragmentB fragmentB = FragmentB.newInstance(sample);

// Defines enter transition for all fragment views
Slide slideTransition = new Slide(Gravity.RIGHT);
slideTransition.setDuration(1000);
sharedElementFragment2.setEnterTransition(slideTransition);

// Defines enter transition only for shared element
ChangeBounds changeBoundsTransition = TransitionInflater.from(this).inflateTransition(R.transition.change_bounds);
fragmentB.setSharedElementEnterTransition(changeBoundsTransition);

// Prevent transitions for overlapping
fragmentB.setAllowEnterTransitionOverlap(overlap);
fragmentB.setAllowReturnTransitionOverlap(overlap);

getFragmentManager().beginTransaction()
        .replace(R.id.content, fragmentB)
        .addSharedElement(blueView, getString(R.string.blue_name))
        .commit();

おすすめ

転載: blog.51cto.com/14332859/2404322