Android動畫二：5.0 實現複雜 Activity 過渡動畫方式：分解動畫、共享元素、滑動動畫等

時間 2019-11-07

標籤 android 動畫 5.0 實現複雜 activity 過渡方式分解共享元素滑動欄目 Android 简体版

原文原文鏈接

在 5.0 以前咱們能夠經過 activity.overridePendingTransition() 實現滑動動畫、漸變更畫、縮放動畫等。在 5.0 版本以後，能夠使用 android.transition.* 實現複雜的動畫效果。 java

教程

分解動畫

val bundle = ActivityOptions.makeSceneTransitionAnimation(activity).toBundle()
startActivity(Intent(activity, TargetActivity::class.java), bundle)
複製代碼

TransitionTargetActivity.ktandroid

class TargetActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_target)
        val explode = Explode()
        window.enterTransition = explode
        window.exitTransition = explode
    }
}
複製代碼

共享元素動畫

共享元素動畫的方式也很簡單，只須要在跳轉時候帶上前面頁面的View，並設置名稱，在第二個Activity的xml設置android:transitionName，填寫對應的名稱便可。git

// 共享
button_pair1.setOnClickListener {
  val bundle = ActivityOptions.makeSceneTransitionAnimation(activity,button_pair1,"button_pair1").toBundle()
  startActivity(Intent(activity, TargetActivity::class.java).putExtra("animation","pair"), bundle)
}
複製代碼

activity_target.xmlgithub

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button_pair1"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginTop="20dp"
        android:text="共享元素一"
        android:transitionName="button_pair1" />
</LinearLayout>
複製代碼

TransitionTargetActivity.ktbash

class TargetActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_target)
    }
}
複製代碼

滑動動畫

val bundle = ActivityOptions.makeSceneTransitionAnimation(activity).toBundle()
startActivity(Intent(activity, TargetActivity::class.java), bundle)
複製代碼

TransitionTargetActivity.ktide

class TargetActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_target)
        val slide = Slide(Gravity.LEFT)
        window.enterTransition = slide
        window.exitTransition = slide
    }
}
複製代碼

淡入淡出

val bundle = ActivityOptions.makeSceneTransitionAnimation(activity).toBundle()
startActivity(Intent(activity, TargetActivity::class.java), bundle)
複製代碼

TransitionTargetActivity.kt動畫

class TargetActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_target)
        val fade = Fade().setDuration(1000)
        window.enterTransition = fade
        window.exitTransition = fade
    }
}
複製代碼

完整示例代碼

class MainTab1Fragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_main_tab1, container, false)
    }
    @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        // 分解
        button_explode1.setOnClickListener {
            val bundle = ActivityOptions.makeSceneTransitionAnimation(activity).toBundle()
            startActivity(Intent(activity, TargetActivity::class.java).putExtra("animation","explode"), bundle)
        }
        // 共享
        button_pair1.setOnClickListener {
            val bundle = ActivityOptions.makeSceneTransitionAnimation(activity,button_pair1,"button_pair1").toBundle()
            startActivity(Intent(activity, TargetActivity::class.java).putExtra("animation","pair"), bundle)
        }
        button_pair2.setOnClickListener {
            val bundle = ActivityOptions.makeSceneTransitionAnimation(activity,button_pair2,"button_pair2").toBundle()
            startActivity(Intent(activity, TargetActivity::class.java).putExtra("animation","pair"), bundle)
        }
        button_pair3.setOnClickListener {
            val bundle = ActivityOptions.makeSceneTransitionAnimation(activity,button_pair3,"button_pair3").toBundle()
            startActivity(Intent(activity, TargetActivity::class.java).putExtra("animation","pair"), bundle)
        }
        // 滑動
        button_slide1.setOnClickListener {
            val bundle = ActivityOptions.makeSceneTransitionAnimation(activity).toBundle()
            startActivity(Intent(activity, TargetActivity::class.java).putExtra("animation","slide1"), bundle)
        }
        button_slide2.setOnClickListener {
            val bundle = ActivityOptions.makeSceneTransitionAnimation(activity).toBundle()
            startActivity(Intent(activity, TargetActivity::class.java).putExtra("animation","slide2"), bundle)
        }
        // 淡入淡出
        button_fade1.setOnClickListener {
            val bundle = ActivityOptions.makeSceneTransitionAnimation(activity).toBundle()
            startActivity(Intent(activity, TargetActivity::class.java).putExtra("animation","fade"), bundle)
        }
    }
}
複製代碼

TransitionTargetActivity.ktui

class TargetActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_target)
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        val animationType = intent.getStringExtra("animation")
        when (animationType) {
            "explode" -> {
                val explode = Explode()
                window.enterTransition = explode
                window.exitTransition = explode
            }
            "pair" -> {
            }
            "slide1" -> {
                val explode = Slide()
                window.enterTransition = explode
                window.exitTransition = explode
            }
            "slide2" -> {
                val slide = Slide(Gravity.LEFT)
                window.enterTransition = slide
                window.exitTransition = slide
            }
            "fade" -> {
                val fade = Fade().setDuration(1000)
                window.enterTransition = fade
                window.exitTransition = fade
            }
        }
    }
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return when (item.itemId) {
            android.R.id.home -> {
                onBackPressed()
                true
            }
            else -> super.onOptionsItemSelected(item)
        }
    }
}
複製代碼

activity_target.xmlspa

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp">
    <Button
        android:id="@+id/button_explode1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="分解" />
    <Button
        android:id="@+id/button_pair1"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginTop="20dp"
        android:text="共享元素一"
        android:transitionName="button_pair1" />
    <Button
        android:id="@+id/button_pair2"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:text="共享元素二"
        android:transitionName="button_pair2" />
    <Button
        android:id="@+id/button_pair3"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:text="共享元素三"
        android:transitionName="button_pair3" />
    <Button
        android:id="@+id/button_slide1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="滑動一" />
    <Button
        android:id="@+id/button_slide2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="滑動二" />
    <Button
        android:id="@+id/button_fade1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="淡入淡出" />
</LinearLayout>
複製代碼