This component is used to combine 10 digit images and a separator image to form a time in HH:mm format. To use this component, you need to prepare 10 digit images numbered from 0 to 9 and a colon (:) separator image. You can set common attributes and the transparency, scaling, and rotation animations for the combined image.
Parameter | Type | Mandatory | Description |
|---|---|---|---|
src | String | Yes | String specifying the file name prefix and extension of a time image. For example, if src is set to time.png, digit images are named time_0.png to time_9.png, and the separator image is named time_dot.png. |
space | Number | No | Space between time images, in pixels. A larger value indicates a greater space. If the value is less than 0, images will overlap. The default value is 0. |
Example 1: Display a time using digit and separator images with a space of 10 pixels between each other.
<Time x="#screen_width/2" align="center" y="220" src="time.png" space="10"/>
Alternative specification: Calculate srcid of images based on the time variable, and combine the found images to display a time.
<Group x="350" y="60">
<Image x="50" y="100" src="time.png" srcid="int((#hour24)/10)"/>
<Image x="190" y="100" src="time.png" srcid="int((#hour24)%10)"/>
<Image x="295" y="100" src="time_dot.png"/>
<Image x="390" y="100" src="time.png" srcid="int((#minute)/10)"/>
<Image x="530" y="100" src="time.png" srcid="int((#minute)%10)"/>
</Group> Example 2: Display a time with the transparent animation effect. In detail, configure time images to transit from transparent to opaque within 1000 milliseconds to make the time blink.
<Time x="#screen_width/2" align="center" y="220" src="time.png">
<AlphaAnimation>
<Alpha a="0" time="0"/>
<Alpha a="255" time="1000"/>
</AlphaAnimation>
</Time>