简单使用两个单色精灵 宽度设成500  ,父级单色精灵只是用来当作参考物   

cocos creator 动画帧进度条动画

cocos creator 动画帧进度条动画

修改子节点node属性 anchor 节点基点位置,将子节点完全重合在父节点上,宽度减少会从右往左减少,可以试着修改宽度来看效果

cocos creator 动画帧进度条动画

cocos creator 动画帧进度条动画

然后制作动画,给子节点添加动画组建

cocos creator 动画帧进度条动画

编辑动画帧文件,选择width 0秒时为500 ,2秒时为0  

cocos creator 动画帧进度条动画

效果就是从width 500-0

cocos creator 动画帧进度条动画

 

可以通过修改子节点node属性 anchor 节点基点位置来 根据自己的需求,达到进度条效果

从左到右   1 

从右到左   0

两边渐减至中间 0.5

 

 

相关文章: