Skip to content

动画控件 (SAnimateImgWnd)

Warning

The current page still doesn't have a translation for this language.

You can read it through google translate.

动画控件用于显示图片序列动画，支持多种动画模式和播放控制。它是实现图片动画效果的理想选择，可用于加载动画、状态指示等场景。

基本信息

  • 类名：SAnimateImgWnd
  • 控件标签：animate
  • 基类：SWindow
  • 功能：提供图片序列动画显示

属性说明

SAnimateImgWnd 标签为 animateimg，继承自 TWindowProxy，通过逐帧皮肤播放简单动画。

自身属性

属性名 类型 默认值 说明
skin string - 逐帧动画皮肤（通常是 imglist / imgframe，帧数由皮肤决定）
speed uint 50 每帧间隔（毫秒），值越小播放越快
autoStart bool true 加载后是否自动开始播放
repeat int -1 播放次数，-1 表示无限循环，0 表示播放一次

text、字体、颜色、可用、可见等通用属性见通用属性。

使用示例

基本动画

<animate name="aniBasic" 
         pos="10,10,74,74" 
         skin="loading_skin"
         speed="50"
         autoStart="true"/>

自定义动画

<animate name="aniCustom" 
         pos="84,10,148,74" 
         skin="custom_anim"
         speed="100"
         autoStart="false"
         repeat="3"/>

无限循环动画

<animate name="aniLoop" 
         pos="158,10,222,74" 
         skin="loop_anim"
         speed="80"
         autoStart="true"
         repeat="-1"/>

动画操作

代码操作

// 查找动画控件
SAnimateImgWnd *pAnimate = FindChildByName2<SAnimateImgWnd>(L"aniBasic");

// 开始动画
pAnimate->Start();

// 停止动画
pAnimate->Stop();

// 暂停动画
pAnimate->Pause();

// 恢复动画
pAnimate->Resume();

// 设置帧速率
pAnimate->SetAttribute(L"speed", L"100");

// 设置是否自动开始
pAnimate->SetAttribute(L"autoStart", L"true");

动画状态控制

void AnimateStateControl()
{
    SAnimateImgWnd *pAnimate = 
        FindChildByName2<SAnimateImgWnd>(L"aniState");
    if(!pAnimate) return;

    // 根据状态播放不同动画
    switch(GetState()) {
    case STATE_LOADING:
        pAnimate->SetSkin(L"loading_skin");
        pAnimate->SetFrameCount(8);
        pAnimate->Start();
        break;

    case STATE_PROGRESS:
        pAnimate->SetSkin(L"progress_skin");
        pAnimate->SetFrameCount(16);
        pAnimate->SetAutoLoop(TRUE);
        pAnimate->Start();
        break;

    case STATE_COMPLETE:
        pAnimate->SetSkin(L"complete_skin");
        pAnimate->SetFrameCount(1);
        pAnimate->Stop();
        break;
    }
}

事件处理

动画控件支持以下事件：

事件名 EventID 说明
EVT_ANI_START EventAniStart::EventID 动画开始事件
EVT_ANI_STOP EventAniStop::EventID 动画停止事件
EVT_ANI_FRAME EventAniFrame::EventID 动画帧切换事件 
// 事件处理示例
EVENT_MAP_BEGIN()
    EVENT_NAME_HANDLER(L"aniBasic", EventAniStart::EventID, OnAniStart)
    EVENT_NAME_HANDLER(L"aniBasic", EventAniStop::EventID, OnAniStop)
EVENT_MAP_END()

void OnAniStart(IEvtArgs *pEvt)
{
    // 处理动画开始事件
}

void OnAniStop(IEvtArgs *pEvt)
{
    // 处理动画停止事件
}

样式定制

基本样式

<style>
    <class name="animateStyle"
           frameInterval="100"
           alpha="255"
           autoLoop="1"/>
</style>

<animate class="animateStyle"/>

自定义动画状态

<animate name="aniTemplate"
         skin="state_skin">
    <state name="normal" 
           frame="0"/>
    <state name="hover" 
           frame="1"/>
    <state name="push" 
           frame="2"/>
</animate>

最佳实践

  1. 性能优化：合理设置 speed 属性，避免帧率过高导致性能问题
  2. 资源管理：使用 repeat 属性控制循环次数，避免无限循环消耗资源
  3. 用户体验：通过 autoStart 属性控制动画自动播放行为

常见问题

Q: 动画不播放怎么办？

A: 检查 autoStart 是否设置为 true，或通过代码调用 Start() 方法。

Q: 动画播放速度不对怎么办？

A: 调整 speed 属性值，单位为毫秒。

Q: 如何控制动画循环次数？

A: 使用 repeat 属性设置循环次数，-1 为无限循环。

相关控件