如何利用xml使用淡入淡出效果

如何利用xml使用淡入淡出效果

如果你想要讓兩張圖片在一段時間以後,
自己做切換,
那麼你可以使用TransitionDrawable這個類別簡單達到切換的效果。

首先自己定義一個xml來表示切換的兩張圖片,
假設是這兩張圖好了



首先先將這兩個圖片寫進xml檔案裡面,
第一張圖片是panda,
第二張圖片是rabbit,

<?xml version="1.0" encoding="utf-8"?>
<transition
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/panda" />
    <item android:drawable="@drawable/rabbit" />
</transition>

而一開始我們會先讓panda呈現在上面,
然後讓第二張圖片慢慢覆蓋第一張圖片,
程式碼如下;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TransitionDrawable transition = (TransitionDrawable) getResources().getDrawable(R.drawable.picture);
        ImageView img = (ImageView) findViewById(R.id.img);
        img.setImageDrawable(transition);
        transition.setCrossFadeEnabled(true);
        transition.startTransition(5000);
    }
}

在main.xml裡面宣告了一個ImageView用來裝交換的圖片

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.givemepass.transitiondrawabledemo.MainActivity">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/img" />
</RelativeLayout>

然後利用getResources()方法取得Resources就可以把xml轉成TransitionDrawable物件,
接著 把TransitionDrawable物件塞進ImageView裡面,
transition.startTransition(5000);
這行是花五秒的時間讓第二層的圖片轉成第一層,
查一下google document可以得到下面的資訊,
Begin the second layer on top of the first layer.

所以萬一兩張圖像我這兩張一樣都是透明的,
就可以很清楚的看到第二層圖片轉換成第一層,
記得要加上這行, 不然第一張圖片不會消失喔!

transition.setCrossFadeEnabled(true);

如果你想讓第二層變回第一層, 就可以使用reverseTransition這個方法。


慢慢的轉變


變成第二張圖片惹