Skip to content

Add Time [ TIME ], or, Animation [ ANIM ] axis #152

Open
@ebraminio

Description

Font project(s) using the axis

Short description of what the axis does

Providing animated icons using variable fonts

Image

Screen.Recording.2023-09-18.at.7.47.14.PM.mov

from https://ebraminio.github.io/flutter_variable_font_animation_demo/build-web-html/

Screen.Recording.2023-09-18.at.7.57.05.PM.mov

from https://simoncozens.github.io/colrv1-rocks/

Also have a look at https://ebraminio.github.io/flutter_variable_font_animation_demo/build-web-html/ that has lots of animated icons using fonts.

Why is the axis needed

"Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase." (copied from https://flutter.dev). It offers static icons to developers using font icons. It even while releasing a production app, uses a tree shaking / font subsetting process to turn a general propose font icons into the only used part using harfbuzz-subset. But Flutter only offers static icons via font icons and it's currently AnimatedIcon facility uses raw dart codes, https://github.com/flutter/flutter/tree/master/packages/flutter/lib/src/material/animated_icons/data and even these raw dart codes and the facility that has created them can't be used to create custom animated icons as this line final _AnimatedIconData iconData = icon as _AnimatedIconData; ensures the used _AnimatedIconData is owned by the project itself and blocks any external uses.

So I was thinking what if just like use of font for static icons, we could use variable fonts font animating icons and maybe add a new axis, maybe called TIME, like the naming in https://github.com/Typogram/Anicons but using seconds as the value. The axis max value can be a good indication of how animations on the specific font take long. This proposal assumes all the glyphs in a specific font will have a fixed time length. For example all the stickers in whole Telegram (a messaging app with user provided sticker and emojis) have 3 seconds fixed length https://core.telegram.org/stickers#animation-requirements and in here we just have font wide fixed time length which can be changed from font to font.

Another idea can be considering a global fixed length, say from 0 to 1, for all of the fonts, call the axis ANIM like the font in https://github.com/simoncozens/lottie2vf and then maybe having an opentype table called time that indicates how long every specific animation should take in real world time. That way there won't be font specific time length and every glyph can be configured separately. And then that choosing a specific range for time axis value can be even unnecessary as that time table can specify what is the relation between the variation axis and real world time. And maybe that time table can be done inside GDEF or something.

Or maybe we can have both, having TIME for animation with time limitation and ANIM for kind of UI animation that aren't inherently time constrained like https://developer.android.com/reference/androidx/appcompat/graphics/drawable/DrawerArrowDrawable

Axis metadata fields

#TIME roughly based on https://github.com/Typogram/Anicons
tag: "TIME" 
display_name: "Time"
min_value: 0
default_value: 0
max_value: a fixed time length for a specific font, (e.g. 3 for 3s)
precision: any arbitrary number in the range
fallback {
  name: "Default"
  value: 0.00
}
fallback_only: false
description: ""

Or

#ANIM roughly based on https://github.com/simoncozens/lottie2vf
tag: "ANIM" 
display_name: "Animation"
min_value: 0
default_value: 0
max_value: (not that clear to me what is used there tbh)
precision: any arbitrary number in the range
fallback {
  name: "Default"
  value: 0.00
}
fallback_only: false
description: ""

See also flutter/flutter#134902

Metadata

Assignees

No one assigned

    Labels

    --new-axisNew variable axis definition

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions