Checkout HeroModifier.swift for up-to-date modifier details.
Basic Modifiers
- fade
- position
- size
- scale
- rotate
- perspective
- translate
- zPosition
- opacity
- shadowOpacity
- shadowRadius
- shadowColor
- shadowOffset
- shadowPath
- borderColor
- borderWidth
Advance Modifiers
| Modifier Name | Description |
|---|---|
| delay(time) | Delay for the animation |
| duration(time) | Duration for the animation, if unspecified, the duration will be calculated based on the distance travelled |
| timingFunction(curveName) | Timing function for the animation (linear, easeIn, easeOut, easeInOut, standard, deceleration, acceleration, sharp) |
| timingFunction(c1x, c1y, c2x, c2y) | Custom cubic bezier timing function for the animation |
| spring(stiffness, damping) | (iOS 9+) Use spring animation with custom stiffness & damping. The duration will be automatically calculated. Will be ignored if arc, curve, or duration is set. |
| useGlobalCoordinateSpace | Force the view to use global coordinate space |
| overlay(color:,opacity) | Animate an overlay on top of the view |
| source(HeroID) | Transition from a view with given heroID |
| arc(intensity) | Make position animation follow a natural arc curve. |
| cascade(deltaDelay, direction, forceMatchedToWait) | Apply increasing delay to view's subview |
| ignoreSubviewModifiers | Disables all heroModifiers for view's direct subviews |
| useScaleBasedSizeChange | Force Hero use scale based size animation. |
| useOptimizedSnapshot | Change snapshot type to OptimizedSnapshot, see Snapshot Types |
| useNormalSnapshot | Change snapshot type to NormalSnapshot, see Snapshot Types |
| useLayerRenderSnapshot | Change snapshot type to LayerRenderSnapshot, see Snapshot Types |
| useNoSnapshot | Change snapshot type to NoSnapshot, see Snapshot Types |
| beginWith(modifiers:) | Apply modifiers directly to the view at the start of the transition. Without animation. |
| beginWithIfMatched(modifiers:) | Same as beginWith but effective only when matched. |
Modifiers Support for matched views
Some of the modifiers won't work with matched views(views with the same heroID). These are:
- fade
- scale
- translate
- rotate
- transform
- cascade
NOTE: For other modifiers that works with matched views, the target view's modifiers will be used. the source view's modifiers will be ignored.
Modifier Details
Arc Modifier
When animating position, if arc is enabled. the view will follow a natural arc curve instead of going to the target position directly. See material design for more details.
The intensity parameter is a number that determine the curve's intensity. A value of 0 means no curve. A value of 1 means a natural downward curve. This value can be negative or above 1. Default is 1.
Use the debug plugin and enable Show Curves to see the actual arc curve objects follows.
Source Modifier
The source modifier allows a view to be transitioned from a view with the given heroID.
See the Menu Example for how source is used.
Cascade Modifier
The cascade modifier automatically applies increasing delay heroModifiers to a view's direct subviews.
| Parameters | Description |
|---|---|
| deltaDelay | delay in between each animation |
| direction | the cascade direction, can be topToBottom, bottomToTop, leftToRight, & rightToLeft, default topToBottom |
| forceMatchedToWait | whether or not to delay matched views until all cascading animations have started, default false |
NOTE: matched views(views with the same heroID) won't have the cascading effect. however, you can use the 3rd parameter to delay the start time of matched views until the last cascading animation have started. The matched views will animate simultaneously with the cascading views by default.
See the ListToGrid & ImageGallery Example for how cascade is used.
ignoreSubviewModifiers Modifier
The ignoreSubviewModifiers modifier disables all heroModifiers attributes for a view's direct subviews.
useScaleBasedSizeChange Modifier
Force Hero use scale based size animation. This will convert all .size modifier into .scale modifier.
This is to help Hero animate layers that doesn't support bounds animation. Also gives better animation performance.