Android属性动画 实战-视差动画

 

 

 

效果图

先看看效果图：

从效果上看就是布局文件从从屏幕右侧飞入屏幕内，但不是一起飞入，而是有视差效果。

实例代码

我们先写布局：

<?xml version="1.0" encoding="utf-8"?>

<androidx.appcompat.widget.LinearLayoutCompat 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <Button
        android:id="@+id/view1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="pause" />

    <Button
        android:id="@+id/view2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="resume" />

    <ImageView
        android:id="@+id/view3"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:src="@drawable/aa" />

</androidx.appcompat.widget.LinearLayoutCompat>

布局非常简单，就是3个view( view1、view2、view3)。其中 view3 是一个ImageView 。看看预览效果

编写代码：

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        var view1: View = findViewById(R.id.view1)
        var view2: View = findViewById(R.id.view2)
        var view3: View = findViewById(R.id.view3)

        view1.visibility = View.GONE
        view2.visibility = View.GONE
        view3.visibility = View.GONE

        val animator = slide(view1)
        //延迟执行：防止执行太快，视觉看不清
        animator.startDelay = 200
        animator.doOnStart {
            view1.visibility = View.VISIBLE
        }

        val animator2 = slide(view2)
        //延迟执行：制造和view1视差效果
        animator2.startDelay = 500
        animator2.doOnStart {
            view2.visibility = View.VISIBLE
        }

        val animator3 = slide(view3)
         //延迟执行：制造和view2视差效果
        animator3.startDelay = 800
        animator3.doOnStart {
            view3.visibility = View.VISIBLE
        }

        animator.start()
        animator2.start()
        animator3.start()
    }

    //从屏幕右侧滑入屏幕
    private fun slide(view: View): Animator {
        //获取屏幕宽度
        val display = windowManager.defaultDisplay
        val width = display.width
        val animator = ObjectAnimator.ofFloat(view, "translationX", width.toFloat(), 0f)
        animator.interpolator = DecelerateInterpolator()
        animator.duration = 450
        return animator
    }
}

代码非常简单，我就不一一解释了，相信你能看明白