Difference between revisions of "Development/Tutorials/Plasma/JavaScript/API-Animations"

Jump to: navigation, search
(Created page with '== Animations == = Creating Animation Objects = An Animation object can be retrieved by calling the ''Animation'' '''animation(string type)''' function. The ''string'' correspon...')
 

Latest revision as of 12:58, 24 June 2011

Contents

[edit] Animations

[edit] 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) .

[edit] Enumerations

All Animation objects have the following enumerations:

[edit] MovementDirection

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

[edit] Reference

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

  • Center
  • Up
  • Down
  • Left
  • Right

[edit] State

  • Paused
  • Running
  • Stopped

[edit] 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

[edit] 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.

[edit] 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.

[edit] Standard Animation Types

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

[edit] 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

[edit] 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

[edit] Grow

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

[edit] Pause

  • number duration: the number of milliseconds to pause for

[edit] 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

[edit] Pulser

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

[edit] 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

[edit] 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

[edit] Slide

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

[edit] Zoom

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

[edit] 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

This page was last modified on 24 June 2011, at 12:58. This page has been accessed 1,313 times. Content is available under Creative Commons License SA 3.0 as well as the GNU Free Documentation License 1.2.
KDE® and the K Desktop Environment® logo are registered trademarks of KDE e.V.Legal