Allow to animate the style of a HTML element on a certain action (hover, click etc).
You can use pre-built animation or craft your own.
Note:
Colors related animatable styles are only available if jQuery-ui is used.
Built-in animations
* fade_out
* fade_in
* size_on_hover
Animate the size of the element when hovering it to a specified width / height target value,
the element return to its initial size (if there is any) when the mouse is not hovering it anymore.
Example:
jquery_animate
(
element(htmlId("my_element")),
size_on_hover(32, 32, 1000, 1000)
)
* custom
Can be used to craft your own animation.
- You can make simple animation like this (transition the background color to green on a click):
jquery_animate
(
element(htmlId("my_element")),
custom(onclick, background_color(rgb(0, 255, 0)), linear, 1000)
)
- Or you can make something more complex which use all capabilities, like this custom made "size_on_hover" animation
jquery_animate
(
element(htmlId("my_element")),
[
custom(id("_over"), onmouseover, [ id("_out") ], [width(64), height(64)], easeOutBack, 1000),
custom(
id("_out"), // id used to identify this animation
onmouseout, // animation triggering html event
[ id("_hover")], // a list of ids, used to stop others animations to play when this one is triggered
[], // empty list of styles mean it will animate back to the initial state of the element
easeOutElastic, // easing equation
1000 // duration
)
]
)
Which is similar to:
size_on_hover(64, 64, 1000, 1000)
TODO:
Choice of an animation target using a selector
Chained animation
Author: Julien Verneuil (25/04/2015)
read tools/basis.anubis
read tools/printable_tree.anubis
read xlib/web/making_a_web_site.anubis
read xlib/web/json.anubis
read xlib/web/jquery.anubis
read xlib/web/jQuery/jq_easing.anubis
read xlib/web/style_tools.anubis
read xlib/web/js_tools.anubis
public type AnimatableCSSStyle:
width(Int value),
height(Int value),
max_width(Int value),
max_height(Int value),
min_width(Int value),
min_height(Int value),
outline_width(Int value),
border_width(Int value),
border_top_width(Int value),
border_right_width(Int value),
border_bottom_width(Int value),
border_left_width(Int value),
top(Int value),
right(Int value),
left(Int value),
bottom(Int value),
margin_top(Int value),
margin_right(Int value),
margin_left(Int value),
margin_bottom(Int value),
padding_top(Int value),
padding_right(Int value),
padding_left(Int value),
padding_bottom(Int value),
font_size(Int value),
line_height(Int value),
letter_spacing(Int value),
border_spacing(Int value),
text_indent(Int value),
word_spacing(Int value),
z_index(Int value),
outline_color(RGBA color),
border_color(RGBA color),
border_top_color(RGBA color),
border_right_color(RGBA color),
border_bottom_color(RGBA color),
border_left_color(RGBA color),
background_color(RGBA color),
color(RGBA color),
opacity(Float value).
public type JQueryAnimationId:
id(String id).
public type JQueryAnimation:
fade_out(HtmlEvents trigger, JQueryEasing type, Int duration),
fade_in(HtmlEvents trigger, JQueryEasing type, Int duration),
size_on_hover(Int width, Int height, Int duration_ms_on, Int duration_ms_out),
custom(HtmlEvents trigger, List(AnimatableCSSStyle) styles, JQueryEasing easing_type, Int duration_ms),
custom(HtmlEvents trigger, List(JQueryAnimationId) stop_anims_id, List(AnimatableCSSStyle) styles, JQueryEasing easing_type, Int duration_ms),
custom(JQueryAnimationId id, HtmlEvents trigger, List(JQueryAnimationId) stop_anims_id, List(AnimatableCSSStyle) styles, JQueryEasing easing_type, Int duration_ms),
custom(JQueryAnimationId id, HtmlEvents trigger, List(AnimatableCSSStyle) styles, JQueryEasing easing_type, Int duration_ms).
type JQueryFormattedAnimation:
formatted_animation(String id, String trigger_name, JsonValue stop_anim_id, JsonValue css_props, JsonValue options).
define HTML_Head_Tag required_js = js(js_file("xlib/js/jquery_animate.js")).
define String js_anim_function_name = "Xlib.CXM_Animate.animate".
define List(JsonMember)
animatables_to_json_members
(
List(AnimatableCSSStyle) styles,
List(JsonMember) json_members
) =
if styles is
{
[ ] then
json_members,
[ animatable_style . t ] then
with json_member =
if animatable_style is
{
width(value) then json_member("width", json_int(value)),
height(value) then json_member("height", json_int(value)),
max_width(value) then json_member("max-width", json_int(value)),
max_height(value) then json_member("max-height", json_int(value)),
min_width(value) then json_member("min-width", json_int(value)),
min_height(value) then json_member("min-height", json_int(value)),
outline_width(value) then json_member("outline-width", json_int(value)),
border_width(value) then json_member("border-width", json_int(value)),
border_top_width(value) then json_member("border-top-width", json_int(value)),
border_right_width(value) then json_member("border-right-width", json_int(value)),
border_bottom_width(value) then json_member("border-bottom-width", json_int(value)),
border_left_width(value) then json_member("border-left-width", json_int(value)),
top(value) then json_member("top", json_int(value)),
right(value) then json_member("right", json_int(value)),
left(value) then json_member("left", json_int(value)),
bottom(value) then json_member("bottom", json_int(value)),
margin_top(value) then json_member("margin-top", json_int(value)),
margin_right(value) then json_member("margin-right", json_int(value)),
margin_left(value) then json_member("margin-left", json_int(value)),
margin_bottom(value) then json_member("margin-bottom", json_int(value)),
padding_top(value) then json_member("padding-top", json_int(value)),
padding_right(value) then json_member("padding-right", json_int(value)),
padding_left(value) then json_member("padding-left", json_int(value)),
padding_bottom(value) then json_member("padding-bottom", json_int(value)),
font_size(value) then json_member("font-size", json_int(value)),
line_height(value) then json_member("line-height", json_int(value)),
letter_spacing(value) then json_member("letter-spacing", json_int(value)),
border_spacing(value) then json_member("border-spacing", json_int(value)),
text_indent(value) then json_member("text-indent", json_int(value)),
word_spacing(value) then json_member("word-spacing", json_int(value)),
z_index(value) then json_member("z-index", json_int(value)),
outline_color(color) then json_member("outline-color", json_string(format_rgba_to_style_color(color))),
border_color(color) then json_member("border-color", json_string(format_rgba_to_style_color(color))),
border_top_color(color) then json_member("border-top-color", json_string(format_rgba_to_style_color(color))),
border_right_color(color) then json_member("border-right-color", json_string(format_rgba_to_style_color(color))),
border_bottom_color(color) then json_member("border-bottom-color", json_string(format_rgba_to_style_color(color))),
border_left_color(color) then json_member("border-left-color", json_string(format_rgba_to_style_color(color))),
background_color(color) then json_member("background-color", json_string(format_rgba_to_style_color(color))),
color(color) then json_member("color", json_string(format_rgba_to_style_color(color))),
opacity(value) then json_member("opacity", json_float(value, 8))
},
animatables_to_json_members(t, [ json_member . json_members])
}.
define List(JsonMember)
animatables_to_json_members
(
List(AnimatableCSSStyle) styles
) =
animatables_to_json_members(styles, [ ]).
define JQueryFormattedAnimation
format_animation
(
JQueryAnimationId id,
HtmlEvents trigger,
List(JQueryAnimationId) stop_anims_id,
List(AnimatableCSSStyle) styles,
JQueryEasing type,
Int duration_ms
) =
with css_props_as_json_members = animatables_to_json_members(styles),
easing_str = format_easing(type),
trigger_str = event_name(trigger),
id_str = if id is id(id_str) then id_str,
formatted_animation(
id_str,
trigger_str,
json_array(
map((JQueryAnimationId e) |-> if e is { id(id_str) then json_string(id_str) }, stop_anims_id)
),
json_object(css_props_as_json_members),
json_object(
[
json_member("duration", json_int(duration_ms)),
json_member("easing", json_string(easing_str))
]
)
).
define JQueryFormattedAnimation
format_animation
(
HtmlEvents trigger,
List(JQueryAnimationId) stop_anims_id,
List(AnimatableCSSStyle) styles,
JQueryEasing type,
Int duration_ms
) =
format_animation(id(""), trigger, stop_anims_id, styles, type, duration_ms).
define JQueryFormattedAnimation
format_animation
(
JQueryAnimationId id,
HtmlEvents trigger,
List(AnimatableCSSStyle) styles,
JQueryEasing type,
Int duration_ms
) =
format_animation(id, trigger, [ ], styles, type, duration_ms).
define JQueryFormattedAnimation
format_animation
(
HtmlEvents trigger,
List(AnimatableCSSStyle) styles,
JQueryEasing type,
Int duration_ms
) =
format_animation(id(""), trigger, [ ], styles, type, duration_ms).
define List(JQueryFormattedAnimation)
format_animation
(
JQueryAnimation anim_type
) =
if anim_type is
{
fade_out(trigger, easing, duration) then
[ format_animation(trigger, [opacity(0)], easing, duration) ],
fade_in(trigger, easing, duration) then
[ format_animation(trigger, [opacity(1)], easing, duration) ],
size_on_hover(w, h, d_in, d_out) then
[
format_animation(id("_over"), onmouseover, [ id("_out") ], [width(w), height(h)], easeOutBack, d_in),
format_animation(id("_out"), onmouseout , [ id("_over") ], [] , easeOutElastic, d_out)
],
custom(trigger, styles, easing_type, duration_ms) then
[ format_animation(trigger, styles, easing_type, duration_ms) ]
custom(trigger, stop_anims_id, styles, easing_type, duration_ms) then
[ format_animation(trigger, stop_anims_id, styles, easing_type, duration_ms) ]
custom(id,trigger,stop_anims_id,styles,easing_type,duration_ms) then
[ format_animation(id, trigger, stop_anims_id, styles, easing_type, duration_ms) ]
custom(id,trigger,styles,easing_type,duration_ms) then
[ format_animation(id, trigger, styles, easing_type, duration_ms) ]
}.
define List(JQueryFormattedAnimation)
format_animations
(
List(JQueryFormattedAnimation) formatted_anims,
List(JQueryAnimation) anims
) =
if anims is
{
[ ] then formatted_anims,
[ anim . t ] then
format_animations(formatted_anims + format_animation(anim), t)
}.
define List(JsonValue)
generate_js
(
List(JQueryFormattedAnimation) formatted_anims,
List(JsonValue) anim_objects
) =
if formatted_anims is
{
[ ] then anim_objects,
[ formatted_anim . t ] then
if formatted_anim is
{
formatted_animation(id_str, trigger_str, stop_anims_id_as_json_array, css_props, options) then
generate_js(
t,
[
json_object(
[
json_member("id", id_str),
json_member("event", trigger_str),
json_member("stop_anims_id", stop_anims_id_as_json_array),
json_member("props", css_props),
json_member("options", options)
]
)
. anim_objects
]
)
}
}.
public define List(HTML_Head_Tag)
generate_head_tags
(
JQuerySelector jq_selector,
List(JQueryAnimation) anims
) =
[
required_js,
js_inline(
jquery_ready(
format_js_function_call(
js_anim_function_name,
[
format_jquery_selector(jq_selector),
format_json(
json_array(
generate_js(
format_animations([ ], anims),
[ ]
)
)
)
]
)
)
)
].
public define List(HTML_Head_Tag)
jquery_animate
(
JQuerySelector jq_selector,
List(JQueryAnimation) anims
) =
generate_head_tags(jq_selector, anims).
public define HTML_Partial_Content
jquery_animate
(
JQuerySelector jq_selector,
List(JQueryAnimation) anims
) =
partial_content(generate_head_tags(jq_selector, anims), literal("")).
public define List(HTML_Head_Tag)
jquery_animate
(
JQuerySelector jq_selector,
JQueryAnimation anim_type
) =
generate_head_tags(jq_selector, [ anim_type ]).
public define HTML_Partial_Content
jquery_animate
(
JQuerySelector jq_selector,
JQueryAnimation anim_type
) =
partial_content(generate_head_tags(jq_selector, [ anim_type ]), literal("")).