Development/Tutorials/Plasma4/JavaScript/API-Animations

From KDE TechBase

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
Retrieved from "https://techbase.kde.org/index.php?title=Development/Tutorials/Plasma4/JavaScript/API-Animations&oldid=83664"