이제 Android 11 개발자 프리뷰를 사용할 수 있습니다. 테스트해 보고 의견을 공유하세요.

androidx.ui.animation

Classes

AnimatedFloatModel

Model class for AnimatedFloat.

AnimatedValueModel

Model class for AnimatedValue.

ColorPropKey

Built-in property key for Color properties.

DisposableAnimationClock

Clock that remembers all of its active subscriptions so that it can dispose of upstream subscriptions.

DpPropKey

Built-in property key for Dp properties.

PxPositionPropKey

Built-in property key for PxPosition properties.

PxPropKey

Built-in property key for Px properties.

RectPropKey

Built-in property key for Rect properties.

Top-level functions summary

Unit
Crossfade(current: T, children: (T) -> Unit)

Crossfade allows to switch between two layouts with a crossfade animation.

Unit
Transition(definition: TransitionDefinition<T>, toState: T, clock: AnimationClockObservable = AnimationClockAmbient.current, initState: T = toState, onStateChangeFinished: (T) -> Unit = null, children: (state: TransitionState) -> Unit)

Transition composable creates a state-based transition using the animation configuration defined in TransitionDefinition.

Float
animate(target: Float, animBuilder: AnimationBuilder<Float> = remember { PhysicsBuilder() }, endListener: (Float) -> Unit = null)

Fire-and-forget animation Composable for Float.

Color
animate(target: Color, animBuilder: AnimationBuilder<Color> = remember { PhysicsBuilder() }, endListener: (Color) -> Unit = null)

Fire-and-forget animation Composable for Color.

T
animate(target: T, converter: TwoWayConverter<T, V>, animBuilder: AnimationBuilder<T> = remember { PhysicsBuilder() }, endListener: (T) -> Unit = null)

Fire-and-forget animation Composable for any value.

AnimatedValue<Color, AnimationVector4D>
animatedColor(initVal: Color, clock: AnimationClockObservable = AnimationClockAmbient.current)

The animatedValue effect creates an AnimatedValue of Color and positionally memoizes it.

AnimatedFloat
animatedFloat(initVal: Float, clock: AnimationClockObservable = AnimationClockAmbient.current)

The animatedValue effect creates an AnimatedFloat and positionally memoizes it.

AnimatedValue<T, V>
animatedValue(initVal: T, converter: TwoWayConverter<T, V>, clock: AnimationClockObservable = AnimationClockAmbient.current)

The animatedValue effect creates an AnimatedValue and positionally memoizes it.

Top-level properties summary

(colorSpace: ColorSpace) -> TwoWayConverter<Color, AnimationVector4D>

A lambda that takes a ColorSpace and returns a converter that can both convert a Color to a AnimationVector4D, and convert a AnimationVector4D) back to a Color in the given ColorSpace.

TwoWayConverter<Dp, AnimationVector1D>

A type converter that converts a Dp to a AnimationVector1D, and vice versa.

TwoWayConverter<PxPosition, AnimationVector2D>

A type converter that converts a PxPosition to a AnimationVector2D, and vice versa.

TwoWayConverter<Px, AnimationVector1D>

A type converter that converts a Px to a AnimationVector1D, and vice versa.

TwoWayConverter<Rect, AnimationVector4D>

A type converter that converts a Rect to a AnimationVector4D, and vice versa.

Boolean

Stores the enabled state for Transition animations.

Extension functions summary

For AnimationClockObservable
DisposableAnimationClock

Return a new AnimationClockObservable wrapping this one that will auto-unsubscribe all AnimationClockObservers when this call leaves the composition, preventing clock subscriptions from persisting beyond the composition lifecycle.

Top-level functions

Crossfade

@Composable fun <T> Crossfade(
    current: T,
    children: (T) -> Unit
): Unit

Crossfade allows to switch between two layouts with a crossfade animation.

import androidx.ui.animation.Crossfade
import androidx.ui.core.Text

Crossfade(current = "A") { screen ->
    when (screen) {
        "A" -> Text("Page A")
        "B" -> Text("Page B")
    }
}
Parameters
current: T is a key representing your current layout state. every time you change a key the animation will be triggered. The children called with the old key will be faded out while the children called with the new key will be faded in.

Transition

@Composable fun <T> Transition(
    definition: TransitionDefinition<T>,
    toState: T,
    clock: AnimationClockObservable = AnimationClockAmbient.current,
    initState: T = toState,
    onStateChangeFinished: (T) -> Unit = null,
    children: (state: TransitionState) -> Unit
): Unit

Transition composable creates a state-based transition using the animation configuration defined in TransitionDefinition. This can be especially useful when animating multiple values from a predefined set of values to another. For animating a single value, consider using animatedValue, animatedFloat, animatedColor or the more light-weight animate APIs.

Transition starts a new animation or changes the on-going animation when the toState parameter is changed to a different value. It dutifully ensures that the animation will head towards new toState regardless of what state (or in-between state) it’s currently in: If the transition is not currently animating, having a new toState value will start a new animation, otherwise the in-flight animation will correct course and animate towards the new toState based on the interruption handling logic.

Transition takes a transition definition, a target state and child composables. These child composables will be receiving a TransitionState object as an argument, which captures all the current values of the animation. Child composables should read the animation values from the TransitionState object, and apply the value wherever necessary.

import androidx.animation.transitionDefinition
import androidx.ui.animation.ColorPropKey
import androidx.ui.animation.DpPropKey
import androidx.ui.animation.Transition
import androidx.ui.foundation.ColoredRect

val colorKey = ColorPropKey()
val widthKey = DpPropKey()
val heightKey = DpPropKey()

val definition = transitionDefinition {
    state(State.First) {
        this[colorKey] = Color.Red
        this[widthKey] = 200.dp
        this[heightKey] = 400.dp
    }
    state(State.Second) {
        this[colorKey] = Color.Green
        this[widthKey] = 300.dp
        this[heightKey] = 300.dp
    }
}

@Composable
fun TransitionBasedColoredRect() {
    // This puts the transition in State.First. Any subsequent state change will trigger a
    // transition animation, as defined in the transition definition.
    Transition(definition = definition, toState = State.First) { state ->
        ColoredRect(color = state[colorKey], width = state[widthKey], height = state[heightKey])
    }
}

@Composable
fun ColorRectWithInitState() {
    // This starts the transition going from State.First to State.Second when this composable
    // gets composed for the first time.
    Transition(definition = definition, initState = State.First, toState = State.Second) {
            state ->
        ColoredRect(color = state[colorKey], width = state[widthKey], height = state[heightKey])
    }
}
Parameters
definition: TransitionDefinition<T> Transition definition that defines states and transitions
toState: T New state to transition to
clock: AnimationClockObservable = AnimationClockAmbient.current Optional animation clock that pulses animations when time changes. By default, the system uses a choreographer based clock read from the AnimationClockAmbient. A custom implementation of the AnimationClockObservable (such as a androidx.animation.ManualAnimationClock) can be supplied here if there’s a need to manually control the clock (for example in tests).
initState: T = toState Optional initial state for the transition. When undefined, the initial state will be set to the first toState seen in the transition.
onStateChangeFinished: (T) -> Unit = null An optional listener to get notified when state change animation has completed
children: (state: TransitionState) -> Unit The children composables that will be animated

animate

@Composable fun animate(
    target: Float,
    animBuilder: AnimationBuilder<Float> = remember { PhysicsBuilder() },
    endListener: (Float) -> Unit = null
): Float

Fire-and-forget animation Composable for Float. Once such an animation is created, it will be positionally memoized, like other @Composables. To trigger the animation, or alter the course of the animation, simply supply a different target to the Composable.

Note, animate is for simple animations that cannot be canceled. For cancellable animations see animatedValue, and animatedFloat for fling support.

import androidx.ui.animation.animate
import androidx.ui.core.Text
import androidx.ui.core.drawOpacity
import androidx.ui.layout.Container

Container(expanded = true) {
    val opacity = animate(if (visibility == VisibilityState.Invisible) 0f else 1f)
    Text("Visibility Transition", modifier = drawOpacity(opacity))
}
Parameters
target: Float Target value of the animation
animBuilder: AnimationBuilder<Float> = remember { PhysicsBuilder() } The animation that will be used to change the value through time. Physics animation will be used by default.
endListener: (Float) -> Unit = null An optional end listener to get notified when the animation is finished.

animate

@Composable fun animate(
    target: Color,
    animBuilder: AnimationBuilder<Color> = remember { PhysicsBuilder() },
    endListener: (Color) -> Unit = null
): Color

Fire-and-forget animation Composable for Color. Once such an animation is created, it will be positionally memoized, like other @Composables. To trigger the animation, or alter the course of the animation, simply supply a different target to the Composable.

Note, animate is for simple animations that cannot be canceled. For cancellable animations see animatedValue.

import androidx.ui.animation.animate
import androidx.ui.core.Text
import androidx.ui.core.currentTextStyle
import androidx.ui.layout.Container

Container(expanded = true) {
    val textColor = animate(if (enabled) Color.Black else Color.Gray)
    Text("Visibility Transition", style = currentTextStyle().copy(color = textColor))
}
Parameters
target: Color Target value of the animation
animBuilder: AnimationBuilder<Color> = remember { PhysicsBuilder() } The animation that will be used to change the value through time. Physics animation will be used by default.
endListener: (Color) -> Unit = null An optional end listener to get notified when the animation is finished.

animate

@Composable fun <T, V : AnimationVector> animate(
    target: T,
    converter: TwoWayConverter<T, V>,
    animBuilder: AnimationBuilder<T> = remember { PhysicsBuilder() },
    endListener: (T) -> Unit = null
): T

Fire-and-forget animation Composable for any value. Once such an animation is created, it will be positionally memoized, like other @Composables. To trigger the animation, or alter the course of the animation, simply supply a different target to the Composable.

Note, animate is for simple animations that cannot be canceled. For cancellable animations see animatedValue.

import androidx.animation.AnimationVector2D
import androidx.animation.TwoWayConverter
import androidx.compose.remember
import androidx.ui.animation.animate
import androidx.ui.foundation.ColoredRect

val mySize = remember(enabled) {
    if (enabled) {
        MySize(500.dp, 500.dp)
    } else {
        MySize(100.dp, 100.dp)
    }
}
val animSize = animate<MySize, AnimationVector2D>(mySize, TwoWayConverter(
    convertToVector = { AnimationVector2D(it.width.value, it.height.value) },
    convertFromVector = { MySize(it.v1.dp, it.v2.dp) }
))
ColoredRect(Color.Red, width = animSize.width, height = animSize.height)
Parameters
target: T Target value of the animation
animBuilder: AnimationBuilder<T> = remember { PhysicsBuilder() } The animation that will be used to change the value through time. Physics animation will be used by default.
endListener: (T) -> Unit = null An optional end listener to get notified when the animation is finished.

animatedColor

@Composable fun animatedColor(
    initVal: Color,
    clock: AnimationClockObservable = AnimationClockAmbient.current
): AnimatedValue<Color, AnimationVector4D>

The animatedValue effect creates an AnimatedValue of Color and positionally memoizes it. When the AnimatedValue object gets its value updated, components that rely on that value will be automatically recomposed.

Parameters
initVal: Color Initial value to set AnimatedValue to.

animatedFloat

@Composable fun animatedFloat(
    initVal: Float,
    clock: AnimationClockObservable = AnimationClockAmbient.current
): AnimatedFloat

The animatedValue effect creates an AnimatedFloat and positionally memoizes it. When the AnimatedFloat object gets its value updated, components that rely on that value will be automatically recomposed.

Parameters
initVal: Float Initial value to set AnimatedFloat to.

animatedValue

@Composable fun <T, V : AnimationVector> animatedValue(
    initVal: T,
    converter: TwoWayConverter<T, V>,
    clock: AnimationClockObservable = AnimationClockAmbient.current
): AnimatedValue<T, V>

The animatedValue effect creates an AnimatedValue and positionally memoizes it. When the AnimatedValue object gets its value updated, components that rely on that value will be automatically recomposed.

Parameters
initVal: T Initial value to set AnimatedValue to.
converter: TwoWayConverter<T, V> A value type converter for transforming any type T to an animatable type (i.e. Floats, Vector2D, Vector3D, etc)

Top-level properties

ColorToVectorConverter

val ColorToVectorConverter: (colorSpace: ColorSpace) -> TwoWayConverter<Color, AnimationVector4D>

A lambda that takes a ColorSpace and returns a converter that can both convert a Color to a AnimationVector4D, and convert a AnimationVector4D) back to a Color in the given ColorSpace.

DpToVectorConverter

val DpToVectorConverter: TwoWayConverter<Dp, AnimationVector1D>

A type converter that converts a Dp to a AnimationVector1D, and vice versa.

PxPositionToVectorConverter

val PxPositionToVectorConverter: TwoWayConverter<PxPosition, AnimationVector2D>

A type converter that converts a PxPosition to a AnimationVector2D, and vice versa.

PxToVectorConverter

val PxToVectorConverter: TwoWayConverter<Px, AnimationVector1D>

A type converter that converts a Px to a AnimationVector1D, and vice versa.

RectToVectorConverter

val RectToVectorConverter: TwoWayConverter<Rect, AnimationVector4D>

A type converter that converts a Rect to a AnimationVector4D, and vice versa.

transitionsEnabled

var transitionsEnabled: Boolean

Stores the enabled state for Transition animations. Useful for tests to disable animations and have reliable screenshot tests.

Extension functions

asDisposableClock

@Composable fun AnimationClockObservable.asDisposableClock(): DisposableAnimationClock

Return a new AnimationClockObservable wrapping this one that will auto-unsubscribe all AnimationClockObservers when this call leaves the composition, preventing clock subscriptions from persisting beyond the composition lifecycle.

If you are creating an animation object during composition that will subscribe to an AnimationClockObservable or otherwise hold a long-lived reference to one to subscribe to later, create that object with a clock returned by this method.