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