跑马灯是一种把文字从左向右或从右向左移动,然后到某一个固定位置消息的技术。
实现起来还是挺简单的,实现的思路如下:
1 创建一个要显示的区域(矩形)
2 创建一个裁剪结点,把要显示的区域设置为模板
3 把要显示的文本放到裁剪结点中,并让它以一定的速度从右向左移动。
利用clippingnode可以制作出许多遮挡效果,跑马灯就是其中一种。
--用四个点围成一个矩形 local w = display.width - 20 local height = 30 local startX = 0 local startY = 0 local verts = { {startX,startY},{w,height},{startX,height} } -- 构造矩node和裁剪node local drawNode = CCDrawNode:create() drawNode:drawPolygon(verts,ccc4f(255,255,100),1,ccc4f(0,100)) local clipNode = CCClippingNode:create() clipNode:setStencil(drawNode) clipNode:setPosition(ccp(50,50)) clipNode:addTo(self) self.lab_text = cc.ui.UILabel.new({text = "跑马灯测试测试",size = 20,color = display.COLOR_WHITE}) self.lab_text:align(display.BOTTOM_LEFT,width - 50,10) self.lab_text:addTo(clipNode) self.handleScrollText = scheduler.scheduleGlobal(handler(self,self._onInterval),0.1) function MainScene:_onInterval(dt) local w = self.lab_text:getContentSize().width local x = self.lab_text:getPositionX() if x <= -w then scheduler.unscheduleGlobal(self.handleScrollText) return end self.lab_text:setPositionX(x - self.speed) end
这样子整个跑马灯所需要的元素就都OK了
注意,整个控件都是以0,0点作为锚点的,这样子放起来习惯些。