元素のアニメーションの実現のクールな音楽プレーヤーの効果を共有します.

6922 ワード

SharedElement共有要素
Andriod 5.0は、複数のページ間でコントロールを共有する共有要素アニメーションを開始します.たとえば、コントロールはPage(u)にあります.Aは位置1にあります.Page_にあります.Bにおいて、位置2において、ページAとページBがページジャンプしているとき、コントロールは共有要素のサポートの下で、自動的にAページの位置1からページBの位置2に移動することができます.
ステップを実行
1.xmlレイアウトでコントロール要素に共有属性を設定する

android:transitionName="@string/iv_album"

2.共有アニメーションタイプの設定

songListFragment.setSharedElementEnterTransition(transitionInfo.getSharedElementEnterTransition());

3.共有要素を追加

addSharedElement(viewHolder.getIvAlbum(),shareAlbum)

トランジット動画
Transitionとは、UI状態を変えた時のアニメーションのことです.その中には2つの重要な概念があります.シーンと変換です.シーンは決定されたUI状態を定義し、変換は2つのシーンの切り替えを定義するアニメーションを定義する.
シーン変換が発生すると、次の2つの行為があります.
(1)開始シーンと終了シーンのviewの状態(位置、大きさ、回転など)を確定します.
(2)状態によってアニメイトが作成され、シーン切り替え時にviewのアニメーションが使用されます.
アニメーションの種類
システムTransition
概要
Change Bounds
Viewの位置境界を検出して移動と拡大縮小動画を作成し(レイアウト境界の変化に注目)、共有要素のlayout boundをキャプチャし、その後にlayout bound変化動画を再生する.
Change Trans form
Viewのscaleとrotationがスケーリングと回転動画を作成し、共有要素のスケーリング(scaleとratationの変化)と回転属性をキャプチャし、スケーリング(scale)と回転(rotation)属性の変化動画を再生する.
Change Clip Bounds
Viewの切り出しエリアの位置境界を検出し、viewの切り出しエリアに対して共有要素clip boundsを捕獲し、clip boundsの変化動画を再生する.
ChangeImageTrans form
ImageViewのScaleTypeを検出し、対応する動画(注目はImageViewのscaleType)を作成し、共有要素(ImageView)のtranform marices属性をキャプチャし、ImageView form matices属性変化動画を再生します.Change Boundsと結合して、この変換はImageViewを動画の中で効率的にサイズを実現できます.形状またはImageView.ScaleType属性を滑らかにしすぎます.
Fade
Viewのvisibility状態によって淡いアニメーションを作成し、透明度を調整します.
Slide
Viewのvisibility状態によってスライド動画を作成します.(注目はViewのvisibilityの状態です.)
Explode
Viewのvisibility状態によって分解動画が作成されます.(注目はViewのvisibilityの状態です.)
AutoTransition
デフォルトアニメーション、Change Bounds、Fadeアニメーションの集合
開発事例
共有要素と遷移アニメーションの基礎的な使い方を簡単に理解した後、いくつかの簡単な例を使って共有要素と結合した遷移アニメーションの具体的な使用を深めます.
アルバム
ページAはアルバムリストページであり、楽曲アルバムはRecyclerViewによって実現され、ボタンをクリックすることによって、センターアルバムの画像がページBに移動することができます.他のアルバムは縦文字のリストで展示されます.
歌のリスト
実現方法1.ページAの中心画像に共有属性を設定する

2.ページBに同期して共有属性を追加します.(画像サイズは自由に変更できます.専用の遷移動画は自動ズームまで画像を実現できます.)

3.共有要素アニメーションを作成するのは、A、Bの二つのページが切り替わりますので、簡単に画像の位置をずらすだけです.だから、Change Boundsは私たちの機能を満足できます.4.設定ページ切替動画はGifから見ることができます.AページからBページへの切り替えプロジェクトでは、共有画像が並進しているほか、ページ全体の右から左に移動して、このアニメーション効果がさらに一貫しています.ここではページ切り替えSlideアニメーションを使用して、Gravityでページの進入方向を調整できます.

public class SongListEnterTransition implements IEnterTransition{

    /**      **/
    private static final int DURATION = 1500;

    @Override
    public TransitionInfo produceAnimation() {
        TransitionInfo transitionInfo = new TransitionInfo();
        //      
        Slide slide = new Slide(Gravity.RIGHT);
        slide.setDuration(DURATION);
        //        
        ChangeBounds changeBounds = new ChangeBounds();
        changeBounds.setDuration(DURATION);
        transitionInfo.setEnterTransition(slide);
        transitionInfo.setSharedElementEnterTransition(changeBounds);
        return transitionInfo;
    }
}

5.Fragmentが追加された過去のアニメーション(デフォルトではFragmentにはオーバーホール動画がありません.以前に設定されたカスタム専用アニメーションと共有要素アニメーションを追加したいです.)

    /**
     *        
     * @param transitionInfo     
     * @param albumInfoList       
     * **/
    @Override
    public void toSongListPage(TransitionInfo transitionInfo,List albumInfoList,int currentIndex) {
        this.albumInfoList = albumInfoList;
        this.hideIndex = currentIndex;
        showCenterImage();
        SongListFragment songListFragment = SongListFragment.newInstance(albumInfoList,currentIndex);
        songListFragment.setEnterTransition(transitionInfo.getEnterTransition());
        songListFragment.setAllowEnterTransitionOverlap(true);
        songListFragment.setAllowReturnTransitionOverlap(false);
        songListFragment.setSharedElementEnterTransition(transitionInfo.getSharedElementEnterTransition());
        context.getSupportFragmentManager().beginTransaction()
                .replace(R.id.fmContent,songListFragment)
                .addToBackStack(null)
                .addSharedElement(viewHolder.getIvAlbum(),shareAlbum)
                .commitAllowingStateLoss();
    }

6.Bunndleを通じて共有要素パラメータの属性を伝達し、ページBに展示する(共有要素は本当にAページ要素をページBに共有するのではなく、その共有原理は後述する).

albumInfoList = (List) getArguments().getSerializable(EXTRA_SAMPLE);
currentIndex = getArguments().getInt(INDEX);
albumInfo = albumInfoList.get(currentIndex);
ivAlbum.setBackground(getActivity().getResources().getDrawable(albumInfo.getPicture()));

アルバム拡大
ページAはアルバムリストページであり、楽曲アルバムはRecyclerViewを通じて実現され、ボタンをクリックすることによって、センターアルバムの画像をフルスクリーンに拡大してページBに展示することができます.
アルバム拡大
過場アニメーションの設定以外は、他のステップは同じです.過場アニメーションの設定は以下の通りです.

public class WordsEnterTransition implements IEnterTransition{
    @Override
    public TransitionInfo produceAnimation() {
        TransitionInfo transitionInfo = new TransitionInfo();
        TransitionSet transitionSet = new TransitionSet();
        transitionSet.addTransition(new ChangeBounds());
        transitionSet.addTransition(new ChangeTransform());
        transitionSet.addTransition(new ChangeImageTransform());
        transitionSet.setOrdering(ORDERING_TOGETHER);
        transitionInfo.setSharedElementEnterTransition(transitionSet);
        return transitionInfo;
    }
}

ボタン拡大縮小回転
ページAにはボタンがあります.クリックしたら、ボタンをフルスクリーンに拡大して表示し、ページBに移行します.ボタンはフルスクリーンからページAの元のボタンサイズに縮小して表示されます.
ボタンスケーリング.gif
過場アニメーションの設定以外は、他のステップは同じです.過場アニメーションの設定は以下の通りです.

public class MenuEnterTransition implements IEnterTransition{

    /**      **/
    private static final int DURATION = 1500;

    @Override
    public TransitionInfo produceAnimation() {
        TransitionInfo transitionInfo = new TransitionInfo();
        TransitionSet transitionSet = new TransitionSet();
        ChangeBounds changeBounds = new ChangeBounds();
        changeBounds.setDuration(DURATION);
        transitionSet.addTransition(changeBounds);
        transitionInfo.setSharedElementEnterTransition(transitionSet);
        return transitionInfo;
    }
}

共有要素の原理
前に述べたように、ページがAからBに移動する場合は、イメージのurlなど、ページの各属性をBページで再設定する必要があります.したがって、共有要素は本当にAの中の要素をBに取り出すのではなく、Aの中の要素の位置をBに教え、Bの完成位置によって移動し、Aの共有からBに移行する過程のイメージをもたらす.
ソースの例
記事では、共有要素と遷移動画を通じて実現された音楽プレーヤーの機能展示を行います.DemoはGitHubにアップロードされています.興味のある友達はcloneで一緒に勉強してみてください.GitHubソースリンク

Python標準ライブラリ12数学と乱数(mathパッケージ、randomパッケージ)