4. Target methods
All methods and properties are optional, but they play integral roles in making targets useful for animation, API loading, event handling, and more:
value
If defined, value is the primary target method that will be executed. The target value will be calculated based on the result of this method.
Prefix _ to the target name
It indicates that the target is in an inactive state and must be activated by an event or other targets.
active
This is only a property. It indicates whether the target is ready for execution. When set to false, it behaves similarly to a _ prefix. By default, all targets are active, so setting it to true is unnecessary.
Postfix $ to the target name
A target name ending with $ indicates that it will be activated when the preceding target is executed. If the preceding target involves API calls, it will be activated each time an API response is received, while ensuring the order of API calls is enforced. This means it will remain inactive until the first API result is received, then the second, and so on.
Postfix $$ to the target name
A target name ending with $$ indicates indicates that it will be activated only after the preceding target has completed, along with all its imperative targets, and after all API results have been received without error.
enabledOn
Determines whether the target is eligible for execution. If enabledOn() returns false, the target remains active until it is enabled and gets executed.
loop
Controls the repetition of target execution. If loop() returns true, the target will continue to execute indefinitely. It can also be defined as a boolean instead of a method.
cycles
It works similarly to loop, but it specifies an explicit number of repetitions. It can also be combined with loop, in which case, once the specified cycles complete, they will rerun as long as loop returns true.
interval
It specifies the pause between each target execution or each actual value update when steps are defined.
steps
By default, the actual value is updated immediately after the target value. The steps option allows the actual value to be updated in iterations specified by the number of steps.
easing
An easing function that operates when steps are defined. It controls how the actual value is updated in relation to the steps.
onValueChange
This callback is triggered whenever there is a change returned by the target method, which is called value().
onStepsEnd
This method is invoked only after the final step of updating the actual value is completed, assuming the target has a defined steps value.
onImperativeStep
This callback tracks the progress of imperative targets defined within a declarative target. If there are multiple imperative targets, this method is called at each step, identifiable by their target name. You can also use on${targetName}Step to track individual targets with their own callbacks. For example, onWidthStep() is called on each update of the width target.
onImperativeEnd
Similar to onImperativeStep, but it is triggered when an imperative target completes. If multiple targets are expected to complete, you can use on${targetName}End instead. For example, onWidthEnd is called when the width target gets completed.
initialValue
This is only property. It defines the initial value of the actual value.
onSuccess
An optional callback for targets that make API calls. It will be invoked for each API response received.
onError
Similar to the onSuccess but it will be invoked on every error.
The following example demonstrates some of the target methods: