12 SkinUI动画、国际化、字体大小和资源发布

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文件；
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容