MotionAnimation

Background Color

Animates a view's current background color to the given color.

.background(color: UIColor)

Border Color

Animates a view's current border color to the given color.

.border(color: UIColor)

Border Width

Animates a view's current border width to the given width.

.border(width: CGFloat)

Corder Radius

Animates a view's current corner radius to the given radius.

.corner(radius: CGFloat)

Transform

Animates a view's current transform (perspective, scale, rotate) to the given one.

.transform(_ transform: CATransform3D)

Rotate

Rotation animations rotate a view or layer around a given axis using 360 degree intervals. For example, rotating 180 degrees will rotate the view a half interval around a given axis.

X Axis, Y Axis, Z Axis

Animates a view's current rotation to the given x, y, and z values. The x, y, and z axis animation is a general purpose configuration.

.rotate(x: CGFloat, y: CGFloat, z: CGFloat)

Touch

Animates a view's current rotation to the given point and z value. A point and z axis animation would generally be used when a user triggers a touch or gesture event.

.rotate(_ point: CGPoint, z: CGFloat)

2D

Animates a view's rotation around the z axis, which is a 2D perspective.

.rotate(_ z: CGFloat)

Spin

Spin animations rotate a view or layer around a given axis using full circle intervals. For example, rotating 0.5 will rotate the view a half interval around a given axis.

X Axis, Y Axis, Z Axis

Animates a view's current spin to the given x, y, and z values. The x, y, and z axis animation is a general purpose configuration.

.spin(x: CGFloat, y: CGFloat, z: CGFloat)

Touch

Animates a view's current spin to the given point and z value. A point and z axis animation would generally be used when a user triggers a touch or gesture event.

.spin(_ point: CGPoint, z: CGFloat)

2D

Animates a view's spin around the z axis, which is a 2D perspective.

.spin(_ z: CGFloat)

Scale

Animates the view's current scale to the given x, y, and z scale values.

.scale(x: CGFloat, y: CGFloat, z: CGFloat)

Animates the view's current x & y scale to the given scale value.

.scale(_ xy: CGFloat)

Translate

Animates a view equal to the distance given by the x, y, and z values.

.translate(x: CGFloat, y: CGFloat, z: CGFloat)

Animates a view equal to the distance given by a point and z value.

.translate(_ point: CGPoint, z: CGFloat)

Position

Animates a view's current position to the given point.

.position(_ point: CGPoint)

Fade

Fade In

Fades the view in during an animation.

.fadeIn

Fade Out

Fades the view out during an animation.

.fadeOut

Dynamic Fade

Animates a view's current opacity to the given one.

.fade(_ opacity: Double)

Z Position

Animates a view's current zPosition to the given zPosition.

.zPosition(_ position: CGFloat)

Size

Animates a view's current size to the given size.

.size(_ size: CGSize)

Shadow Path

Animates a view's current shadow path to the given one.

.shadow(path: CGPath)

Shadow Color

Animates a view's current shadow color to the given one.

.shadow(color: UIColor)

Shadow Offset

Animates a view's current shadow offset to the given one.

.shadow(offset: CGSize)

If Material is being used, you can use the Offset type.

.shadow(offset: Offset)

Shadow Opacity

Animates a view's current shadow opacity to the given one.

.shadow(opacity: Float)

Shadow Radius

Animates a view's current shadow radius to the given one.

.shadow(radius: CGFloat)

Depth

Animates the views shadow offset, opacity, and radius, using raw values.

.depth(offset: CGSize, opacity: Float, radius: CGFloat)

Animates the views shadow offset, opacity, and radius, using a tuple.

.depth(_ depth: (CGSize, Float, CGFloat))

If Material is being used, you can use the Depth enum or type.

Animates the views shadow offset, opacity, and radius, using a DepthPreset enum value.

.depth(_ preset: DepthPreset)

Animates the views shadow offset, opacity, and radius, using a Depth instance.

.depth(_ depth: Depth)

Spring

You would typically use a spring animation to animate a view's position so that it appears to be pulled towards a target by a spring. The further the view is from the target, the greater the acceleration towards it is.

Spring allows control over physically based attributes such as the spring's damping and stiffness.

stiffness - The spring stiffness coefficient.

damping - Defines how the spring’s motion should be damped due to the forces of friction.

.spring(stiffness: CGFloat, damping: CGFloat)

Duration

The duration of the view's animation. If a duration of 0 is used, the value will be converted to 0.01, to give a close to zero value.

.duration(_ time: TimeInterval)

Delay

Delays the animation of a given view.

.delay(_ time: TimeInterval)

Timing Function

Sets the view's timing function for the animation.

.timingFunction(_ timingFunction: CAMediaTimingFunction)

Completion

Creates a completion block handler that is executed once the animation is done.

.completion(_ execute: @escaping () -> Void)

Another approach to using a completion handler is to pass in an Array of MotionAnimations and then add a callback handler to the end of the function call. For example:

view.animate([.delay(1), .duration(0.5), .translate(x: 50, y: 100), .background(color: Color.cyan.base)]) { [weak self] in
    // Do something, animation has completed.
}

Last updated