ssRender引擎_sequenceImage控件使用

此控件用来处理序列Image切换显示，应用场景：菜单切换, 提示报警切换，里程数字变化等等，下面以Trip小计里程数字切换为例，介绍一下sequenceImage的使用。TRIP 最多显示3位数字(暂不显示小数部分)

 

图层设计:

 

关键部分代码如下:

         //Trip

         Layer* layerTrip = new Layer;

 

         Item* item_trip = new Item;

         item_trip->setArea(50, 50, 240, 230);

         layerTrip->addItem(item_trip);

         item_trip->setScale(1.0);

 

 

         Item* item_tripImg = new Item;

         item_tripImg->initialize();

         item_trip->addChild(item_tripImg);

         item_tripImg->setArea(0, 0, 0, 0);

         item_tripImg->setSource((resPath + "trip.png").c_str());

 

         SeqImage* trip_100 = new SeqImage;

         item_trip->addChild(trip_100);

         //trip_100->setScale(1.1);

         trip_100->setArea(80, 0, 24, 23);

         trip_100->addImage((resPath + "number_0.png").c_str(), true);

         trip_100->addImage((resPath + "number_1.png").c_str(), true);

         trip_100->addImage((resPath + "number_2.png").c_str(), true);

         trip_100->addImage((resPath + "number_3.png").c_str(), true);

         trip_100->addImage((resPath + "number_4.png").c_str(), true);

         trip_100->addImage((resPath + "number_5.png").c_str(), true);

         trip_100->addImage((resPath + "number_6.png").c_str(), true);

         trip_100->addImage((resPath + "number_7.png").c_str(), true);

         trip_100->addImage((resPath + "number_8.png").c_str(), true);

         trip_100->addImage((resPath + "number_9.png").c_str(), true);

         trip_100->setCurrentIndex(6);

         trip_100->setTransition(Bottom2Top, 300, EasingType_easeOutBack);

         m_trip100 = trip_100;

 

         SeqImage* trip_10 = new SeqImage;

         item_trip->addChild(trip_10);

         trip_10->setArea(105, 0, 24, 23);

         trip_10->addImage((resPath + "number_0.png").c_str(), true);

         trip_10->addImage((resPath + "number_1.png").c_str(), true);

         trip_10->addImage((resPath + "number_2.png").c_str(), true);

         trip_10->addImage((resPath + "number_3.png").c_str(), true);

         trip_10->addImage((resPath + "number_4.png").c_str(), true);

         trip_10->addImage((resPath + "number_5.png").c_str(), true);

         trip_10->addImage((resPath + "number_6.png").c_str(), true);

         trip_10->addImage((resPath + "number_7.png").c_str(), true);

         trip_10->addImage((resPath + "number_8.png").c_str(), true);

         trip_10->addImage((resPath + "number_9.png").c_str(), true);

         trip_10->setCurrentIndex(0);

         trip_10->setTransition(Bottom2Top, 300, EasingType_easeOutBack);

         m_trip10 = trip_10;

 

         SeqImage* trip_1 = new SeqImage;

         item_trip->addChild(trip_1);

         trip_1->setScale(2.0);

         trip_1->setArea(130, 0, 24, 23);

         trip_1->addImage((resPath + "number_0.png").c_str(), true);

         trip_1->addImage((resPath + "number_1.png").c_str(), true);

         trip_1->addImage((resPath + "number_2.png").c_str(), true);

         trip_1->addImage((resPath + "number_3.png").c_str(), true);

         trip_1->addImage((resPath + "number_4.png").c_str(), true);

         trip_1->addImage((resPath + "number_5.png").c_str(), true);

         trip_1->addImage((resPath + "number_6.png").c_str(), true);

         trip_1->addImage((resPath + "number_7.png").c_str(), true);

         trip_1->addImage((resPath + "number_8.png").c_str(), true);

         trip_1->addImage((resPath + "number_9.png").c_str(), true);

         trip_1->setCurrentIndex(0);

         trip_1->setTransition(Bottom2Top, 300, EasingType_easeOutBack);

         m_trip1 = trip_1;

 

          addLayer(layerTrip);

 

这里重点介绍一下Transition效果，ssRender引擎内部支持以下几种Transition效果：Back2Front/ Front2Back/ Left2Right/ Right2Left/ Top2Bottom/ Bottom2Top

同时可以通过EasingType的设定来添加缓动效果，具体参见函数setTransition

以Trip为例，设置了Bottom2Top+ EasingType_easeOutBack，效果如下：

另外再看一个菜单切换的应用，使用了Left2Right+ EasingType_easeOutBack效果组合