history sas gdb 郑州网站开发 mysql在线测试 增删改查sql语句 wordpress本地建站 python数据类型转换 python学习 python解析json数据 python开发教程 python或运算 python的安装 python获取时间戳 java开发环境搭建 java表达式 java中数据类型 java的集合框架 javalist java查看数据类型 java数组输出 java怎么编程 php案例 xp系统修复 java电子书下载 0x0000004e 战地2单机地图 魔之符咒 小米5c拆机 网络是怎样连接的 kmservice vbs编程教学 自动喊话器 无法打开搜索页 地下城怎么双开 安卓刷机精灵 js刷新页面 手机电脑模拟器 视频字幕制作软件 android开发案例
当前位置: 首页 > 学习教程  > 编程语言

stm32基于TouchGFX的GUI开发(二):简单动画实现(Animated Image)

2020/11/24 9:42:33 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

TouchGFX之GUI开发(二):简单动画实现(Animated Image)前言实现原理一、GUI设计1、界面布局2、添加Animated Image 图片3、添加按钮文本资源4、添加交互二、仿真运行总结前言 本章将介绍TouchGFX的Animated Image 控件…

TouchGFX之GUI开发(二):简单动画实现(Animated Image)

  • 前言
  • 实现原理
  • 一、GUI设计
    • 1、界面布局
    • 2、添加Animated Image 图片
    • 3、添加按钮文本资源
    • 4、添加交互
  • 二、仿真运行
  • 总结


前言

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

实现原理

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


效果图:以下是本篇文章最终Simulation的效果图,通过单击button即可开始和停止图片动画效果。
在这里插入图片描述

一、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

本文链接: http://www.dtmao.cc/news_show_400101.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?