Import QtQuick 1.0
Rectangle {
width: animation.width; height: animation.height + 8
AnimatedImage { id: animation; source: "animation.gif" }
Rectangle {
property int frames: animation.frameCount
width: 4; height: 8
x: (animation.width - width) * animation.currentFrame / frames
y: animation.height
color: "red"
}
}
See also BorderImage and Image.
Property Documentation
|
cache : bool |
Specifies whether the image should be cached. The default value is true. Setting cache to false is useful when dealing with large images, to make sure that they aren't cached at the expense of small 'ui element' images.
This property group was introduced in QtQuick 1.1.
|
currentFrame : int |
|
frameCount : int |
currentFrame is the frame that is currently visible. By monitoring this property for changes, you can animate other items at the same time as the image.
frameCount is the number of frames in the animation. For some animation formats, frameCount is unknown and has a value of zero.
|
mirror : bool |
This property holds whether the image should be horizontally inverted (effectively displaying a mirrored image).
The default value is false.
This property group was introduced in QtQuick 1.1.
|
paused : bool |
This property holds whether the animated image is paused.
By default, this property is false. Set it to true when you want to pause the animation.
|
playing : bool |
This property holds whether the animated image is playing.
By default, this property qml Gradient Element
The Gradient item defines a gradient fill. More...
This element was introduced in Qt 4.7.
-
List of all members, including inherited members
Properties
-
stops : list<GradientStop>
Detailed Description
A gradient is defined by two or more colors, which will be blended seamlessly.
The colors are specified as a set of GradientStop child items, each of which defines a position on the gradient from 0.0 to 1.0 and a color. The position of each GradientStop is defined by setting its position property; its color is defined using its color property.
A gradient without any gradient stops is rendered as a solid white fill.
Note that this item is not a visual representation of a gradient. To display a gradient, use a visual element (like Rectangle) which supports the use of gradients.
Example Usage
The following example declares a Rectangle item with a gradient starting with red, blending to yellow at one third of the height of the rectangle, and ending with green:
Rectangle {
width: 100; height: 100
gradient: Gradient {
GradientStop { position: 0.0; color: "red" }
GradientStop { position: 0.33; color: "yellow" }
GradientStop { position: 1.0; color: "green" }
}
}
Performance and Limitations
Calculating gradients can be computationally expensive compared to the use of solid color fills or images. Consider using gradients for static items in a user interface.
In Qt 4.7, only vertical, linear gradients can be applied to items. If you need to apply different orientations of gradients, a combination of rotation and clipping will need to be applied to the relevant items. This can introduce additional performance requirements for your application.
The use of animations involving gradient stops may not give the desired result. An alternative way to animate gradients is to use pre-generated images or SVG drawings containing gradients.
See also GradientStop.
Property Documentation
|
read-onlystops : list<GradientStop> |
This property holds the gradient stops describing the gradient.
By default, this property contains an empty list.
To set the gradient stops, define them as children of the Gradient element.
is true, meaning that the animation will start playing immediately.
QML GradientStop Element
The GradientStop item defines the color at a position in a Gradient. More...
This element was introduced in Qt 4.7.
-
List of all members, including inherited members
Properties
-
color : color
-
position : real
Detailed Description
See also Gradient.
Property Documentation
|
position : real |
|
color : color |
The position and color properties describe the color used at a given position in a gradient, as represented by a gradient stop.
The default position is 0.0; the default color is black.
See also Gradient.
QML SystemPalette Element
The SystemPalette element provides access to the Qt palettes. More...
This element was introduced in Qt 4.7.
-
List of all members, including inherited members
Properties
-
alternateBase : color
-
base : color
-
button : color
-
buttonText : color
-
colorGroup : enumeration
-
dark : color
-
highlight : color
-
highlightedText : color
-
light : color
-
mid : color
-
midlight : color
-
shadow : color
-
text : color
-
window : color
-
windowText : color
Detailed Description
The SystemPalette element provides access to the Qt application palettes. This provides information about the standard colors used for application windows, buttons and other features. These colors are grouped into three color groups: Active, Inactive, and Disabled. See the QPalette documentation for details about color groups and the properties provided by SystemPalette.
This can be used to color items in a way that provides a more native look and feel.
The following example creates a palette from the Active color group and uses this to color the window and text items appropriately: