I have been trying to achieve the following animation using JavaScript.
The second text should come from the bottom of the parent and slide up the existing text.
I tried to achieve it using two different labels by placing the second label below the parent and using MoveBy to move the position of both the labels.
But I couldn’t make the labels invisible after it is out of the parent’s area.
Note: I am trying to run the game in browser.
I am struggling to achieve this for past 2 weeks. Kindly help me out.
Thanks in advance.
var l = 60;
// create stancil for clipping node
var stencil = new cc.DrawNode();
stencil.drawRect(cc.p(0, 0), cc.p(100, l), cc.color(128, 0, 0), 1, cc.color(128, 0, 0));
var clip = new cc.ClippingNode(stencil);
this.addChild(clip);
clip.setPosition(100,100);
var one = new cc.LabelTTF("11", "Arial", l);
var two = new cc.LabelTTF("11", "Arial", l);
// add element to clipping node
clip.addChild(one);
clip.addChild(two);
one.setPosition(50,l/2);
two.setPosition(50,-l/2);
var sprite_action = cc.MoveTo.create(1, cc.p(50, l + l/2));
var sprite_action2 = cc.MoveTo.create(1, cc.p(50, l/2));
// animate sprite
one.runAction(sprite_action);
two.runAction(sprite_action2);
