Android動(dòng)畫二：5.0 實(shí)現(xiàn)復(fù)雜 Activity 過(guò)渡動(dòng)畫方式：分解動(dòng)畫、共享元素、滑動(dòng)動(dòng)畫等

在 5.0 之前我們可以通過(guò) activity.overridePendingTransition() 實(shí)現(xiàn)滑動(dòng)動(dòng)畫、漸變動(dòng)畫、縮放動(dòng)畫等。在 5.0 版本之后，可以使用 android.transition.* 實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果。

教程

分解動(dòng)畫

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 explode = Explode()
        window.enterTransition = explode
        window.exitTransition = explode
    }
}

共享元素動(dòng)畫

共享元素動(dòng)畫的方式也很簡(jiǎn)單，只需要在跳轉(zhuǎn)時(shí)候帶上前面頁(yè)面的View，并設(shè)置名稱，在第二個(gè)Activity的xml設(shè)置android:transitionName，填寫對(duì)應(yīng)的名稱即可。

 // 共享
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.xml

<?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.kt

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

滑動(dòng)動(dòng)畫

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 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)
        }
        // 滑動(dòng)
        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.kt

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.xml

<?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="滑動(dòng)一" />
    <Button
        android:id="@+id/button_slide2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="滑動(dòng)二" />
    <Button
        android:id="@+id/button_fade1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="淡入淡出" />
</LinearLayout>

完整示例代碼

https://github.com/taoweiji/ActivityAnimationExample

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容