ssRender引擎_实例_简单仪表

如果利用ssRender引擎实现一个简单汽车仪表呢？下面给大家详细展开一下：

【UI 构成说明】

1. 表盘地图.png (512x512)
2. 指针.png (512x512)

注意：ssRender目前只支持png格式的图片资源，其他格式请先转换为png格式之后再使用。ssRender的一个理念：不做全的事情，大而全势必要丢失一些东西，发挥最大性能完成专业的事情。

 

【设计】

模块关系：

类关系：

【代码】

#include "ssrender.h"

class example1: public RenderEngineBase {

public:

     example1();

     virtual ~example1();

     virtual int createUI();

     virtual void updateUI();

     virtual void onMessage(MsgData* msg);

     virtual void test(MsgData* msg);

private:

     Item* m_item1;

     bool m_needUpdateFlg;

     MsgData m_msgData;

};

 

重载createUI()完成自定义场景,需要创建两个Item，加载完图片资源之后，加入到Layers里面。

int example1::createUI()

{

     /*get resource path                                                             */

     /*you can set this path before start Engine by funciton Configuation::setConfig*/

     string resPath = Configuation::resourcePath();

 

     /*********Layer creation*************/

     Layer* layer_needle = new Layer;

 

     /*********Background*****************/

     Item* item_bk = new Item;

     item_bk->setID(31);

     item_bk->initialize();

     item_bk->setArea(500, 104, 512, 512); //position&size: (0,0)point is at the left-top of screen.

     item_bk->setSource((resPath + "TachoMeterBg.png").c_str());

     layer_needle->addItem(item_bk);

 

     /*********Needle********************/

     Item* item_needle = new Item;

     item_needle->setID(32);

     item_needle->initialize();

     item_needle->setArea(500, 104, 512, 512);

     item_needle->setSource((resPath + "NeedleBg.png").c_str());

     item_needle->setRotation(135.5);

     layer_needle->addItem(item_needle);

     m_item1 = item_needle;//save in order to  message operation

 

     addLayer(layer_needle);//layer collection

     return EXIT_SUCCESS;

}

 

test()方法完成消息处理功能，在Windows平台处理按键信息，完成车速变化。

这个test()接口主要用来调试使用。

void example1::test(MsgData* msg)

{

     if (msg)

     {

          //按F1-F7按键改变速度指针位置

          if (msg->param.key >= VK_F1 && msg->param.key <= VK_F9)

          {

               int speed = (msg->param.key - VK_F1);

               float angle = speed * 260.0 / 13;

 

               //方式1:触发动画，缓动效果easeOutCubic

               m_item1->startAnimation(PROPERTY_ROTATION, 136.0 - angle, 3000, EasingType_easeOutCubic);

          }

     }

}

 

【动画使用方式】

方式一:startAimation函数

    //! startAnimation

     //- type: property type

     //- from: start position

     //- to:   target position

     //- duration: animation duration(ms)

     //- easingType: easing effect type

     void startAnimation(int type, float from, float to, int duration, int easingType);

 

     //! startAnimation(form current position when you not know this value)

     //- type: property type

     //- to:   target position

     //- duration: animation duration(ms)

     //- easingType: easing effect type

     void startAnimation(int type, float to, int duration, int easingType);

 

 

方式二: bindBehavoir

void bindBehavoir(SSPropertyName name, int duration, int easingType = EasingType_easeNone);

void setPropertyValue(SSPropertyName name, SSPropertyValue value);

 

两种方式特点&区别

方式一，一次只能执行一种类型的动画；方式二，一次可以执行多种类型的动画。

方式二，调用过一次bindBehavoir 之后，之后此Item的该属性就完成了与动画的bind工作，之后通过调用setPropertyValue改变该属性值的时候，会自动执行bind过的动画，要更加方便一些。

 

关于动画系统和属性Bind的使用，之后会再详细展开。