本帖最后由 LyCrystal 于 2019-3-20 09:18 编辑
A、听说论坛搞了了touchGFX的活动，便过来参与一把。顺带感受一下强大的designer。话不多少，下面开始一步一步创建工程。
B、这里我直接从打开designer之后开始说创建过程。安装过程是一路next的，我就不多罗嗦了。
1、打开designer，弹出工程创建界面
2、将光标移动到Blank UI 框内便会出现change按钮。如下图所示。点击按钮选择合适的模板
3、这里我选择使用第二个模板，AnimatedImage Example。通过选择合适的模板可以省略一些不必要的过程，加快进度。当然，也省得我们抄模板时抄错。选择好模板之后我们返回去修改工程信息
4、参照下图按需求修改信息
其中:
1、工程名称
2、保存地址
3、色彩深度
4、分辨率
5、创建按钮
修改完成之后点击创建按钮，至此一个工程创建出来了。
C、添加修改内容
1、工程创建完成之后自动弹出下面的界面，这里点击箭头4指向的按钮，我们需要删除和添加一下东西。当然也可以直接Run simulator看一下官方例子的效果。
2、点击进入出现如下界面，这一组以ani_开头的文件就是哪个转动的小手手。我们删除这一组图片换成st的素材
更换之后如下所示：
接下来修改动画配置:
主要是两项:
1、image中的FirstImage和LastImage
2、ANIMATION中的三个全部勾选上。
3、加入一个新的screen：点击下图所示按钮加入一个新的screen
4、修改start按钮的功能:
这里点击start按钮(其实不用点)，并点选有点动作设定。删除原有的动作设定，并新建一个interaction:
设定如下图所示，用于切换到screen2
5、绘制screen2，整体效果如下图所示:
过程就是：
1）添加box，用来盛放背景
2）加入背景图片
3）加入两边的touchGFX图片
4）一次加入线段
5）红色圆环我用的是circleProcess，白色圆环用的是circle。
具体设置细节我就不多描述了。可以参照工程上的参数进行布置。
6、布置完毕后我们点击生成代码。
D、代码修改:
生成代码之后我们在工程下面的路径GFXDemo\simulator\msvs\内可以找到Visual studio的工程文件，我们直接打开工程文件。
准备添加代码:
1、修改头文件:
GFXDemo\gui\include\gui\screen2_screen\Screen2View.hpp
- class Screen2View : public Screen2ViewBase
- {
- private:
- int ProcessVal;
- int Step;
- int CircleDet = 0;
- public:
- Screen2View();
- virtual ~Screen2View() {}
- virtual void setupScreen();
- virtual void tearDownScreen();
- void ScreenEnter();
- void handleTickEvent();
- protected:
- };
2、setupScreen()修改为如下内容
GFXDemo\gui\src\screen2_screen\Screen2View.cpp
- void Screen2View::setupScreen()
- {
- int x, y;
- Screen2ViewBase::setupScreen();
- //状态
- ProcessVal = 0;
- Step = 0;
- //将线段隐藏
- //line 0
- line0.getStart(x,y);
- line0.setEnd(x,y);
- //line 1
- line1.getStart(x, y);
- line1.setEnd(x, y);
- //line 2
- line2.getStart(x, y);
- line2.setEnd(x, y);
- //line 3
- line3.getStart(x, y);
- line3.setEnd(x, y);
- //line 4
- line4.getStart(x, y);
- line4.setEnd(x, y);
- //line 5
- line5.getStart(x, y);
- line5.setEnd(x, y);
- //line 6
- line6.getStart(x, y);
- line6.setEnd(x, y);
- //line 7
- line7.getStart(x, y);
- line7.setEnd(x, y);
- //circleProgress1
- circleProgress1.setValue(0);
- //circleProgress2
- circleProgress2.setValue(0);
- //circle1
- circle1.setArc(0, 0);
- circle1.setVisible(false);
- }
3、重写函数handleTickEvent()
GFXDemo\gui\src\screen2_screen\Screen2View.cpp
- void Screen2View::handleTickEvent()
- {
- // int x = 0, y = 0;
- switch (Step)
- {
- case 0:
- line0.invalidate();
- line1.invalidate();
- line2.invalidate();
- line3.invalidate();
- line4.invalidate();
- line5.invalidate();
- line6.invalidate();
- line7.invalidate();
- circleProgress1.invalidate();
- //Process1
- circleProgress1.setValue(++ProcessVal);
- //line0
- line0.setEnd(5, 60 * ProcessVal / 360);
- //line1
- line1.setEnd(240*ProcessVal/360, 5);
- //line2
- line2.setEnd(5, 100 * ProcessVal / 360);
- //line3
- line3.setEnd(30 * ProcessVal / 360, 5);
- //line4
- line4.setEnd(15 * ProcessVal / 360, 5);
- //line5
- line5.setEnd(5, 100 * ProcessVal / 360);
- //line6
- line6.setEnd(240 * ProcessVal / 360, 5);
- //line7
- line7.setEnd(5, 60 * ProcessVal / 360);
- line0.invalidate();
- line1.invalidate();
- line2.invalidate();
- line3.invalidate();
- line4.invalidate();
- line5.invalidate();
- line6.invalidate();
- line7.invalidate();
- circleProgress1.invalidate();
- if (ProcessVal >= 360) {
- ProcessVal = 0;
- Step = 1;
- circle1.setVisible(true);
- }
- break;
- case 1:
- if (CircleDet < 340) {
- CircleDet++;
- circle1.setArc(circle1.getArcStart(), circle1.getArcEnd() + 1);
- }
- else {
- Step = 2;
- }
- circle1.setArc(circle1.getArcStart() + 1, circle1.getArcEnd() + 1);
- circle1.invalidate();
- break;
- case 2:
- if (CircleDet > 20) {
- CircleDet--;
- circle1.setArc(circle1.getArcStart() + 1, circle1.getArcEnd());
- }
- else {
- Step = 1;
- }
- circle1.setArc(circle1.getArcStart() + 1, circle1.getArcEnd() + 1);
- circle1.invalidate();
- break;
- default:
- break;
- }
- }
附录:
工程文件:放百度云吧，清理压缩之后文件还是过大
链接：https://pan.baidu.com/s/1KWxGokmGN20k-ESmBszRTw
提取码：6nv5
| 
楼主
