如果利用ssRender引擎实现一个简单汽车仪表呢？下面给大家详细展开一下：
【UI 构成说明】
- 表盘地图.png (512x512)
- 指针.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的使用，之后会再详细展开。