Details
-
Technical task
-
Resolution: Unresolved
-
P2: Important
-
None
-
None
-
None
Description
The motion path module defines how a transform can be applied to an object so that it follows a path. This gives an opportunity to create complex animations that can not be done using the "transform" property.
Unlike the other supported properties in Qt SVG, the properties that allow such animations are purely CSS and are not part of the SVG standard. However, they are used by SVG files found online to achieve beautiful animations.
Such animations can be achieved by styling an SVG element using CSS by doing the following :
- Use "offset-path" to define a path an SVG element will follow.
- Use "offset-rotate" to define the SVG element's angle along the path. By default the angle will be calculated from the path itself. However, setting a value to this property will make the element's angle fixed to a certain value. Moreover, both options can be used which will make the element rotate along the path + assigning an offset angle.
- Use "offset-distance" for animations. Animating this property from 0% to 100% will make the element move along the path.