stm32基于TouchGFX的GUI开发（二）：简单动画实现（Animated Image）

---

前言

源码和素材下载地址 提取码：ibgj

本章将介绍TouchGFX的Animated Image 控件的简单使用。本例程所用的图片资源和源码可以私信我免费获取。这节整体内容还是比较简单。主要是介绍Animated几个方法以及具体在UI界面的实现流程

效果图：以下是本篇文章最终Simulation的效果图，通过单击button即可开始和停止图片动画效果。

实现原理

通过给Animated Image控制指定一组静态图片，让其按照一定间隔显示下一张图片，从视觉上形成动画的效果。

---

一、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++代码如下

if (animation.isAnimatedImageRunning())
{
    animation.pauseAnimation();//暂停动画
    btn_start_stop.setLabelText(TypedText(T_START));//设置butto
    												//的文本为start
}
else
{
	//开始动画
    animation.startAnimation(animation.isReverse(), false, true);
   //设置button文本为stop 
    btn_start_stop.setLabelText(TypedText(T_STOP));
}

为animated image 添加interactions

同样也要执行C++代码

//animation.isReverse() 判断是否是暂停状态
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++代码自动生成到这两个回调函数中。

/*********************************************************************************/
/********** THIS FILE IS GENERATED BY TOUCHGFX DESIGNER, DO NOT MODIFY ***********/
/*********************************************************************************/
#ifndef MAINVIEWBASE_HPP
#define MAINVIEWBASE_HPP

#include <gui/common/FrontendApplication.hpp>
#include <mvp/View.hpp>
#include <gui/main_screen/MainPresenter.hpp>
#include <touchgfx/widgets/Box.hpp>
#include <touchgfx/widgets/Image.hpp>
#include <touchgfx/widgets/AnimatedImage.hpp>
#include <touchgfx/widgets/ButtonWithLabel.hpp>

class MainViewBase : public touchgfx::View<MainPresenter>
{
public:
    MainViewBase();
    virtual ~MainViewBase() {}
    virtual void setupScreen();

protected:
    FrontendApplication& application() {
        return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
    }

    /*
     * Member Declarations
     */
    touchgfx::Box __background;
    touchgfx::Image background;
    touchgfx::AnimatedImage animation;
    touchgfx::ButtonWithLabel btn_start_stop;

private:

    /*
     * Callback Declarations
     */
    touchgfx::Callback<MainViewBase, const touchgfx::AbstractButton&> buttonCallback;
    touchgfx::Callback<MainViewBase, const touchgfx::AnimatedImage&> animationEndedCallback;

    /*
     * Callback Handler Declarations
     */
     //TouchGFX自动生成
    void buttonCallbackHandler(const touchgfx::AbstractButton& src);
    void animationEndedCallbackHandler(const touchgfx::AnimatedImage& src);

};

#endif // MAINVIEWBASE_HPP

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

总结

以上就是今天要讲的内容，本文简单介绍了Animated Image的使用。希望大家多多支持，关注一下！！！你们的支持是我更新的动力。如果有任何问题可以直接私信我哦！！！！！！需要TouchGFX用户手册的也可以私信 ! ! ! 如果私信没回可以加本人QQ：1458356834