SVG path drawing and animation support in kivy application
Project description
Kivg
SVG path drawing and animation support in kivy application
Features
Path Drawing & filling | Shape Animation |
---|---|
Now you can take some of the advantages svg offers, in your kivy apps. Those are:
- Compact file size compare to other formats - reduced asset size
- Scalability - Draw them big or small
- Interactivity - Animations
Install
pip install kivg
How to use?
-
Path drawing and filling
s = Kivg(my_widget) # call draw method with a `svg_file` name s.draw("github.svg", fill=False, animate=True, anim_type="seq")
Info:
-
fill : Whether to fill the shape after drawing. Defaults to
True
-
animate : Whether to animate drawing. Defaults to
False
-
anim_type : Whether to draw in sequence or parallel. Available
"seq"
and"par"
. Defaults to"seq"
Important:
-
Fill color would only work if it's in hex and inside
<path>
tag. You must modify svg if it's not this way already. -
Gradient is not yet supported - default to
#ffffff
if can't parse color
-
-
Shape Animation
s = Kivg(my_widget) anim_config = [ { "id_":"k", "from_":"center_x", "t":"out_back", "d":.4 }, { "id_":"i", "from_":"center_y", "t":"out_bounce", "d":.4 }, { "id_":"v", "from_":"top", "t":"out_quint", "d":.4 }, { "id_":"y", "from_":"bottom", "t":"out_back", "d":.4 } ] # call shape_animate method with `svg_file` and an animation config list and optional callback s.shape_animate("text.svg", anim_config_list=anim_config, on_complete=lambda *args: print("Completed!"))
Info:
-
anim_config_list : A list of dicts where each dict contain config for an
id
. Description of each key:-
"id_"
:id
of svg<path>
tag. It's required so each dict must contain"id_"
key -
"from_"
: Direction from which a path should grow. Accepted values"left"
,"right"
,"top"
,"bottom"
,"center_x"
(grow from center along horizontal axis),"center_y"
, andNone
(Draw without animation). Defaults toNone
. -
"t"
: Animation transition. Defaults to"out_sine"
. -
"d"
: Duration of animation. It'll still in-effect if"from_"
is set toNone
. Defaults to .3
-
-
on_complete(optional) : Function to call after entire animation is finished. It can be used to create looping animation
Important:
-
You must add a unique
id
to each path element you want to animate -
Dict order in the list is important
-
- See Demo code
Useful Links:
Few links that I found useful for modifying few svg files in order to work with this library are:
-
https://itchylabs.com/tools/path-to-bezier/ - Convert SVG Path to Cubic Curves
Use it to convert SVG Arcs to Cubic Bezier. Make sure you paste the entire
path
in the textfield rather than only the arc section. Also you should provide path dimensions(W
&H
) on the website as your svg width and height(found under<svg>
tag) -
https://codepen.io/thednp/pen/EgVqLw - Convert Relative SVG Path To Absolute Path
Maybe useful when you want to split a single svg path into multiple paths for animation purpose. Paste the entire path. When splitting, make sure you close the previous path by adding a
Z
at the end in the path string.
Changelog
v1.0
- Shape animation feature added
- Added
anim_type
in draw method
Earlier Changes
- Added option to draw image without animation,
animate=False
- Added option to draw empty or filled path,
fill=True
orfill=False
Contribution
Whether you found a bug or have some idea to improve the project, PRs are always more than welcome
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.