Development/Tutorials/Plasma4/JavaScript/API-Animations

    From KDE TechBase
    The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

    Animations

    Creating Animation Objects

    An Animation object can be retrieved by calling the Animation animation(string type) function. The string corresponds to the type of animation, which are listed below.

    New Animation objects are associated with (and therefore will animate) the Plasmoid by default. By setting the widgetToAnimate property, however, it can be assigned to animate any QGraphicsWidget desired (e.g. Plasma widgets such as push buttons, sliders, etc) .

    Enumerations

    All Animation objects have the following enumerations:

    MovementDirection

    • MoveUp
    • MoveUpRight
    • MoveRight
    • MoveDownRight
    • MoveDown
    • MoveDownLeft
    • MoveLeft
    • MoveUpLeft

    Reference

    The reference point, relative to the target widget, for the animation.

    • Center
    • Up
    • Down
    • Left
    • Right

    State

    • Paused
    • Running
    • Stopped

    Common API

    With the exception of Pause and Property animations, all animations support the following read/write properties:

    • AnimationDirection direction: the direction the animation should play: AnimationForward or AnimationBackward
    • int duration: length of the animation in ms.
    • EasingCurveType easingCurveType: The easing curve to use in the animation
    • QGraphicsWidget targetWidget: the QGraphicsWidget (e.g. a Plasma::Widget) that this animation should operate on

    Animation Groups

    Animations may be put into groups for convenient sequential or parallel running. Sequential groups, where the animations run one after the other, are handled by the AnimationGroup class. Parallel aniations, where the animations run simultaneously, are handled the ParallelAnimationGroup class.

    Animations are added to a group by calling add(Animation) on the group object. Groups may also be added to other groups.

    Custom Animations

    Custom animation types can be defined using Javascript files that are included as part of the Plasmoid's package in the contents/animations/ directory. To learn how to create such animations and access them from your Plasmoid, visit the Javascript Animations tutorial.

    Standard Animation Types

    Below is a list of all current standard animation types and their particular read/write properties:

    Fade

    • number startOpacity: the opacity, between 0 and 1, that the target widget starts at when the animation begins
    • number targetOpacity: the opacity, between 0 and 1, that the target widget will be at the end of the animation

    Geometry

    • QRectF startGeometry: the geometry that the target widget should start with
    • QRectF targetGeometry: the geometry the target widget will have at the end of the animation

    Grow

    • number factor: the factor by which the target widget will grow to by the end of the animation

    Pause

    • number duration: the number of milliseconds to pause for

    Property

    Animates an object (must be a QObject internally, which includes all Plasma Widgets) by manipulating one of its properties. Property animations have the following read/write properties:

    • any startValue
    • any endValue
    • ByteArray propertyName
    • QObject targetObject
    • number duration
    • EasingCurve easingCurve

    Pulser

    • number targetScale: the maximum scale of the pulse-shadow item, relative to the target widget

    Rotate

    • QtAxis axis: the axis along which to rotate the item
    • Reference reference: the reference point around which to rotate the target widget
    • number angle: the number of degrees to rotate the item

    RotateStacked

    • MovementDirection movementDirection: the direction to rotate the widgets in the stack around
    • QGraphicsLayoutItem layout
    • Reference reference: the reference point around which to rotate the target widget
    • QGraphicsWidget backingWidget: the widget in the "back" to rotate to the front of the target widget

    Slide

    • MovementDirection movementDirection: the direction to slide the widget
    • number distance: the distance to slide the widget

    Zoom

    • number zoom: the factor by which to zoom the target widget

    QEasingCurve

    Used to set the progress shape of Animation objects, this class has the following read-only properties:

    • string toString
    • number valueForProgress(number progress): returns effective progress for the easing curve at progress. While progress must be between 0 and 1, the returned effective progress can be outside those bounds.

    as well as the following read/write property:

    • EasingCurveType type: the shape of this easing curve

    and the following enumeration:

    • EasingCurveType
      • Linear
      • InQuad
      • OutQuad
      • InOutQuad
      • OutInQuad
      • InCubic
      • OutCubic
      • InOutCubic
      • OutInCubic
      • InQuart
      • OutQuart
      • InOutQuart
      • OutInQuart
      • InQuint
      • OutQuint
      • InOutQuint
      • OutInQuint
      • InSize
      • OutSine
      • InOutSine
      • OutInSine
      • InExpo
      • OutExpo
      • InOutExpo
      • OutInExpo
      • InCirc
      • OutCirc
      • InOutCirc
      • InOutCirc
      • OutInCirc
      • InElastic
      • OutElastic
      • InOutElastic
      • OutInElastic
      • InBack
      • OutBack
      • InOutBack
      • OutInBack
      • InBounc
      • OutBounce
      • InOutBounce
      • OutInBounce
      • InCurve
      • OutCurve
      • SineCurve
      • CosineCurve