Property animators are great, but with them alone it would be impossible to animate a view as easily as you just did. Modern Android property animation works in concert with transformation properties.

We said earlier that your view has a local layout rect, which is the position and size it is assigned in the layout process. You can move the view around after that by setting additional properties on the view, called transformation properties.

You have three properties to rotate the view (rotation, pivotX, and pivotY, shown in Figure 25.3), two properties to scale the view vertically and horizontally (scaleX and scaleY, shown in Figure 25.4), and two properties to move the view around the screen (translationX and translationY, shown in Figure 25.5).

Figure 25.3  View rotation

Figure 25.4  View scaling

Figure 25.5  View translation

All these properties can be fetched and modified. For example, if you wanted to know the current value of translationX, you would invoke view.translationX. If you wanted to set it, you would invoke view.translationX = Float.

So what does the y property do? The x and y properties are conveniences built on top of local layout coordinates and the transformation properties. They allow you to write code that simply says, “Put this view at this X coordinate and this Y coordinate.” Under the hood, these properties will modify translationX or translationY to put the view where you want it to be. That means that setting binding.sun.y = 50 really means this:

    binding.sun.translationY = 50 - binding.sun.top

Your animation, while pretty, is abrupt. If the sun was really sitting there perfectly still in the sky, it would take a moment for it to accelerate into the animation you see. To add this sensation of acceleration, all you need to do is use a TimeInterpolator. TimeInterpolator has one role: to change the way your animation goes from point A to point B.

Use an AccelerateInterpolator in startAnimation() to make your sun speed up a bit at the beginning.

private fun startAnimation() {
    val sunYStart = binding.sun.top.toFloat()
    val sunYEnd = binding.sky.height.toFloat()

    val heightAnimator = ObjectAnimator
        .ofFloat(binding.sun, "y", sunYStart, sunYEnd)
        .setDuration(3000)
    heightAnimator.interpolator = AccelerateInterpolator()

    heightAnimator.start()
}

Run Sunset one more time and press to see your animation. Your sun should now start moving slowly and accelerate to a quicker pace as it moves toward the horizon.

There are a lot of styles of motion you might want to use in your app, so there are a lot of different TimeInterpolators. To see all the interpolators that ship with Android, look at the Known indirect subclasses section in the reference documentation for TimeInterpolator.

Now that your sun is animating down, let’s animate the sky to a sunset-appropriate color. Pull the colors you defined in colors.xml into properties using a lazy delegate.

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    private val blueSkyColor: Int by lazy {
        ContextCompat.getColor(this, R.color.blue_sky)
    }
    private val sunsetSkyColor: Int by lazy {
        ContextCompat.getColor(this, R.color.sunset_sky)
    }
    private val nightSkyColor: Int by lazy {
        ContextCompat.getColor(this, R.color.night_sky)
    }
    ...
}

Now add an animation to startAnimation() to animate the sky from blueSkyColor to sunsetSkyColor.

private fun startAnimation() {
    val sunYStart = binding.sun.top.toFloat()
    val sunYEnd = binding.sky.height.toFloat()

    val heightAnimator = ObjectAnimator
        .ofFloat(binding.sun, "y", sunYStart, sunYEnd)
        .setDuration(3000)
    heightAnimator.interpolator = AccelerateInterpolator()

    val sunsetSkyAnimator = ObjectAnimator
        .ofInt(binding.sky, "backgroundColor", blueSkyColor, sunsetSkyColor)
        .setDuration(3000)

    heightAnimator.start()
    sunsetSkyAnimator.start()
}

This seems like it is headed in the right direction, but if you run it you will see that something is amiss. Instead of moving smoothly from blue to orange, the colors will kaleidoscope wildly.

The reason this happens is that a color integer is not a simple number. It is four smaller numbers schlupped together into one Int. So for ObjectAnimator to properly evaluate which color is halfway between blue and orange, it needs to know how that works.

When ObjectAnimator’s normal understanding of how to find values between the start and end is insufficient, you can provide a subclass of TypeEvaluator to fix things. A TypeEvaluator is an object that tells ObjectAnimator what value is, say, a quarter of the way between a start value and an end value. Android provides a subclass of TypeEvaluator called ArgbEvaluator that will do the trick here.

private fun startAnimation() {
    val sunYStart = binding.sun.top.toFloat()
    val sunYEnd = binding.sky.height.toFloat()

    val heightAnimator = ObjectAnimator
        .ofFloat(binding.sun, "y", sunYStart, sunYEnd)
        .setDuration(3000)
    heightAnimator.interpolator = AccelerateInterpolator()

    val sunsetSkyAnimator = ObjectAnimator
        .ofInt(binding.sky, "backgroundColor", blueSkyColor, sunsetSkyColor)
        .setDuration(3000)
    sunsetSkyAnimator.setEvaluator(ArgbEvaluator())

    heightAnimator.start()
    sunsetSkyAnimator.start()
}

(There are multiple versions of ArgbEvaluator; import the android.animation version.)

Run your animation once again, and you should see the sky fade to a beautiful orange color (Figure 25.6).

Figure 25.6  Sunset color