場景過渡動畫（Scene Transition）-簡單使用
阿新 • • 發佈：2019-02-03
1.先說一下 過渡動畫（Transition Animation）
過度動畫有3種：場景過渡動畫(Scene Transition)，Activity過渡動畫，共享元素過渡動畫(Shared Element Transition)
這一次介紹Scene Transition的簡單使用，之後會寫文章陸續介紹後2種.
2.Scene Transition主要用到：
Scene : 場景，簡單的就是兩個xml佈局 ， 複雜的就是有多少場景資訊，就有多少佈局
Transition : 動畫
TransitionManager : 用go(scene) 或 go(scene , tansition) 執行場景過渡動畫
3.資原始檔實現方式：
final ViewGroup container = (ViewGroup) findViewById(R.id.container); //場景存放在這個viewgroup final TransitionInflater transitionInflater = TransitionInflater.from(this); //資原始檔方式-動畫效果在R.transition.transition_manager中 transitionManager = transitionInflater.inflateTransitionManager(R.transition.transition_manager , container); //場景( Scene.getSceneForLayout( viewgroup container , int id , context this);//載入場景) scene1 = Scene.getSceneForLayout(container , R.layout.scene_before , this); scene2 = Scene.getSceneForLayout(container , R.layout.scene_after , this); go1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (i == 0) { //資原始檔方式-用transitionmanager(執行場景scene)，因為動畫效果在manager中 transitionManager.go(scene2); i = 1; } else { transitionManager.go(scene1); i = 0; } }
activity佈局如下：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/container R.transition.transition_manager如下：
<?xml version="1.0" encoding="utf-8"?>
<transitionManager xmlns:android="http://schemas.android.com/apk/res/android">
<transition
android:fromScene="@layout/scene_before"
android:toScene="@layout/scene_after"
android:transition="@transition/slow_auto_transition"/>
</transitionManager>動畫效果資原始檔R.transition.slow_auto_transition如下：
<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
android:transitionOrdering="sequential"
>
<fade
android:fadingMode="fade_out"
android:duration="5000"
/>
<changeBounds
android:duration="5000"
android:interpolator="@android:interpolator/anticipate_overshoot"/>
<fade
android:fadingMode="fade_in"
android:duration="5000"
/>
<!--自定義動畫效果資原始檔,直接在manager資源中使用,但是duration設定好像沒起作用，不知道為什麼
也可以用程式碼寫動畫效果,duration有作用,而且更方便
-->
</transitionSet>4.程式碼實現方式:
//程式碼方式-動畫效果
//具體的動畫效果//常用的有:幻燈片 Slide,淡入淡出 Fade
//ChangeBounds 檢測view的位置邊界建立移動和縮放動畫
ChangeBounds changeBounds = new ChangeBounds();
changeBounds.setDuration(500); //duration有作用，在資原始檔中寫的duration好像不起作用
//慢慢單個浮現
Fade fadeout = new Fade(Fade.OUT); //設定場景第一次被載入到viewgroup的效果
fadeout.setDuration(500);
//慢慢全部浮現
Fade fadein = new Fade(Fade.IN);
fadein.setDuration(500);
//預設是從下往上滑出
Slide slide = new Slide(); //不能和fade同時使用,也不能和changbounds同時使用
slide.setDuration(500);
final TransitionSet transition = new TransitionSet(); //程式碼建立的動畫效果transition
transition.setOrdering(TransitionSet.ORDERING_SEQUENTIAL);
transition//.addTransition(fadeout)
//.addTransition(changeBounds)
//.addTransition(fadein)
.addTransition(slide);
go2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//程式碼方式-用transitionmanager(執行場景scene和動畫tansition)
if (i == 0) {
TransitionManager.go(scene2 , transition);
i = 1;
} else {
TransitionManager.go(scene1 , transition);
i = 0;
}
}
});5.兩個場景佈局如下：
scene_before.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/scene"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textview"
android:text="helloworld"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:id="@+id/gobutton"
android:text="button_go"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!--text的值會在動畫執行過程中自動改變,如果兩個佈局中對應的控制元件的text不一樣-->
</RelativeLayout>scene_after.xml :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/scene"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textview"
android:text="helloworld"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/gobutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button_go00000000"
android:layout_below="@+id/textview"
android:layout_marginTop="200dp"
/> <!--text的值會在動畫執行過程中自動改變,如果兩個佈局中對應的控制元件的text不一樣-->
</RelativeLayout>