在SOUI3.0中使用數值動畫

上一篇介紹了插值動畫，插值動畫是直接做用於窗口對象的。

數值動畫則能夠做用於任何對象。

SOUI內置了3種數值類型的動畫，分別是SIntAnimator, SFloatAnimator, SColorAnimator，分別對應int, float, COLOR這3種數據類型，固然用戶也能夠擴展支持其它數據類型，不過基本上這3種就足夠了。

下面以demo中使用的ColorAnimator爲例來介紹如何使用數值動畫。

首先，和插值動畫同樣，咱們須要一個XML來描述這個動畫。

<?xml version="1.0" encoding="utf-8"?>
<colorAnimator duration="1000" valueFrom="RGBA(0,0,0,128)" valueTo="RGBA(255,0,0,128)" repeatCount="1" repeatMode="reverse"/>

上面是一個colorAnimator, 它描述了一個將顏色值從rgba(0,0,0,128)變化爲rgba(255,0,0,128)的動畫，一次動畫持續1秒，再加一次重複，這個動畫一共2秒。

定義好動畫後，咱們須要在代碼中加載這個動畫：

void CMainDlg::OnSouiClick()
{
    IValueAnimator * pAni = SApplication::getSingletonPtr()->LoadValueAnimator(L"valueAni:colorAni");
    if(pAni)
    {
        pAni->addListener(this);
        pAni->addUpdateListener(this);
        pAni->start(this);
    }
}

上面代碼首先從ValueAni:colorAni指定的XML資源里加載並建立一個IVaueAnimator對象，建立成功之後，調用pAni->addUpdateListener(this)來設置動畫回調。而後調用pAni->start(this)來啓動動畫。

注意這裏這個pAni對象沒有被其它對象持有。因此在這裏start完成後，並不能直接release。

第三步，就是響應數值變化：

Demo中CMainDlg實現了IValueAnimator::IAnimatorUpdateListener接口，這個接口只有一個方法：

struct IAnimatorUpdateListener
        {
            virtual void onAnimationUpdate(IValueAnimator *pAnimator) = 0;
        };

這個方法在CMainDlg中的實現以下：

void CMainDlg::onAnimationUpdate(IValueAnimator *pAnimator)
{
    SWindow *pTst = FindChildByName(L"tree_test");
    if(pTst)
    {
        SColorAnimator *ani = sobj_cast<SColorAnimator>(pAnimator);
        if(ani)
        {
            SStringW strColor;
            SColor cr(ani->getValue());
            strColor.Format(L"RGBA(%d,%d,%d,%d)",cr.r,cr.g,cr.b,cr.a);
            pTst->SetAttribute(L"colorBkgnd",strColor);
        }
    }
}

咱們首先找到tree_test這個控件，在這個動畫過程當中，咱們經過動畫得到一個顏色值，再用這個顏色值來改變tree_test的背景顏色。這裏實際上至關於實現了一個Android的屬性動畫。

最後，在動畫完成的時候，咱們作下面的處理：

void CMainDlg::onAnimationEnd(IValueAnimator * pAnimator)
{
    SWindow *pTst = FindChildByName(L"tree_test");
    if(pTst)
    {
        pTst->SetAttribute(L"colorBkgnd",L"RGBA(255,255,255,0)");//set invalid colorBkgnd
        pAnimator->Release();
    }
}

在這裏，咱們把tree_test的背景色恢復成不使用背景，再調用pAnimator->Release()來釋放數據動畫對象。

下面看一下數值動畫運行的效果。

 

這是一個簡單的數據動畫的demo，雖然例子很簡單，實際上用戶可使用它完成各類任務，這裏再也不一一舉例。

 

啓程軟件  2019年8月4日