SkinUI入门教程（十二） SkinUI动画、国际化、字体大小和资源发布

• 官方网站：http://www.skinui.cn
• 下载地址：http://pan.baidu.com/s/1slKsMGt

12.1 窗口动画

可以给对话框布局文件的【SkinDialog】节点，加上动画属性【Animation="xxx"】。当对话框打开和关闭时，显示窗口动画。

12.1.1 SizeChange动画

SizeChange动画有一个固定点。默认情况下，固定点在窗口正中心。

固定中心点的SizeChange动画

• 对话框打开时，中心像素点保持不动，其他像素点由中心点向四个角展开，透明度由完全透明到完全不透明；
• 对话框关闭时，中心像素点保持不动，其他像素点由四个角向中心点收拢，透明度由完全不透明到完全透明。

固定中心点

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="SizeChange"></SkinDialog>

固定左上角的SizeChange动画

• 对话框打开时，左上角像素点保持不动，其他像素点由左上角向其他角展开，透明度由完全透明到完全不透明；
• 对话框关闭时，左上角像素点保持不动，其他像素点由其他角向左上角收拢，透明度由完全不透明到完全透明。

固定左上角

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="SizeChange" FixedPoint="0,0"></SkinDialog>

固定右上角的SizeChange动画

• 对话框打开时，右上角像素点保持不动，其他像素点由右上角向其他角展开，透明度由完全透明到完全不透明；
• 对话框关闭时，右上角像素点保持不动，其他像素点由其他角向右上角收拢，透明度由完全不透明到完全透明。

固定右上角

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="SizeChange" FixedPoint="400,0"></SkinDialog>

固定右下角的SizeChange动画

• 对话框打开时，右下角像素点保持不动，其他像素点由右下角向其他角展开，透明度由完全透明到完全不透明；
• 对话框关闭时，右下角像素点保持不动，其他像素点由其他角向右下角收拢，透明度由完全不透明到完全透明。

固定右下角

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="SizeChange"FixedPoint="400,300"></SkinDialog>

固定左下角的SizeChange动画

• 对话框打开时，左下角像素点保持不动，其他像素点由左下角向其他角展开，透明度由完全透明到完全不透明；
• 对话框关闭时，左下角像素点保持不动，其他像素点由其他角向左下角收拢，透明度由完全不透明到完全透明。

固定左下角

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="SizeChange"FixedPoint="0,300"></SkinDialog>

12.1.2 LeftRightExpand动画

LeftRightExpand有一条固定线。默认情况下，固定线为窗口居中垂直线。

固定线为窗口居中垂直线的LeftRightExpand动画

• 对话框打开时，居中垂直线像素点保持不动，其他像素点由居中垂直线向左右展开，透明度由完全透明到完全不透明；
• 对话框关闭时，居中垂直线像素点保持不动，其他像素点由左右向居中垂直线收拢，透明度由完全不透明到完全透明。

左右展开固定中间

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="LeftRightExpand"></SkinDialog>

固定线为左边垂直线的LeftRightExpand动画

• 对话框打开时，左边垂直线像素点保持不动，其他像素点由左边垂直线向右展开，透明度由完全透明到完全不透明；
• 对话框关闭时，左边垂直线像素点保持不动，其他像素点由右向左边垂直线收拢，透明度由完全不透明到完全透明。

左右展开固定左边

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="LeftRightExpand" FixedPoint="0,0"></SkinDialog>

固定线为右边垂直线的LeftRightExpand动画

• 对话框打开时，左边垂直线像素点保持不动，其他像素点由左边垂直线向右展开，透明度由完全透明到完全不透明；
• 对话框关闭时，左边垂直线像素点保持不动，其他像素点由右向左边垂直线收拢，透明度由完全不透明到完全透明。

左右展开固定右边

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="LeftRightExpand" FixedPoint="400,300"></SkinDialog>

12.1.3 TopBottomExpand动画

TopBottomExpand有一条固定线。默认情况下，固定线为窗口居中垂直线。

固定线为窗口居中水平线的TopBottomExpand动画

• 对话框打开时，居中水平线像素点保持不动，其他像素点由居中水平线向上下展开，透明度由完全透明到完全不透明；
• 对话框关闭时，居中水平线像素点保持不动，其他像素点由上下向居中水平线收拢，透明度由完全不透明到完全透明。

上下展开固定中间

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="TopBottomExpand"></SkinDialog>

固定线为上边水平线的TopBottomExpand动画

• 对话框打开时，上边水平线像素点保持不动，其他像素点由上边水平线向下展开，透明度由完全透明到完全不透明；
• 对话框关闭时，上边水平线像素点保持不动，其他像素点由下向上边水平线收拢，透明度由完全不透明到完全透明。

上下展开固定上边

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="TopBottomExpand" FixedPoint="0,0"></SkinDialog>

固定线为下边水平线的TopBottomExpand动画

• 对话框打开时，下边水平线像素点保持不动，其他像素点由下边水平线向上展开，透明度由完全透明到完全不透明；
• 对话框关闭时，下边水平线像素点保持不动，其他像素点由上向下边水平线收拢，透明度由完全不透明到完全透明。

上下展开固定下边

布局文件如下：

<SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Animation="TopBottomExpand" FixedPoint="400,300"></SkinDialog>

12.2 切换动画

可以给布局文件的【SwitchAnimationHost】节点，加上动画属性【Animation="xxx"】。
SkinUI内置以下两种切换动画：

• LeftRightSlide动画。切换时，内容左右滑动
• TopBottomSlide动画。切换时，内容上下滑动

当需要切换子组件时，SkinUI调用类【CSwitchAnimationHost】的以下接口：

• C++接口

  void ShowView(LONG nId);void ShowView(CSkinView* pView);

• 通常情况下，切换动画搭配【SkinAnimationGroup】使用，请看下面的示例：

  <SkinDialog DefaultWidth="400" DefaultHeight="300" SysButton="CLOSE" Icon="128" Caption="IDS_SWITCH_ANIMATION1" Animation="SizeChange" ThemeHeight="65">  <SkinAnimationGroup Id="100" LayoutWidth="210" LayoutHeight="30" AlignParentLeft="0" AlignParentTop="35">      <SkinRelativeLayout LayoutWidth="FillParent" LayoutHeight="FillParent">          <SkinRadioButton Id="101" LayoutWidth="100" LayoutHeight="FillParent" ChildText1="TabButton1" Image="TabButton.png" Layout="TabButton.xml" BindView="1100" AlignParentLeft="0" Checked="true"/>          <SkinRadioButton Id="102" LayoutWidth="100" LayoutHeight="FillParent" ChildText1="TabButton2" Image="TabButton.png" Layout="TabButton.xml" BindView="1200" AlignParentLeft="100" Radius="5"/>      </SkinRelativeLayout>  </SkinAnimationGroup>  <SwitchAnimationHost Id="1000" AlignParentLeft="15" ToBottomOf="100,5" AlignParentRight="15" AlignParentBottom="15" Animation="LeftRightSlide">      <SkinRelativeLayout Id="1100" LayoutWidth="FillParent" LayoutHeight="FillParent">      </SkinRelativeLayout>      <SkinRelativeLayout Id="1200" LayoutWidth="FillParent" LayoutHeight="FillParent" Visible="false">      </SkinRelativeLayout>  </SwitchAnimationHost></SkinDialog>

  以上的代码，当选中SkinRadioButton时，会以动画的方式显示属性BindView绑定的SkinRelativeLayout。

12.3 侧边栏动画

类【CSlideAnimationHost】提供侧边栏动画的能力。

侧边栏动画

当需要显示侧边栏时，SkinUI调用类【CSlideAnimationHost】的以下接口：

• C++接口

  void Show();

当需要隐藏侧边栏时，SkinUI调用类【CSlideAnimationHost】的以下接口：

• C++接口

  void Close();

12.4 部分隐藏动画

类【CHideAnimationHost】提供侧边栏动画的能力。

SkinUI内置以下两种切换动画：

• LeftRightHide动画。隐藏时，内容左右滑动
• TopBottomHide动画。隐藏时，内容上下滑动

部分隐藏动画 LeftRightHide

部分隐藏动画 TopBottomHide

当需要显示隐藏的部分时，调用类【CHideAnimationHost】的以下接口：

• C++接口

  void ShowView(LONG nId);void ShowView(CSkinView* pView);

当需要隐藏需要隐藏的部分时，调用类【CHideAnimationHost】的以下接口：

• C++接口

  void HideView(LONG nId);void HideView(CSkinView* pView);

13 国际化

SkinUI默认加载资源目录【string】下文件夹【2052】下面的字符串。

• 获得当前字符串语言

  tstring strLanguage = _T("2052");SkinUI::GetAppConfig(APP_CONFIG_STRING_LANGUAGE, strLanguage);

在程序运行过程中，执行下面的代码，可以变更程序加载的字符串资源，重启程序后生效。

• 设置加载资源目录【string】下文件夹【2052】下面的简体中文字符串

  SkinUI::SetAppConfig(APP_CONFIG_STRING_LANGUAGE, _T("2052"));

• 设置加载资源目录【string】下文件夹【1033】下面的英文字符串

  SkinUI::SetAppConfig(APP_CONFIG_STRING_LANGUAGE, _T("1033"));

• 设置加载资源目录【string】下文件夹【1028】下面的繁体中文字符串

  SkinUI::SetAppConfig(APP_CONFIG_STRING_LANGUAGE, _T("1028"));

14 文字大小

SkinUI可以将文字整体变大或变小，默认使用正常大小的文字。

• 获得当前文字大小变更

  LONG nFontSize = 0;SkinUI::GetAppConfig(APP_CONFIG_FONT_SIZE_CHANGE, nFontSize);

在程序运行过程中，执行下面的代码，可以将文字整体变大或变小，不需要重启程序即可生效。

• 将字体整体变大两个字号

  SkinUI::ChangeFontSize(2);

• 将字体整体变小两个字号

  SkinUI::ChangeFontSize(-2);

15 资源发布

开发者需要在【InitInstance】时设置资源发布类型。

15.1发布资源文件

直接将res目录原样放在安装包。发布时，需要再带完整的【res】目录。

调用以下方法，将资源发布类型设置为【发布资源文件】：

BOOL CApp::InitInstance(ResType& resType){    resType = RT_FILE;    return TRUE;}

优点：

• 更新版本时，只需更新变化的资源，不需要更新整个资源目录；

缺点：

• 可以随意获得和修改资源文件；

15.2 发布资源文件包

将res目录下的文件夹打包成【xxx.res】文件。发布时，只需携带【xxx.res】即可，不需要再带完整的【res】目录。

调用以下方法，将资源发布类型设置为【发布资源文件包】：

BOOL CApp::InitInstance(ResType& resType){    resType = RT_FILE_PACKAGE;    return TRUE;}

优点：

• 资源文件加密，无法随意获得和修改资源文件；

缺点：

• 更新版本时，需要更新整个资源目录；

15.3发布RC资源文件包

将res目录下的文件夹打包成【xxx.res】文件，然后以资源文件的方式，打包到exe文件中。发布时，资源文件已经包含在exe文件，不需要带任何资源文件。

调用以下方法，将资源发布类型设置为【发布RC资源文件包】：

BOOL CApp::InitInstance(ResType& resType){    resType = RT_RC_PACKAGE;    return TRUE;}

优点：

• 资源文件加密，无法随意获得和修改资源文件；
• 只需一个exe文件即可运行，在某些情况下非常有用。

缺点：

• 更新版本时，需要更新整个资源和exe文件；