minigui-docs/programming-guide-zh/MiniGUIProgGuidePart2Chapter14-zh.md

动画控件类

1 动画控件简介

动画控件通过对图片组和 gif 动态图片的绘制和显示，为用户提供了丰富的视觉体验。 mGNCS 中的动画控件源于 Minigui 3.0 的 animation 控件，在其基础上增加了对图片组播放和gif图片播放控制的支持。 同时， 用户可以通过设置图片播放间隔时间， 来控制播放速度。

• Animate 类层次关系
  • mStatic
    • mAnimate
• 控件创建方法
  • 自动创建：通过 mStudio 中的界面设计器，拖拽对应的动画控件，在属性栏中选择需要加载的 GIF 图片或图片目录，mStudio 将自动创建控件，并提供可视化的控件配置，同时自动生成创建代码。
  • 手动生成：按照 mGNCS 控件创建过程，通过编程，传入对应控件窗口类 ID，生成控件，手动编程设置控件属性、事件处理。

2 mAnimate

• 控件窗口类: NCSCTRL_ANIMATE
• 控件英文名: Animate
• 简介: 动画控件。通过在控件上加载不同的图片处理对象， 来显示绘制动态图片。
• 示意图:

2.1 mAnimate 风格

继承自 mStatic 的风格

风格 ID	mStudio 属性名	说明
NCSS_ANMT_AUTOLOOP	Loop	设置动画播放是否为自动循环， 设置为 True 时，图片循环播放， 设置为 False 时，图片播放完毕则停止
NCSS_ANMT_SCALE	Scale->ImageScaled	设置图片播放面积为控件区域面积， 可以对图片进行扩大或缩减播放
NCSS_ANMT_AUTOFIT	Scale->AutoFit	设置控件区域自动匹配为图片面积
NCSS_ANMT_AUTOPLAY	Autoplay	设置图片是否为自动播放， True 时， 图片自动播放，False 时， 需要用户发送命令控制播放

2.2 mAnimate 属性

继承自 mStatic 的属性

属性 ID 名	mStudio 属性名	类型	权限	说明
NCSP_ANMT_GIFFILE	GIFFile	String	RW	动画控件加载的GIF图片文件名
NCSP_ANMT_DIR	Dir	String	RW	动画控件加载的目录名， 控件加载目录内的所有图片, 图片播放是按照所支持图片首字母ascii码顺序
NCSP_ANMT_INTERVAL	Interval	int	RW	播放图片时帧与帧之间的时间间隔

2.3 mAnimate 事件

继承自mStatic 的事件

2.4 mAnimate 渲染器

非客户区的绘制请查阅MStudioMGNCSV1dot0PGP2C4#mStatic][mStatic的渲染器

2.5 mAnimate 方法

2.5.1 ncsAnimateStart

BOOL ncsAnimateStart(mAnimate* self);

• 参数：
  • self -- 需要操作的动画控件指针
• 说明：
  开始播放 self 对应的动画控件， 如果动画控件已经在播放， 则回到动画起始处开始播放。
• 示例：

//播放anim动画
    mAnimate *anim = (mAnimate *)ncsGetChildObj(hwnd, IDC_ANI);
    ncsAnimateStart(anim);    

2.5.2 ncsAnimatePauseResume

BOOL ncsAnimatePauseResume(mAnimate* self);

• 参数：
  • elf -- 需要操作的动画控件指针
• 说明：
  如果当前动画为暂停，此方法会继续播放动画， 如果动画为播放中， 此方法会暂停动画。
• 示例：

//暂停anim动画
    mAnimate *anim = (mAnimate *)ncsGetChildObj(hwnd, IDC_ANI);
    ncsAnimateStart(anim);
    ncsAnimatePauseResume(anim);    

2.5.3 ncsAnimateStop

BOOL ncsAnimateStop(mAnimate* self);

• 参数：
  • self -- 需要操作的动画控件指针
• 说明：
  停止动画， 并将动画重置回第一帧。
• 示例：

//暂停anim动画
    mAnimate *anim = (mAnimate *)ncsGetChildObj(hwnd, IDC_ANI);
    ncsAnimateStop(anim);

2.6 mAnimate 编程示例

• 运行截图:

• 本程序窗口区域上边的图片为 gif 动态图片， 下面是对程序所在目录中图片的幻灯片播放， 三个按钮start, pause, stop 是对 gif 播放的控制。
• 普通按钮完整示例代码：animation.c

清单 1 animation.c

#include <stdio.h>
#include <stdlib.h>
#include <string.h>

#include <minigui/common.h>
#include <minigui/minigui.h>
#include <minigui/gdi.h>
#include <minigui/window.h>
#include <minigui/control.h>
#include "../include/mgncs.h"
#include "../include/mrdr.h"
#define IDC_ANI 100
#define IDC_BTN1 101
#define IDC_BTN2 102
#define IDC_BTN3 103
#define IDC_ANIM 104

static BOOL mymain_onCreate(mWidget* self, DWORD add_data)
{
	//TODO : initialize
	return TRUE;
}

static void mymain_onClose(mWidget* self, int message)
{
	DestroyMainWindow(self->hwnd);
	PostQuitMessage(0);
}

//START_OF_PIC
static NCS_PROP_ENTRY animate_props [] = {
	{ NCSP_ANMT_GIFFILE, (DWORD)"tuzi1.gif" },
	{ NCSP_ANMT_INTERVAL, 6 },
	{0, 0}
};

static NCS_PROP_ENTRY animate_props_ex [] = {
	{ NCSP_ANMT_DIR, (DWORD)"." },
	{ NCSP_ANMT_INTERVAL, 100 },
	{0, 0}
};
//END_OF_PIC

NCS_RDR_ELEMENT btn_rdr_elements[] = 
{
	{ NCS_MODE_USEFLAT, 1},
	{ -1, 0 }
};

static NCS_RDR_INFO btn_rdr_info[] =
{
	{"flat","flat", NULL}
};

NCS_RDR_ELEMENT animate_rdr_elements[] = 
{
	{ NCS_MODE_USEFLAT, 1},
	{ -1, 0 }
};

static NCS_RDR_INFO animate_rdr_info[] = 
{
	{"flat", "flat", NULL}
};

//START_OF_KEY_EVENT
static void btn_notify(mWidget *button, int id, int nc, DWORD add_data)
{
    mAnimate *anim = (mAnimate *)ncsGetChildObj(GetParent(button->hwnd), IDC_ANI);

    switch (id)
    {
        case IDC_BTN1 :
			ncsAnimateStart(anim);    
            break;
        case IDC_BTN2 :
			ncsAnimatePauseResume(anim);
            break;
        case IDC_BTN3 :
            ncsAnimateStop(anim);
            break;
    }

}

static NCS_EVENT_HANDLER btn_handlers [] = {
    NCS_MAP_NOTIFY(NCSN_BUTTON_PUSHED, btn_notify),
	{0, NULL}	
};
//END_OF_KEY_EVENT

//START_OF_TMPL
static NCS_WND_TEMPLATE _ctrl_templ[] = {
	{
		NCSCTRL_ANIMATE, 
		IDC_ANI,
		50, 50, 300, 300,
		WS_BORDER | WS_VISIBLE |NCSS_ANMT_AUTOFIT | NCSS_ANMT_AUTOLOOP | \
		NCSS_ANMT_AUTOPLAY,
		WS_EX_NONE,
		"test",
		animate_props, //props,
		animate_rdr_info,
		NULL, //handlers,
		NULL, //controls
		0,
		0 //add data
	},
	{
		NCSCTRL_ANIMATE, 
		IDC_ANIM,
		0, 230, 300, 300,
		WS_BORDER | WS_VISIBLE | NCSS_ANMT_AUTOLOOP | NCSS_ANMT_AUTOFIT | \
		NCSS_ANMT_AUTOPLAY,,
		WS_EX_NONE,
		"test2",
		animate_props_ex, //props,
		animate_rdr_info,
		NULL, //handlers,
		NULL, //controls
		0,
		0 //add data
	},
	{
		NCSCTRL_BUTTON, 
		IDC_BTN1,
		450, 100, 70, 30,
		WS_VISIBLE | NCSS_NOTIFY,
		WS_EX_NONE,
        "Start",
		NULL,
		btn_rdr_info,
		btn_handlers,
		NULL,
		0,
		0
	},	
	{
		NCSCTRL_BUTTON, 
		IDC_BTN2,
		450, 200, 70, 30,
		WS_VISIBLE | NCSS_NOTIFY,
		WS_EX_NONE,
        "Pause",
		NULL,
		btn_rdr_info,
		btn_handlers,
		NULL,
		0,
		0
	},	
	{
		NCSCTRL_BUTTON, 
		IDC_BTN3,
		450, 300, 70, 30,
		WS_VISIBLE | NCSS_NOTIFY,
		WS_EX_NONE,
        "Stop",
		NULL,
		btn_rdr_info,
		btn_handlers,
		NULL,
		0,
		0
	},	
};
//END_OF_TMPL

static NCS_EVENT_HANDLER mymain_handlers[] = {
	{MSG_CREATE, mymain_onCreate},
	{MSG_CLOSE, mymain_onClose},
	{0, NULL}
};

//define the main window template
static NCS_MNWND_TEMPLATE mymain_templ = {
	NCSCTRL_DIALOGBOX, 
	1,
	0, 0, 600, 600,
	WS_CAPTION | WS_BORDER | WS_VISIBLE,
	WS_EX_NONE,
    "animate Test ....",
	NULL,
	NULL,
	mymain_handlers,
	_ctrl_templ,
	sizeof(_ctrl_templ)/sizeof(NCS_WND_TEMPLATE),
	0,
	0, 0,
};

int MiniGUIMain(int argc, const char* argv[])
{
	ncsInitialize();
	mDialogBox* mydlg = (mDialogBox *)ncsCreateMainWindowIndirect(&mymain_templ, HWND_DESKTOP);

	_c(mydlg)->doModal(mydlg, TRUE);


	MainWindowThreadCleanup(mydlg->hwnd);
	return 0;
}

#ifdef _MGRM_THREADS
#include <minigui/dti.c>
#endif

• 设置加载图片

static NCS_PROP_ENTRY animate_props [] = {
        { NCSP_ANMT_GIFFILE, (DWORD)"tuzi1.gif" },
        { NCSP_ANMT_INTERVAL, 6 },
        {0, 0}
};

static NCS_PROP_ENTRY animate_props_ex [] = {
        { NCSP_ANMT_DIR, (DWORD)"." },
        { NCSP_ANMT_INTERVAL, 100 },
        {0, 0}
};

• 设置按键消息

static void btn_notify(mWidget *button, int id, int nc, DWORD add_data)
{
        mAnimate *anim = (mAnimate *)ncsGetChildObj(GetParent(button->hwnd), IDC_ANI);
        
        switch (id)
        {
                case IDC_BTN1 :
                ncsAnimateStart(anim);    
                break;
                case IDC_BTN2 :
                ncsAnimatePauseResume(anim);
                break;
                case IDC_BTN3 :
                ncsAnimateStop(anim);
                break;
        }
        
}

static NCS_EVENT_HANDLER btn_handlers [] = {
        NCS_MAP_NOTIFY(NCSN_BUTTON_PUSHED, btn_notify),
        {0, NULL}	
};

• 设置显示界面模板

static NCS_WND_TEMPLATE _ctrl_templ[] = {
        {
                NCSCTRL_ANIMATE, 
                IDC_ANI,
                50, 50, 300, 300,
                WS_BORDER | WS_VISIBLE |NCSS_ANMT_AUTOFIT | NCSS_ANMT_AUTOLOOP | \		NCSS_ANMT_AUTOPLAY,
                WS_EX_NONE,
                "test",
                animate_props, //props,
                animate_rdr_info,
                NULL, //handlers,
                NULL, //controls
                0,
                0 //add data
        },
        {
                NCSCTRL_ANIMATE, 
                IDC_ANIM,
                0, 230, 300, 300,
                WS_BORDER | WS_VISIBLE | NCSS_ANMT_AUTOLOOP | NCSS_ANMT_AUTOFIT | \		NCSS_ANMT_AUTOPLAY,,
                WS_EX_NONE,
                "test2",
                animate_props_ex, //props,
                animate_rdr_info,
                NULL, //handlers,
                NULL, //controls
                0,
                0 //add data
        },
        {
                NCSCTRL_BUTTON, 
                IDC_BTN1,
                450, 100, 70, 30,
                WS_VISIBLE | NCSS_NOTIFY,
                WS_EX_NONE,
                "Start",
                NULL,
                btn_rdr_info,
                btn_handlers,
                NULL,
                0,
                0
        },	
        {
                NCSCTRL_BUTTON, 
                IDC_BTN2,
                450, 200, 70, 30,
                WS_VISIBLE | NCSS_NOTIFY,
                WS_EX_NONE,
                "Pause",
                NULL,
                btn_rdr_info,
                btn_handlers,
                NULL,
                0,
                0
        },	
        {
                NCSCTRL_BUTTON, 
                IDC_BTN3,
                450, 300, 70, 30,
                WS_VISIBLE | NCSS_NOTIFY,
                WS_EX_NONE,
                "Stop",
                NULL,
                btn_rdr_info,
                btn_handlers,
                NULL,
                0,
                0
        },	
};