Androidアニメーションの理解-トランジション/トランジション（トランジション）アニメーション

その他 2020-10-24 19:21:19 訪問数: null

转场/过渡(Transition) 动画

遷移とは、さまざまなUI状態が遷移するときのアニメーションを指します。
ここに写真の説明を挿入
ここに写真の説明を挿入

インターフェイスの移行

トランジションインターフェイスは进入/出场、トランジションアニメーションに分割できます

次进场/出场/返回/重新进入の遷移フィールドアニメーションを設定します。

  • Window.setEnterTransition(Transition transition) アプローチアニメーションを設定する 主界面-(跳转)->A，A 进入过渡
  • Window.setExitTransition(Transition transition) 外観アニメーションを設定する A-(跳转)->B，A 出场过渡
  • Window.setReturnTransition(Transition transition) リターンアニメーションを設定する A-(返回)->主界面，A 出场过渡
  • Window.setReenterTransition(Transition transition) 再突入アニメーションを設定する B-(返回)->A，A 进入过渡
  • setAllowEnterTransitionOverlap（）：レイアウト表示を実行するときにオーバーラップするかどうか
  • setAllowReturnTransitionOverlap（）：レイアウト表示を実行するときにオーバーラップするかどうか

ここに写真の説明を挿入
インターフェイス遷移XiaoLiziのアニメーション効果を見てください
ここに写真の説明を挿入

看下小栗子代码

// 过渡效果
Explode explode = new Explode(); // 从屏幕中间进入或退出，移动视图
explode.setInterpolator() // 设置插值器
expload.setDuration(1000) // 过渡动效执行时间
// 主界面
getWindow().setReenterTransition(explode);  // 重新进入
getWindow().setExitTransition(explode); // 出场
// 界面A
getWindow().setReenterTransition(explode); // 重新进入
getWindow().setExitTransition(explode); // 出场
getWindow().setReturnTransition(explode); // 返回
getWindow().setEnterTransition(explode); // 进入
//界面B
getWindow().setEnterTransition(explode);
getWindow().setReturnTransition(explode);

// 启动Activity，让过渡动画生效
ActivityOptions activityOptions = ActivityOptions.makeSceneTransitionAnimation(TransitionManagerActivity.this);
startActivity(intent, activityOptions.toBundle());

関連知識ポイント1（遷移効果）
进入/出场/重新进入/返回遷移効果（3つのクラスはすべてから継承されTransition、いくつかの同じプロパティを持ちますsetDuration、setInterpolator）

  • Explode(分解)：シーンの中心から公式APIデータに出入りする
  • Slide(滑动)：シーンの端から出入りし、スライド（GravityLEFT、TOPなどの方向を設定できます）、[公式API情報]（https://developer.android.google.cn/reference/android/support/transition/Slide）
  • Fade(淡出)：透明度の勾配を調整して、公式のデータAPIを作成します
    ここに写真の説明を挿入

xml方式的过渡效果，类似前面章节动画的XML文件

Transition explode = TransitionInflater.from(this).inflateTransition(R.transition.new_explode);
// 存放的目录为 res/transition/new_explode.xml
<explode xmlns:android="http://schemas.android.com/apk/res/android"
 android:interpolator="@android:interpolator/插值器"
 android:duration="2000" />

主题Style设置

举个栗子：
<style name="AppTheme" parent="Theme.xxxx.xxxx">
	<item name="android:windowExitTransition">@transition/new_explode</item>
	<item name="android:windowEnterAnimation">@transition/new_explode</item>
    <item name="android:windowReenterTransition">@transition/new_explode</item>
    <item name="android:windowReturnTransition">@transition/new_explode</item>
</style>

関連知識ポイント2（ActivityOptions）

  • makeSceneTransitionAnimation(Activity activity, Pair<View, String>... sharedElements) -共有、エクスポレーション、スライド、フェードに使用
  • makeCustomAnimation(Context context, int enterResId, int exitResId) -カスタムxmlアニメーションを使用する
  • makeScaleUpAnimation(View source, int startX, int startY, int width, int height) -指定されたサイズから最大表示にズームインします
  • makeClipRevealAnimation(View source, int startX, int startY, int width, int height) -1点から全画面までの円の勾配
  • makeThumbnailScaleUpAnimation(View source, Bitmap thumbnail, int startX, int startY) -サムネイルズームトランジションアニメーション

ActivityOptionsの小さな栗
makeSceneTransitionAnimation
これは以前に使用されており、後で説明する共有要素インターフェイス遷移の小さな栗

makeCustomAnimation 自定义 进入，退出动画
ここに写真の説明を挿入

# 从 界面A(exit:no_anim) 进入 界面B(enter:enter_up)
ActivityOptionsCompat.makeCustomAnimation(this, R.anim.enter_up, R.anim.no_anim);

# 界面B enter:res/anim/enter_up.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="10000">
    <translate android:fromYDelta="100%p"/>
    <translate android:toYDelta="0%p"/>
</set>

# 界面A exit:res/anim/no_anim.xml
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1.0"
    android:toAlpha="0.1"
    android:duration="10000" />

makeScaleUpAnimation | makeClipRevealAnimation | makeThumbnailScaleUpAnimation
これら3つは、システムが提供するデフォルトのアニメーション効果です。実際の使用では、効果はあまり明白ではなく、あまり役に立たないと感じています。
興味のある学生は自分で検索できます。

  • makeScaleUpAnimation：たとえば、インターフェイスAがビューをクリックしてページBを開くと、ページBはビューに対して特定の位置で拡大および展開されます。
    ここに写真の説明を挿入
ActivityOptions options = ActivityOptions.makeScaleUpAnimation(
	view, 0, 0, //拉伸开始的坐标
	view.getMeasuredWidth(), view.getMeasuredHeight()); // 初始的宽高
startActivity(intent, options.toBundle());

  • makeClipRevealAnimation：新しいページにジャンプすると、新しいページのクリッピング範囲が、完全に表示されるまで徐々に拡大します。（円形のグラデーションのあるポイントからフルスクリーンまで）

  • makeThumbnailScaleUpAnimation：切り替えると、新しいページに移行する前にビットマップが表示されます。
    ここに写真の説明を挿入

Bitmap bitmap = view.getDrawingCache();
ActivityOptions options = ActivityOptions.makeThumbnailScaleUpAnimation(view, bitmap, 0, 0);
startActivity(intent, options.toBundle());

関連知識ポイント3（遷移効果2）

  • ChangeBounds -ビューの位置境界を検出して、移動およびズーム遷移アニメーションを作成します
  • ChangeClipBounds -ビューのスケールと回転を検出して、ズームと回転のアニメーションを作成します
  • ChangeTransform-ChangeBoundsと同様に、ビューのカット領域の位置境界を検出します。ただし、ChangeBoundsはビュー用であり、ChangeClipBoundsはビューのクリッピング領域用です（setClipBound（Rect rect）のrect）。設定がない場合、アニメーション効果はありません
  • ChangeImageTransform-ImageView（ここでは特にImageView）のサイズ、位置、およびScaleTypeを検出し、対応するアニメーションを作成します。
    上記の継承されたTransitonクラス
    は、このナレッジポイントを使用して、後続のレイアウトシーンの切り替えを説明します。

参照

カスタムトランジション
もちろん、トランジションを継承して独自のカスタムトランジションを作成することもできます。興味のある学生は自分で関連情報を検索できます。

public class CustomTransition extends Transition {
    
    

    @Override
    public void captureStartValues(TransitionValues values) {
    
    }

    @Override
    public void captureEndValues(TransitionValues values) {
    
    }

    @Override
    public Animator createAnimator(ViewGroup sceneRoot,
                                   TransitionValues startValues,
                                   TransitionValues endValues) {
    
    }
}

シーン小劇場

ここでは、Launcher3 startActivityの使用法を確認し、サードパーティアプリケーションを起動し、統一された開始遷移アニメーションを維持できます。そのメソッドも安全な開始コードです。

TV関連のデスクトップを作成するときは、Launcher3の方法で作成することをお勧めします。

ここに写真の説明を挿入
ここに写真の説明を挿入
代码片段
ここに写真の説明を挿入

共有要素インターフェイスの移行

あるインターフェースから新しいインターフェースにジャンプすると、インターフェース要素が新しいインターフェースの要素に移行します。
ここに写真の説明を挿入 ここに写真の説明を挿入 ここに写真の説明を挿入
如何去实现共享元素的过渡的动画效果

たとえば、Activity1はActivity2にジャンプし、共有要素view1-> view2は次のようになります。

2つのページの共有要素に同じものを指定します transitionName

# Activity1，你需要设置 view1 的 transitionName 的名称为 "ShardTest"
Intent intent = new Intent(this, Activity2.class);
ActivityOptions options = ActivityOptions
	.makeSceneTransitionAnimation(this, view1, "ShardTest");
startActivity(intent, options.toBundle());

# activity2 的 view2 需要和 Activity2 的 view1 的 transitionName 的名称保持一致.
1. 代码中使用(代码中使用View.setTransitionName(String)方法)
ViewCompat.setTransitionName(view2, "ShardTest");
2. 布局XML中指定(在布局文件中使用android:transitionName属性)
android:transitionName="robot"

如果界面上又多个共享元素，要如何写？

複数の共有要素がある場合は、次の方法を使用することもできます。

Pair.create(view2, "ShardTestOne")
new Pair<View, String>(view2, "ShardTestOne")

ActivityOptionsCompat.makeSceneTransitionAnimation(this,
	Pair.create(view1, "ShardTestOne"), 
	Pair.create(view11, "ShardTestTwo"));

一方、複数の共有要素を処理する必要もあります。

ViewCompat.setTransitionName(view2, "ShardTestOne");
ViewCompat.setTransitionName(view22, "ShardTestTwo");
// 或者布局中指定(android:transitionName)，这里不过多解释，同上

看看效果，这就是imageview与TextView共享元素的效果
ここに写真の説明を挿入

TVシステムのSystemUI最近のタスクの共有要素の遷移アニメーション効果を確認できます（システム設定のインターフェイスから最近のタスクインターフェイスのサムネイルレイアウトまで）
ここに写真の説明を挿入

TranstionManger + Screne（シーン）レイアウトの移行

Android L（api19）によって導入されたシーンアニメーションの拡張。レイアウト（インターフェイス）が変更されたときに、開発者がトランジションアニメーションを実装するのがより便利になります。

関連API：

  • Scene.getSceneForLayout(ViewGroup sceneRoot, int layoutId, Context context) レイアウトIDに従って、シーンをロードします
  • Scene(ViewGroup sceneRoot, View view) ビューによると、シーンをロードします
  • TransitionManager.go(Scene scene, Transition transition) シーンレイアウトの切り替え
  • TransitionManager.beginDelayedTransition シーンを現在のビューツリー状態で保存し、

公式APIドキュメントを参照してください

栗を少しあげる

两个布局的过渡

// 从布局生成场景(Scene)
final Scene scene1 = Scene.getSceneForLayout(container, R.layout.scene1_layout, context);
// View scene1Layout = LayoutInflater.from(context).inflate(R.layout.scene1_layout, null);
final Scene scene2 = Scene.getSceneForLayout(container, R.layout.scene2_layout/*scene1Layout*/, context);
TransitionManager.go(scene1, new Fade()); // fade_in 淡入视图，fade_out 淡出视图，fade_in_out（默认)
TransitionManager.go(scene2, new Fade());

ここに写真の説明を挿入
一个界面中的两个 view 过渡

final Scene scene1 = new Scene(containerView, imageview1);
final Scene scene2 = new Scene(container, imageview2);
TransitionManager.go(scene1, transition);
TransitionManager.go(scene2, transition);

ここに写真の説明を挿入

控件的属性改变的过渡

ChangeBounds transition = new ChangeBounds();
// 执行TransitionManager.beginDelayedTransition后，会保存一个当前视图树状态的场景
TransitionManager.beginDelayedTransition(containerView, transition);
// 
ViewGroup.LayoutParams lp = containerView.getLayoutParams();
lp.width = 200; // width = 500;
lp.height = 200; // height = 500;
container.setLayoutParams(lp);

ここに写真の説明を挿入
ここに写真の説明を挿入

上記の栗が直感的でない場合は、他の効果を確認できます（幅と高さの変更、非表示、属性の表示、explode + Changeboundsの使用）
ここに写真の説明を挿入

可以使用XML方式加载过渡效果

Transition transition = TransitionInflater.from(context).inflateTransition(R.transition
                        .test_trantion);

// test_trantion.xml
<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1500"
    android:interpolator="@android:interpolator/decelerate_cubic">
    <changeBounds />
    <explode />
</transitionSet>

別のChangeboundsの小さな栗の効果を見てください
ここに写真の説明を挿入

関連するデモコード

公式データへの関心のあるジュニアパートナーの問い合わせまたは関連情報の検索

また、最新のレイアウト移行について学ぶことができConstraintLayout 2.0 motionlayout

ここに写真の説明を挿入

注意

Activity1からActivity2にジャンプした後に1、あなたはActivity2、コールアクティビティを終了したい場合。finishAfterTransition（）、活動を呼び出すことはありません。フィニッシュ（）。
それ以外の場合は、Activity1にActivity2から戻るのないアニメーション効果はありません。

2.有効にならない場合は、サポートに参加できます

// 1. 主题
<item name="android:windowContentTransitions">true</item>
// 2. 代码加入，记得要在 setContentView 之前加.
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
setContentView(R.layout.activity_start_anim);

3.オーバーレイの具体的な効果は明確ではありませんが、セマンティックの観点からは、アニメーションがより統合され、自然になるはずです。禁用(false)/开启(true)デフォルトの効果
getWindow（）。setSharedElementsUseOverlay（true）;

参照

Googleトランジションアニメーションガイド
トランジションアニメーションビデオ1
トランジションアニメーションビデオ2
非常に魅力的なAndroidトランジションアニメーション
Androidトランジションアニメーションと共有要素アニメーションバージョン5.0以下と互換性があります
。動いて！-Androidトランジショントランジションアニメーション
Androidクールアクティビティ切り替え効果、共有要素
AndroidアニメーショントランジションとTransitionManagerは
Androidトランジションフレームワークを使用詳細な説明-超クールなアニメーションフレームワーク
Androidアニメーションを実装するための初心者ガイド（パート2）
すべてのものをアニメーション化します。トランジションAndroid
プログラマーおよびデザイナー/ムーバーのためのコミュニケーションツール

Androidアニメーションについて—プロパティアニメーション<=前の 章次の章=> Androidアニメーションについて—RecyclerView Animator

おすすめ

転載: blog.csdn.net/qw85525006/article/details/104911622
おすすめ
米国は中国とロシアへの大型AIモデルの輸出を制限する計画
Apple、ChatGPTをiPhoneに導入することでOpenAIと合意に達する
ランキング
エコー、Linuxは最も悲しいコマンドです
OpenCVの目標追跡 - 黄Chaoxian
インターバルマージ [ペア、ソート]
Javaの8並行プログラミング
時間を[行く]包
2つのソリューションCSS揃えテキスト
ASP.NET MVCのコアアプリケーションのバックグラウンドタスク
JAVAのドキュメントは、カスタムプロパティを記述する
オーディオとビデオに基づくビデオの主なコンセプト
phpstudyバックドアRCE使用バッチスクリプト
アーカイブ
もっと
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)

コードワールド

© 2018 codetd.com