模拟时钟
模拟时钟是一个控件，能够显示一个传统的模拟时钟，而不是通过文本显示时间的数字时钟。 该时钟使用背景图像作为钟面。 时针、分针和秒针都使用一幅图像，并围绕一个可配置的中心旋转。
模拟器中运行的模拟时钟（加速镜头）
控件组
模拟时钟位于TouchGFX Designer中的Miscellaneous控件组中。
TouchGFX Designer中的模拟时钟
属性
TouchGFX Designer中模拟时钟的属性。
| 属性组 | 属性说明 |
|---|---|
| 名称 | 控件的名称。 名称是TouchGFX Designer和代码中使用的唯一标识符。 |
| 位置 | X 和Y 指定控件左上角相对于其父的位置。 W 和 H 指定控件的宽度和高度。 模拟时钟的大小是从关联图像的大小获取的，其大小无法更改（除非更改图像）。 锁定指定控件是否应锁定为其当前的X、Y、W和H。 如果锁定控件，还会禁止通过屏幕与控件进行交互。 可见 指定控件的可见性。 如果将控件标记为不可见，还会禁止通过屏幕与控件进行交互。 |
| 样式 | 样式 指定控件的预定义设置，用于将所选属性设为预定义的值。 这些样式包含可免费使用的图像。 |
| 外观 | 图像 指定用作背景的图像。 X轴旋转中心 和 Y轴旋转中心 指定时钟指针应该绕着旋转的点 |
| 时间 | 使用Am/Pm指定时间格式是12小时制还是24小时制。 初始时间指定时钟显示的初始时间。 |
| 时钟指针 | 时钟指针 指定模拟时钟应该显示哪个时钟指针（秒针、分针和时针）、 以及指针的顺序。 每根时钟指针都可以通过设置旋转位置X和旋转位置Y来设置一个指针图像和各自的旋转点。 分针和时针都可选择使用扫描式指针动作，方法是设置扫描式动作 |
| 动画 | 动画式时钟指针动作指定是否启用时钟指针的动画效果。 持续时间指定动画效果的持续时间。 缓动 和 缓动选项 指定使用的缓动方程。 |
| Mixin | 可拖动 指定在运行时控件是否可拖动。 ClickListener 指定控件被点击时是否会调用回调函数。 MoveAnimator 指定控件是否可绘制 X 和 Y 值变化的动画。 |
时间
“时间”属性组允许用户设置时钟控件的初始时间，以及是否使用Am/Pm标准。
选择Am/Pm还会导致代码生成的细微变化。 而不是在模拟时钟中使用下面的函数初始化时间：
initializeTime24Hour(uint8_t hour, uint8_t minute, uint8_t second)
如果采用12小时表示法，将使用以下函数：
initializeTime12Hour(uint8_t hour, uint8_t minute, uint8_t second, bool am)
如要更新时钟显示的时间，可以使用以下函数之一。
setTime24Hour(uint8_t hour, uint8_t minute, uint8_t second)
setTime12Hour(uint8_t hour, uint8_t minute, uint8_t second, bool am)
时钟指针
在“时钟指针”属性组中，用户可以定义要使用的指针及各自的Z轴顺序。 首先定义的指针将呈现在其他指针之上。
时针、分针和秒针
每个指针都需要一幅图像和一个旋转位置。 旋转位置决定已定义的指针图像应该围绕着进行自身旋转的点。
时钟指针属性
时针和分针具有使用“扫动”能力。 启用此选项后，指针将不再从一个位置瞬间跳到另一个位置。
扫动已禁用
扫动已启用
动画
动画部分允许用户定义更高级的指针运动。 然而，如果时针和分针已经启用了“扫动”，它们将没有动画效果。
在下面的例子中，动画持续时间设置为“30”，缓动设置为“Bounce”，并将“Out”作为其缓动选项：
时钟动画示例
交互
下面的部分介绍了模拟时钟支持的操作和触发条件。
操作
| 标准控件动作 | 说明 |
|---|---|
| 移动控件 | 随时间的推移将控件移动到新位置。 |
| 隐藏控件 | 隐藏控件（将可见性设置为false）。 |
| 显示控件 | 使隐藏的控件可见（将可见性设置为true）。 |
触发
模拟时钟不会产生任何触发条件。
性能
模拟时钟包括一幅图像和三个纹理映射器，都是MCU资源密集型组件。 因此，在大部分平台上，会将模拟时钟视为要求高的控件。
关于绘图性能的更多信息，请阅读通用UI组件性能部分。
示例
生成代码
在生成的视图基类的代码中，可以查看TouchGFX Designer是如何创建模拟时钟的。
mainViewBase.cpp
#include <gui_generated/main_screen/mainViewBase.hpp>
#include "BitmapDatabase.hpp"
mainViewBase::mainViewBase()
{
analogClock.setXY(124, 15);
analogClock.setBackground(BITMAP_BLUE_CLOCKS_BACKGROUNDS_CLOCK_STANDARD_BACKGROUND_ID, 116, 116);
analogClock.setupMinuteHand(BITMAP_BLUE_CLOCKS_HANDS_CLOCK_STANDARD_MINUTE_HAND_ID, 7, 67);
analogClock.setMinuteHandSecondCorrection(false);
analogClock.setupHourHand(BITMAP_BLUE_CLOCKS_HANDS_CLOCK_STANDARD_HOUR_HAND_ID, 7, 52);
analogClock.setHourHandMinuteCorrection(false);
analogClock.setupSecondHand(BITMAP_BLUE_CLOCKS_HANDS_CLOCK_STANDARD_SECOND_HAND_ID, 3, 66);
analogClock.initializeTime24Hour(10, 10, 0);
add(analogClock);
}
void mainViewBase::setupScreen()
{
}
Tip
analogClock.invalidate() 强制进行重新绘制。用户代码
下面的例子展示了如何设置时钟动作：
mainView.hpp
#ifndef MAINVIEW_HPP
#define MAINVIEW_HPP
#include <gui_generated/main_screen/mainViewBase.hpp>
#include <gui/main_screen/mainPresenter.hpp>
class mainView : public mainViewBase
{
public:
mainView();
virtual ~mainView() {}
virtual void setupScreen();
virtual void tearDownScreen();
virtual void handleTickEvent();
protected:
int tickCounter;
int analogHours;
int analogMinutes;
int analogSeconds;
};
#endif // MAINVIEW_HPP
mainView.cpp
#include <gui/main_screen/mainView.hpp>
mainView::mainView()
{
}
void mainView::setupScreen()
{
mainViewBase::setupScreen();
analogHours = analogClock.getCurrentHour();
analogMinutes = analogClock.getCurrentMinute();
analogSeconds = analogClock.getCurrentSecond();
}
void mainView::tearDownScreen()
{
mainViewBase::tearDownScreen();
}
void mainView::handleTickEvent()
{
tickCounter++;
if (tickCounter % 60 == 0)
{
if (++analogSeconds >= 60)
{
analogSeconds = 0;
if (++analogMinutes >= 60)
{
analogMinutes = 0;
if (++analogHours >= 24)
{
analogHours = 0;
}
}
}
// Update the clocks
analogClock.setTime24Hour(analogHours, analogMinutes, analogSeconds);
}
}
TouchGFX Designer示例
如需进一步了解模拟时钟，请尝试在TouchGFX Designer中使用以下示例创建新应用：
TouchGFX Designer中的时钟示例