本帖最后由 xtoolbox 于 2019-4-1 10:03 编辑
这里将介绍如何在TouchGFX的设计器中，制作多个蝴蝶跟随鼠标一起飞舞的效果，如上图所示。
视频地址： https://v.youku.com/v_show/id_XNDExMzg5MTM2MA==.html?spm=a2hzp.8244740.0.0
蝴蝶飞舞效果的可执行程序，由TouchGFX自动生成，可以在Windows上运行，
butterfly_exe.zip
(2.55 MB)
蝴蝶飞舞效果的TouchGFX工程文件
butterfly_proj.zip
(2.73 MB)
制作过程说明参照 《快速开发演示视频教程》使用TouchGFX Designer设计出基本的界面
第一屏的设计如下图所示
第一屏有两个按键一个静态图片的TouchGFX **和一个动画的STM32 **，按下【Select Date】键会切换到下一屏幕，按下右下角的图片按键，会弹出一个选择蝴蝶数量的滑动菜单
第二屏的设计所下图所示
第二屏静态部分内容比较简单，只有三个元素，按下【RETURN TO INTRO】键后，回到主屏幕
在这个DEMO中，屏幕上的静态元素设计还是比较简单的，毕竟素材都是现成的，只要放在适合的位置就可以了。
现屏幕上还没有蝴蝶的，那么蝴蝶在哪里呢，见下图
其实每一只蝴蝶是6张图片不停从1播放到6再从6播放到1，一直循环，看起来就像是在飞了。
TouchGFX会为每张图片生成一个ID，这些ID是连续的，并且按照图片的名字排序。
蝴蝶飞舞的效果是通过代码来实现的，这里我没有从零开始做蝴蝶飞舞的效果，而是借用了TouchGFX的Demo3。
这个Demo是在屏幕上生成一些气泡，然后随机浮动消失。这个Demo中用到了两个自定义控件，一个是冒泡的，一个是用来选泡泡数量的滚轮。
介绍中说这两个控件很容易移植到其它项目中，只要把源代码复制过去并添加到屏幕中就行了。
既然官方都说了，那我也就不客气把这两个控件直接复制到了我的DEMO中
TouchGFX提供了很多这样的DEMO，如果你看中了DEMO中的某个控件，都能够很容易的复制到项目中用上。
气泡的显示是由ParticalEffect这个类来实现的，这个类继承自touchgfx::widget。
每一个气泡是由Particle实现的，这个类继承自touchgfx::Image。
ParticalEffect中管理着所有气泡，而每个气泡的移动和消失是通过自己的update函数来实现的，为了实现蝴蝶飞舞的效果，需要修改update函数。
void Particle::update()
{
...
bmp_index = bmp_index + bmp_dir;
if(bmp_index >=5){
bmp_dir = -1;
bmp_index = 5;
}else if(bmp_index<=0){
bmp_index = 0;
bmp_dir = 1;
}
setBitmap(touchgfx::Bitmap(init_bmp+bmp_index));
...
}
TouchGFX拥有强大的Animation动画功能，所有控件都可以做淡入淡出，飞入飞出的动画。
上图中，在选择蝴蝶数量的时候，TouchGFX的**做了向上滑动的效果，中间的"Number of butterflies"文本框做了淡入淡出的效果。
要使用这些效果，需要在控件的mixins属性中，勾选上对应的内容，如下图。
这里我也没有去设计这些动画，直接从Demo中复制的效果。
这些效果是在gotoMenuSelected函数中用代码实现的，代码如下：
void MainView::gotoMenuSelected()
{
if (particlesScrollingWheel.getAlpha() > 0)
{
numberOfParticles = particlesScrollingWheel.getSelectedValue();
particleEffect.setNumberOfParticles(numberOfParticles);
particleEffect.spawnNewParticles(true);
particlesScrollingWheel.startFadeAnimation(0, 20);
particlesScrollingWheel.setTouchable(false);
headline1.startFadeAnimation(0, 20);
touchgfx**.startMoveAnimation(touchgfx**.getX(), (HAL::DISPLAY_HEIGHT - touchgfx**.getHeight()) / 2, 20, EasingEquations::cubicEaseInOut, EasingEquations::cubicEaseInOut);
}
else
{
particleEffect.spawnNewParticles(false);
particlesScrollingWheel.startFadeAnimation(255, 20);
particlesScrollingWheel.setTouchable(true);
headline1.startFadeAnimation(255, 20);
touchgfx**.startMoveAnimation(touchgfx**.getX(), 8, 20, EasingEquations::cubicEaseInOut, EasingEquations::cubicEaseInOut);
}
}
总的来说使用TouchGFX来做界面还是很容易的，有比较完善的设计器来进行UI布局，一些常见的自定义控件也提供了示例代码。
与CubeMX相比，TouchGFX自动生成的代码结构更合理一些。
自动生成的不需要手动修改的代码，都在generated目录中，需要修改定制的代码都在gui目录中。
而不是像CubeMX那样通过在代码中添加特定的标识来区分自动生成的代码和用户添加的代码。
项目上使用TouchGFX来做UI的时候，美工人员用Desginer整合素材，再配合上方便的Simulator，离最终的视觉效果就差不离了。
Simulator是一个相当不错的工具，在研发实践中，如果需要将UI设计部分外包出去，发包方可以通过Simulator对设计过程进行管控。
而接包方也可以用Simulator做为中间验收成果，在设计过程中向发包方隐藏素材这类的原始设计文件。
TouchGFX Windows上的Simulator包含了一个MinGW的GCC编译器，PC上生成的代码就是通过它来编译的。
安装完TouchGFX后，桌面上会出现一个
这样的图标，这个就是进入TouchGFX的编译环境的入口。
在这里面切换到工程所在路径可以对生成代码进行编译，编译成功后生成在PC上运行的仿真程序。
TouchGFX会自动生成两个Simulator的工程，一个是使用MinGW环境的Makefile，一个Visual Studio的工程。
Visual Studio是很强大的调试环境，调试很方便，有个人免费使用的社区版，就是安装后比较占地方。
相对而言MinGW的Makefile就比较简陋了，默认情况下只有一个命令行的界面。
不过微软出了一款免费的编程利器VSCode，通过配置也可以编译调试Makefile的工程。
VSCode在Linux系统上也有，看起来TouchGFX的Simulator也是支持Linux的，这样可以用VSCode统一Windows和Linux上的调试环境。
VSCode经过一些配置后，就可以编译调试TouchGFX的Simulator工程了。
我在移植相关控件，增加功能的时候就是在这里进行编译检查的，当有错误时，查看修改起来也比较方便。
| 
楼主
标题置顶
标题高亮
