一、GUI设计
1、界面布局
按照下图添加三个控件，分别是1、Button，2、Image，3、Animated Image。
其中Button添加不同相应状态的图片，Image 添加背景图片作为整个屏幕的背景，添加方法在上一节有介绍，在这就不做赘述。

三个控件的属性：
1、 Name：btn_start_stop
       Location X:175 Y200

2、 Name：background
       Location X:0 Y 0

3、 Name：animation
       Location X:160 Y 20



2、添加Animated Image 图片
第一步：导入图片资源。按照下图所示添加。



第二步：给Animated控件指定动态图片的起始图片、以及下一张图片显示时间。
这里设置没一帧间隔30ms。不同间隔显示速度不同，有兴趣可以自己尝试下。



3、添加按钮文本资源
按照下图步骤依次更改，其中第5步 GB目录下面显示的是当选择ResourceID是分别对应的显示在Button上的字符。



4、添加交互
1、给Button添加Interactions
其中Actions选择Execute C++ Code,，表示单机这个Button执行下面的C++代码



C++代码如下

1. if (animation.isAnimatedImageRunning())
   
2. {
   
3.     animation.pauseAnimation();//暂停动画
   
4.     btn_start_stop.setLabelText(TypedText(T_START));//设置butto
   
5.                                                                                                     //的文本为start
   
6. }
   
7. else
   
8. {
   
9.         //开始动画
   
10.     animation.startAnimation(animation.isReverse(), false, true);
    
11.    //设置button文本为stop
    
12.     btn_start_stop.setLabelText(TypedText(T_STOP));
    
13. }
    
14. 
    

复制代码

为animated image 添加interactions



同样也要执行C++代码

1. //animation.isReverse() 判断是否是暂停状态
   
2. animation.startAnimation(!animation.isReverse(), false, true);
   

复制代码

二、仿真运行
MainViewBase.hpp 文件会生成两个回调函数：
1、void buttonCallbackHandler(const touchgfx::AbstractButton& src);
2、void animationEndedCallbackHandler(const touchgfx::AnimatedImage& src);
其具体实现方法在MainViewBase.cpp。可以看到我们在touchGFX添加的C++代码自动生成到这两个回调函数中。

1. /*********************************************************************************/
   
2. /********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
   
3. /*********************************************************************************/
   
4. #ifndef MAINVIEWBASE_HPP
   
5. #define MAINVIEWBASE_HPP
   
6. 
   
7. #include <gui/common/FrontendApplication.hpp>
   
8. #include <mvp/View.hpp>
   
9. #include <gui/main_screen/MainPresenter.hpp>
   
10. #include <touchgfx/widgets/Box.hpp>
    
11. #include <touchgfx/widgets/Image.hpp>
    
12. #include <touchgfx/widgets/AnimatedImage.hpp>
    
13. #include <touchgfx/widgets/ButtonWithLabel.hpp>
    
14. 
    
15. class MainViewBase : public touchgfx::View<MainPresenter>
    
16. {
    
17. public:
    
18.     MainViewBase();
    
19.     virtual ~MainViewBase() {}
    
20.     virtual void setupScreen();
    
21. 
    
22. protected:
    
23.     FrontendApplication& application() {
    
24.         return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
    
25.     }
    
26. 
    
27.     /*
    
28.      * Member Declarations
    
29.      */
    
30.     touchgfx::Box __background;
    
31.     touchgfx::Image background;
    
32.     touchgfx::AnimatedImage animation;
    
33.     touchgfx::ButtonWithLabel btn_start_stop;
    
34. 
    
35. private:
    
36. 
    
37.     /*
    
38.      * Callback Declarations
    
39.      */
    
40.     touchgfx::Callback<MainViewBase, const touchgfx::AbstractButton&> buttonCallback;
    
41.     touchgfx::Callback<MainViewBase, const touchgfx::AnimatedImage&> animationEndedCallback;
    
42. 
    
43.     /*
    
44.      * Callback Handler Declarations
    
45.      */
    
46.      //TouchGFX自动生成
    
47.     void buttonCallbackHandler(const touchgfx::AbstractButton& src);
    
48.     void animationEndedCallbackHandler(const touchgfx::AnimatedImage& src);
    
49. 
    
50. };
    
51. 
    
52. #endif // MAINVIEWBASE_HPP
    
53. 
    

复制代码

如果不知道Animated Image有哪些方法和属性，可以在MainviewBase.hpp包含的头文件里找到引用的对应的头文件，右键打开即可找到Animated image的类文件，其中包含了Animated Image所有的方法和属性。