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 :

      1. Use "offset-path" to define a path an SVG element will follow.
      2. 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.
      3. Use "offset-distance" for animations. Animating this property from 0% to 100% will make the element move along the path.

       

      Attachments

        1. cssMotionPath.svg
          0.5 kB
          Hatem ElKharashy
        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

        Activity

          People

            hatemelkharashy Hatem ElKharashy
            hatemelkharashy Hatem ElKharashy
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

              Created:
              Updated:

              Gerrit Reviews

                There are no open Gerrit changes