Implement shared transition animation

[vRallev]

Implement a shared transition animation when the user taps the profile picture. This sample highlights how animations can be implemented when switching between different models and templates.

Animation.mp4

[cahaverl]

This poses the "Where did it come from?" problem. Here, I think it === model, but hard to say. If it is the model, maybe state this as model.contentKey. Otherwise, I think it would be good to name it.

[vRallev]

Renamed it to template

            contentKey = { template ->
              // Use the key from AnimationContentKey as indicator when content has changed
              // that needs to be animated. If this key is doesn't change (the default behavior),
              // then no animation occurs.
              template.contentKey
            },

[cahaverl]

Probably should say "between models and even templates."

[cahaverl]

This KDoc doesn't parse well. Maybe 'are' is missing in "application a wrapped within". The first phrase lacks a verb. Even guessing though, it isn't clear what this KDoc is trying to tell me.

Is this scope nested in the following LocalSharedTransitionScope, or do we have all Venn diagram possibilities?

[vRallev]

"a" was supposed to be "are".

I updated the documentation to this:

/**
 * All UI composable functions for renderers in the sample application are wrapped within a
 * [SharedTransitionLayout]. This composition local gives access to this wrapper instance to run a
 * shared element transition. For more information see the the
 * [shared element transition documentation](https://developer.android.com/develop/ui/compose/animation/shared-elements#shared-bounds).
 *
 * The [BaseModel] must implement [AnimationContentKey] to indicate that an animation should be
 * played. See [AnimationContentKey] for more details.
 */

And updated the documentation for AnimationContentKey to this with a sample:

/**
 * The sample application supports animations between models and templates. [BaseModel] classes can
 * implement this interface to indicate when a change occurred that should be animated. [contentKey]
 * represents a unique value for an animation state. If the value doesn't change between new models,
 * then no animation will be started.
 *
 * An example may look like this:
 * ```
 * data class Model(
 *     val showPictureFullscreen: Boolean,
 *     ...
 * ) : BaseModel, AnimationContentKey {
 *     override val contentKey: Int =
 *         if (showPictureFullscreen) 1 else AnimationContentKey.DEFAULT_CONTENT_KEY
 * }
 * ```
 *
 * In this sample when `showPictureFullscreen` changes from `true` to `false` and vice versa then an
 * animation will be started using [AnimatedContent]. Use [LocalAnimatedVisibilityScope] and
 * [LocalSharedTransitionScope] to get access to the right scopes.
 */

[cahaverl]

Similar KDoc concerns to the preceeding.