《Cocos2d-x-3.2 Lua-tests》文件详解 之 进度条ActionsProgress

顾名思义，ProgressTimer的动画也是一种Action

创建ProgressTimer需要接收一个Sprite做参数，ProgressTimer可以理解为对Sprite的进一步封装。

下面是代码：

 

  1 --
  2 local s = cc.Director:getInstance():getWinSize()
  3 
  4 ------------------------------------
  5 --  SpriteProgressToRadial
  6 ------------------------------------
  7 local function SpriteProgressToRadial()
  8     --布局
  9     local layer = cc.Layer:create()
 10     Helper.initWithLayer(layer)
 11 
 12     --创建进度条动作，2秒钟，飙到100%
 13     local to1 = cc.ProgressTo:create(2, 100)
 14     local to2 = cc.ProgressTo:create(2, 100)
 15 
 16     --用一个精灵 创建进度条
 17     local left = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister1))
 18     --进度条类型：旋转型
 19     left:setType(cc.PROGRESS_TIMER_TYPE_RADIAL)
 20     left:setPosition(cc.p(100, s.height / 2))
 21     
 22     --运行Action,这里用了一个cc.RepeatForever,其实下面那句效果相同。这是ProgressTimer与Sprite的区别
 23     left:runAction(cc.RepeatForever:create(to1))
 24     --left:runAction(to1)
 25     layer:addChild(left)
 26 
 27     local right = cc.ProgressTimer:create(cc.Sprite:create(s_pPathBlock))
 28     right:setType(cc.PROGRESS_TIMER_TYPE_RADIAL)
 29     -- Makes the ridial CCW 反向
 30     right:setReverseDirection(true)
 31     right:setPosition(cc.p(s.width - 100, s.height / 2))
 32     right:runAction(cc.RepeatForever:create(to2))
 33     layer:addChild(right)
 34 
 35     Helper.subtitleLabel:setString("ProgressTo Radial")
 36     return layer
 37 end
 38 
 39 ------------------------------------
 40 --  SpriteProgressToHorizontal
 41 ------------------------------------
 42 --[[
 43 线性进度条,两点：
 44     1、setMidpoint()设置起点，参数类为cc.p()
 45     2、setBarChangeRate()设置进度增长的方向，cc.p()
 46 --]]
 47 local function SpriteProgressToHorizontal()
 48     local layer = cc.Layer:create()
 49     Helper.initWithLayer(layer)
 50 
 51     local to1 = cc.ProgressTo:create(2, 100)
 52     local to2 = cc.ProgressTo:create(2, 100)
 53 
 54     local left = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister1))
 55     left:setType(cc.PROGRESS_TIMER_TYPE_BAR)
 56     
 57     --以下两句密不可分
 58     -- 从x = 0% 的地方为起点，
 59     left:setMidpoint(cc.p(0, 0))
 60     -- 沿x轴增长
 61     left:setBarChangeRate(cc.p(1,0))
 62     
 63     left:setPosition(cc.p(100, s.height / 2))
 64     left:runAction(cc.RepeatForever:create(to1))
 65     layer:addChild(left)
 66 
 67     local right = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister2))
 68     right:setType(cc.PROGRESS_TIMER_TYPE_BAR)
 69     
 70     --以下两句密不可分
 71     --从x = 100%的地方为起点
 72     right:setMidpoint(cc.p(1, 0))
 73     --逆着x轴增长
 74     right:setBarChangeRate(cc.p(1, 0))
 75     
 76     right:setPosition(cc.p(s.width - 100, s.height / 2))
 77     right:runAction(cc.RepeatForever:create(to2))
 78     layer:addChild(right)
 79 
 80     Helper.subtitleLabel:setString("ProgressTo Horizontal")
 81     return layer
 82 end
 83 
 84 ------------------------------------
 85 --  SpriteProgressToVertical
 86 ------------------------------------
 87 --还是线性进度条，只不过setMidpoint()和setBarChangeRage()不同，多感受一下这两个方法吧
 88 --顺便提一下，场景过度cc.Transition中有一种cc.TransitionFadeBL的过渡动画，就是用这两个方法配合格子动画做到的
 89 local function SpriteProgressToVertical()
 90     local layer = cc.Layer:create()
 91     Helper.initWithLayer(layer)
 92 
 93     local to1 = cc.ProgressTo:create(2, 100)
 94     local to2 = cc.ProgressTo:create(2, 100)
 95 
 96     local left = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister1))
 97     left:setType(cc.PROGRESS_TIMER_TYPE_BAR)
 98 
 99     left:setMidpoint(cc.p(0,0))
100     left:setBarChangeRate(cc.p(0, 1))
101     
102     left:setPosition(cc.p(100, s.height / 2))
103     left:runAction(cc.RepeatForever:create(to1))
104     layer:addChild(left)
105 
106     local right = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister2))
107     right:setType(cc.PROGRESS_TIMER_TYPE_BAR)
108     
109     right:setMidpoint(cc.p(0, 1))
110     right:setBarChangeRate(cc.p(0, 1))
111     
112     right:setPosition(cc.p(s.width - 100, s.height / 2))
113     right:runAction(cc.RepeatForever:create(to2))
114     layer:addChild(right)
115 
116     Helper.subtitleLabel:setString("ProgressTo Vertical")
117     return layer
118 end
119 
120 ------------------------------------
121 --  SpriteProgressToRadialMidpointChanged
122 ------------------------------------
123 local function SpriteProgressToRadialMidpointChanged()
124     local layer = cc.Layer:create()
125     Helper.initWithLayer(layer)
126 
127     local action = cc.ProgressTo:create(2, 100)
128 
129     -- Our image on the left should be a radial progress indicator, clockwise
130     local left = cc.ProgressTimer:create(cc.Sprite:create(s_pPathBlock))
131     
132     --旋转型进度，可设置中心点的位置
133     --将ProgressTimer看成是左下角坐标为(0,0),右上角为(1,1)的图形，你可以随便在这里面挑一个坐标为中心点
134     --需要注意的是：不要取到边框上的点
135     left:setType(cc.PROGRESS_TIMER_TYPE_RADIAL)
136     left:setMidpoint(cc.p(0.5, 0.75))
137     
138     left:setPosition(cc.p(100, s.height / 2))
139     left:runAction(cc.RepeatForever:create(cc.ProgressTo:create(2, 100)))
140     layer:addChild(left)
141 
142     -- Our image on the left should be a radial progress indicator, counter clockwise
143     local right = cc.ProgressTimer:create(cc.Sprite:create(s_pPathBlock))
144     right:setType(cc.PROGRESS_TIMER_TYPE_RADIAL)
145     right:setMidpoint(cc.p(0.1, 0.9))
146 
147     --[[
148        Note the reverse property (default=NO) is only added to the right image. That's how
149        we get a counter clockwise progress.
150     ]]
151     right:setPosition(cc.p(s.width - 100, s.height / 2))
152     right:runAction(cc.RepeatForever:create(cc.ProgressTo:create(2, 100)))
153     layer:addChild(right)
154 
155     Helper.subtitleLabel:setString("Radial w/ Different Midpoints")
156     return layer
157 end
158 
159 ------------------------------------
160 --  SpriteProgressBarVarious
161 ------------------------------------
162 --还是线性进度不过是setMidpoint()和setBarChangeRate()设置的位置不同而已，不多说
163 local function SpriteProgressBarVarious()
164     local layer = cc.Layer:create()
165     Helper.initWithLayer(layer)
166 
167     local to = cc.ProgressTo:create(2, 100)
168 
169     local left = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister1))
170     left:setType(cc.PROGRESS_TIMER_TYPE_BAR)
171 
172     -- Setup for a bar starting from the bottom since the midpoint is 0 for the y
173     left:setMidpoint(cc.p(0.5, 0.5))
174     -- Setup for a vertical bar since the bar change rate is 0 for x meaning no horizontal change
175     left:setBarChangeRate(cc.p(1, 0))
176     left:setPosition(cc.p(100, s.height / 2))
177     left:runAction(cc.RepeatForever:create(cc.ProgressTo:create(2, 100)))
178     layer:addChild(left)
179 
180     local middle = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister2))
181     middle:setType(cc.PROGRESS_TIMER_TYPE_BAR)
182     -- Setup for a bar starting from the bottom since the midpoint is 0 for the y
183     middle:setMidpoint(cc.p(0.5, 0.5))
184     -- Setup for a vertical bar since the bar change rate is 0 for x meaning no horizontal change
185     middle:setBarChangeRate(cc.p(1, 1))
186     middle:setPosition(cc.p(s.width/2, s.height/2))
187     middle:runAction(cc.RepeatForever:create(cc.ProgressTo:create(2, 100)))
188     layer:addChild(middle)
189 
190     local right = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister2))
191     right:setType(cc.PROGRESS_TIMER_TYPE_BAR)
192     -- Setup for a bar starting from the bottom since the midpoint is 0 for the y
193     right:setMidpoint(cc.p(0.5, 0.5))
194     -- Setup for a vertical bar since the bar change rate is 0 for x meaning no horizontal change
195     right:setBarChangeRate(cc.p(0, 1))
196     right:setPosition(cc.p(s.width-100, s.height/2))
197     right:runAction(cc.RepeatForever:create(cc.ProgressTo:create(2, 100)))
198     layer:addChild(right)
199 
200     Helper.subtitleLabel:setString("ProgressTo Bar Mid")
201     return layer
202 end
203 
204 ------------------------------------
205 --  SpriteProgressBarTintAndFade
206 ------------------------------------
207 --线性进度条。进度条中加入其他Action，注意，这个例子有亮点
208 --进度Action 和普通Action在同一进度条上面可以同时播放/////////，不讲究顺序，即便不用前面提到的Spawn
209 local function SpriteProgressBarTintAndFade()
210     local layer = cc.Layer:create()
211     Helper.initWithLayer(layer)
212 
213     local to = cc.ProgressTo:create(6, 100)
214     local tint = cc.Sequence:create(cc.TintTo:create(1, 255, 0, 0), cc.TintTo:create(1, 0, 255, 0), cc.TintTo:create(1, 0, 0, 255))
215     local fade = cc.Sequence:create(cc.FadeTo:create(1.0, 0),cc.FadeTo:create(1.0, 255))
216     local left = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister1))
217     left:setType(cc.PROGRESS_TIMER_TYPE_BAR)
218 
219     -- Setup for a bar starting from the bottom since the midpoint is 0 for the y
220     left:setMidpoint(cc.p(0.5, 0.5))
221     -- Setup for a vertical bar since the bar change rate is 0 for x meaning no horizontal change
222     left:setBarChangeRate(cc.p(1, 0))
223     
224     left:setPosition(cc.p(100, s.height / 2))
225     
226     --进度Action 和普通Action在同一进度条上面可以同时播放/////////，即便讲究顺序，即便不用前面提到的Spawn
227     left:runAction(cc.RepeatForever:create(cc.ProgressTo:create(6, 100)))
228     left:runAction(cc.RepeatForever:create(cc.Sequence:create(cc.TintTo:create(1, 255, 0, 0), cc.TintTo:create(1, 0, 255, 0), cc.TintTo:create(1, 0, 0, 255))))
229     
230     layer:addChild(left)
231     left:addChild(cc.Label:createWithTTF("Tint", "fonts/Marker Felt.ttf", 20.0))
232 
233     local middle = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister2))
234     middle:setType(cc.PROGRESS_TIMER_TYPE_BAR)
235     -- Setup for a bar starting from the bottom since the midpoint is 0 for the y
236     middle:setMidpoint(cc.p(0.5, 0.5))
237     -- Setup for a vertical bar since the bar change rate is 0 for x meaning no horizontal change
238     middle:setBarChangeRate(cc.p(1, 1))
239     middle:setPosition(cc.p(s.width / 2, s.height / 2))
240     middle:runAction(cc.RepeatForever:create(cc.ProgressTo:create(6, 100)))
241 
242     local fade2 = cc.Sequence:create(cc.FadeTo:create(1.0, 0), cc.FadeTo:create(1.0, 255))
243     middle:runAction(cc.RepeatForever:create(fade2))
244     layer:addChild(middle)
245     middle:addChild(cc.Label:createWithTTF("Fade", "fonts/Marker Felt.ttf", 20.0))
246 
247     local right = cc.ProgressTimer:create(cc.Sprite:create(s_pPathSister2))
248     right:setType(cc.PROGRESS_TIMER_TYPE_BAR)
249     -- Setup for a bar starting from the bottom since the midpoint is 0 for the y
250     right:setMidpoint(cc.p(0.5, 0.5))
251     -- Setup for a vertical bar since the bar change rate is 0 for x meaning no horizontal change
252     right:setBarChangeRate(cc.p(0, 1))
253     right:setPosition(cc.p(s.width - 100, s.height / 2))
254     right:runAction(cc.RepeatForever:create(cc.ProgressTo:create(6, 100)))
255     right:runAction(cc.RepeatForever:create(cc.Sequence:create(cc.TintTo:create(1, 255, 0, 0), cc.TintTo:create(1, 0, 255, 0), cc.TintTo:create(1, 0, 0, 255))))
256     right:runAction(cc.RepeatForever:create(cc.Sequence:create(cc.FadeTo:create(1.0, 0), cc.FadeTo:create(1.0, 255))))
257     layer:addChild(right)
258 
259     right:addChild(cc.Label:createWithTTF("Tint and Fade", "fonts/Marker Felt.ttf", 20.0))
260 
261     Helper.subtitleLabel:setString("ProgressTo Bar Mid")
262     return layer
263 end
264 
265 ------------------------------------
266 --  SpriteProgressWithSpriteFrame
267 ------------------------------------
268 --[[
269     给精灵的帧加上进度动作，其实跟前面给单独的精灵加进度动作一样的
270     这里顺便提一下精灵资源的加载方法：首先加载plist文件，plist其实是一个xml类型的文件，
271     它对应有一个大的png图片，图片上包含了每个精灵的小图片，plist文件里面保存的就是如何切这个大png图片
272     的信息，当然还有每个精灵的各种属性
273     后面要创建精灵的话，用cc.Sprite:createWithSpriteFrameName()传入小图片的名称，直接从缓存中读取图片
274     创建精灵
275     
276     你也许会有疑问？大图片是怎么来的，是用相关工具将多张小图片合成的，
277     为什么要合成大图片呢？因为一张图片（俗称纹理）的加载过程，耗去的内存是图片本身大小的将近4倍！所以主要
278     耗内存的不是纹理大小，而是纹理的加载，因此，较少纹理的加载次数，是至关重要的。实际工作中，通常将会在一起
279     使用的多张小图合成一张大图，然后用plist来管理，一次性加载，达到节省内存的目的。
280 --]]
281 
282 local function SpriteProgressWithSpriteFrame()
283     local layer = cc.Layer:create()
284     Helper.initWithLayer(layer)
285 
286     local to = cc.ProgressTo:create(6, 100)
287     --将精灵帧文件加载到缓存中，（（什么是缓存？有是必要和技巧？后面慢慢讲
288     cc.SpriteFrameCache:getInstance():addSpriteFrames("zwoptex/grossini.plist")
289 
290     local left = cc.ProgressTimer:create(cc.Sprite:createWithSpriteFrameName("grossini_dance_01.png"))
291     left:setType(cc.PROGRESS_TIMER_TYPE_BAR)
292     -- Setup for a bar starting from the bottom since the midpoint is 0 for the y
293     left:setMidpoint(cc.p(0.5, 0.5))
294     -- Setup for a vertical bar since the bar change rate is 0 for x meaning no horizontal change
295     left:setBarChangeRate(cc.p(1, 0))
296     left:setPosition(cc.p(100, s.height / 2))
297     left:runAction(cc.RepeatForever:create(cc.ProgressTo:create(6, 100)))
298     layer:addChild(left)
299 
300     local middle = cc.ProgressTimer:create(cc.Sprite:createWithSpriteFrameName("grossini_dance_02.png"))
301     middle:setType(cc.PROGRESS_TIMER_TYPE_BAR)
302     -- Setup for a bar starting from the bottom since the midpoint is 0 for the y
303     middle:setMidpoint(cc.p(0.5, 0.5))
304     -- Setup for a vertical bar since the bar change rate is 0 for x meaning no horizontal change
305     middle:setBarChangeRate(cc.p(1, 1))
306     middle:setPosition(cc.p(s.width / 2, s.height / 2))
307     middle:runAction(cc.RepeatForever:create(cc.ProgressTo:create(6, 100)))
308     layer:addChild(middle)
309 
310     local right = cc.ProgressTimer:create(cc.Sprite:createWithSpriteFrameName("grossini_dance_03.png"))
311     right:setType(cc.PROGRESS_TIMER_TYPE_BAR)
312     -- Setup for a bar starting from the bottom since the midpoint is 0 for the y
313     right:setMidpoint(cc.p(0.5, 0.5))
314     -- Setup for a vertical bar since the bar change rate is 0 for x meaning no horizontal change
315     right:setBarChangeRate(cc.p(0, 1))
316     right:setPosition(cc.p(s.width - 100, s.height / 2))
317     right:runAction(cc.RepeatForever:create(cc.ProgressTo:create(6, 100)))
318     layer:addChild(right)
319 
320     Helper.subtitleLabel:setString("Progress With Sprite Frame")
321     return layer
322 end
323 
324 --[[
325     总结：进度条可以理解为对Sprite的进一步封装，并且有自己特有的Action，属性和方法
326     
327     以下是创建一个完整进度条的完整步骤：
328     1、cc.ProgressTimer:create(Sprite)   --对精灵进一步封装，创建一个进度条
329     2、cc.setType()                      --设置进度条类型，1、旋转型，cc.PROGRESS_TIMEER_TYPE_RADIAL；2、条状，cc.PROGRESS_TIMER_TYPE_BAR
330     3、cc.ProgressTo:create(time,Percent)--创建进度条特有的Action：在时间time内飙到Percent
331     4、setReverseDirection(bool)         --（可选）设置进度条的进度方向是否反向
332     5、runAction()                       --简单ProgressTo直接绑定给进度条，或者进一步封装成Sequence或Repeatforever等
333     
334     另外：
335     1、setMidPoint(cc.p(x,x))        --设置起点，旋转型的则是设置中心，
336     2、setBarChangeRate(cc.p(x,x))   --对条状可用，设置进度方法
337 --]]
338 
339 function ProgressActionsTest()
340     local scene = cc.Scene:create()
341 
342     Helper.createFunctionTable = {
343         SpriteProgressToRadial,
344         SpriteProgressToHorizontal,
345         SpriteProgressToVertical,
346         SpriteProgressToRadialMidpointChanged,
347         SpriteProgressBarVarious,
348         SpriteProgressBarTintAndFade,
349         SpriteProgressWithSpriteFrame
350     }
351     scene:addChild(SpriteProgressToRadial())
352     scene:addChild(CreateBackMenuItem())
353 
354     cc.Director:getInstance():replaceScene(scene)
355 end

 

posted on 2014-08-13 12:19  _Ernest  阅读(1698)  评论(0)    收藏  举报

导航