controllerScale
scale(sx, sy, sz, duration,
init_sx, init_sy, init_sz,
repeat_start_pos, register_actions,
half_step, spring_acc, spring_vdamp,
ease_type, ease_amount, ease_mirror)
scale.messages = [start, start_back, start_reverse, start_new, start_new_back, pos0, pos1]
scale.events = [start, half, end, start_back, half_back, end_back, pos0, pos1]
Description
Performs a scaling animation of the element from its current scale to a new one.
Amount of scaling on each axis is supplied by the parameters sx
, sy
and sz
.
The last performed transition is remembered and at any time during or after it you can order performing it backwards or repeat it.
Applies one scale
transform.
Parameters
Visit page Controller # Common Parameters for documentation on the parameters, common to all controllers:
id
,
paused
and
disabled
.
Parameters of scale()
:
- duration
- Duration of the animation in milliseconds. Default value: 1000
- sx, sy, sz
-
Scaling amount in each dimension. A value of
1
is the original size. Default values: 1, 1, 1 - init_sx, init_sy, init_sz
-
Set initial scaling of the element.
Note that the initial scaling will be applied immediately (when the controller is enabled), not waiting for the animation to be started with any of the
start
messages. Default values: 1, 1, 1 - repeat_start_pos
-
If
true
, then everystart
orstart_back
message will start a forward/backwards animation from the direction's starting scaling. Iffalse
(by default), then sending these messages when an animation is already started will continue the current animation (if already moving in the same direction), or will start an animation in the opposite direction, but continuing from the current scaling. This parameter has no effect on thestart_new
orstart_new_back
messages, as they start a new animation from the current scaling in all cases. Default value: false - register_actions
-
Tells whether to handle the element's
show
,hide
,show_immediately
andhide_immediately
actions.
Values:false
/true
/"500"
(i.e. react with 500 milliseconds delay) /"500 elm"
(i.e. set event handlers with delay 500ms for HTML element #elm's actions). Default value: false - half_step
-
If set to less than
1
, each frame the current scaling factor will step closer to the required scaling factor, where step =half_step
* distance_to_required_scaling. Values in the range (0
-1
) make sense. Default value: 1 - spring_acc
-
If bigger than
0
, the animated scaling factor will behave as if attached to a spring. Bigger values ofspring_acc
result in stronger pulling of the "spring" and faster motion (i.e. shorter spring period). Note that setting too high of a value will cause a self-amplifying spring motion of the animated scaling factor. What is the highest value before the positive feedback kicks in depends on the value ofspring_vdamp
, but values up to2
are always safe. Default value: 0 - spring_vdamp
-
When spring motion is enabled via parameter
spring_acc
, every frame the current speed of the spring is multiplied by this parameter, effectively slowing the spring motion. Values between0
and1
are reasonable, where smaller values result in faster dying of the spring motion and a value of1
means absolute elasticity of the spring. Default value: 0.92 - ease_type
-
What kind of 'easing' to be applied on the transition.
Currently supported values:"linear"
- constant speed in all transition parts,"ease"
- slower start and end of transition, elliptical shape,"ease_in"
- slower start, fast and sudden end,"ease_out"
- fast and sudden start, slow end.
- ease_amount
-
Strength of 'easing' to be applied on the transition.
Values in the range (0
-1
] make sense, though values greater than1
(up to 2-3) can also be of use. Default value: 1 - ease_mirror
-
Tells if the easing applied on 'backwards' transition is the same as the forward easing, or mirrored.
If this parameter is set to
true
and parameterease_type
is"ease_in"
, then upon a backwards transition,"ease_out"
easing will be applied. Default value: false
Accepted Messages
Visit page Controller # Common Messages for documentation on the messages, accepted by all controllers:
pause
,
unpause
,
enable
,
disable
,
params
and
remove
.
Message Parameters: Note that along the message parameters specific to each message type, every message (not only params
) accepts as parameters any of the controller parameters,
which are set before the message is executed.
Messages accepted by scale()
:
- start
-
Starts a rotation from the current angle to the target angle.
The message has no effect if already in the target angle or rotating towards it.
If currently rotating in the 'backwards' direction (from the target to the starting angle, ordered with messages
start_back
andstart_new_back
), then the rotation direction will be switched to 'forwards' and the 'forward' rotation will continue from the current angle to the target angle. Message params: none - start_back
- Starts a 'backwards' rotation from the current angle to the starting angle of the current forward rotation. The message has no effect if already in the starting angle or rotating towards it. Message params: none
- start_reverse
- Start rotating in the reverse direction within the current (or last) rotation. Message params: none
- start_new
-
Same as the
start
message, but does not continue a current rotation. It always starts a new rotation from the current angle to the supplied target angle. Message params: none - start_new_back
-
Start the 'backwards' motion (i.e. starting from the target angle) of a new rotation.
So, calling
controller.message('start_new_back', {angle: 20})
will cause the element to jump 20 deegrees clockwise and then start rotating backwards to the current angle. Message params: none - pos0
- Position the element in the starting angle of the current rotation immediately. Message params: none
- pos1
- Position the element in the target angle of the current rotation immediately. Message params: none
Generated Events
Visit page Controller # Common Events for documentation on the events, generated by all controllers:
frame
,
remove
,
paused
,
unpaused
enabled
and
disabled
.
Events fired by scale()
:
- start
- Fired upon starting a (forward) rotation, as long as not already on the target angle. Event params: none
- half
- Fired upon reaching the middle of the current (forward) rotation. Event params: none
- end
- Fired upon reaching the end of the current (forward) rotation. Event params: none
- cycle
-
When performing a rotation of an
angle
greater in absolute value than 360 degrees, this event is fired upon passing every 360 degrees (full turn) counting from the starting angle of the rotation. Event params: none - mark
-
If parameter
marked_angle
is supplied (i.e. is different than-1
), then this event is fired upon every passing of this marked angle. The value of the angle is absolute, and not relative to the starting angle for the rotation. Event params: none - start_back
- Fired upon start of 'backwards' rotation. Event params: none
- half_back
- Fired upon reaching the middle of the current 'backwards' rotation. Event params: none
- end_back
- Fired upon reaching the end of the current 'backwards' rotation. Event params: none
- cycle_back
-
Same as the
cycle
event, but is fired when performing a 'backwards' rotation. Note that the event is fired on every passing of the starting angle of the current 'forward' rotation, not on every passing of 360 degrees counting from the start of the 'backwards' rotation. Event params: none - mark_back
-
Same as the
mark
event, but is fired when performing a 'backwards' rotation. Event params: none - pos0
-
Fired upon reaching the starting angle when rotating 'backwards', i.e. it is fired when
end_back
is fired. Event params: none - pos1
-
Fired upon reaching the target angle when rotating forward, i.e. it is fired when
end
is fired. Event params: none
Interaction with DOM
- Transforms: Applies one
rotate
transform. - CSS: Works with any styling. Does not set any style properties.
- Events: Does not set event listeners.
Changes Log
- Controller introduced in v.0.80