在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日