美文网首页
LayaBox:使用遮罩实现进度条

LayaBox:使用遮罩实现进度条

作者: 一眼就认出你 | 来源:发表于2019-09-27 15:30 被阅读0次

一、进度条的实现

第一步:设置精度条的背景图片,设置width=X; 精度条背景图片.png
第二步:设置精度条的遮罩图片,设置width=X; 精度条背景遮罩图片.png

第三步:在精度条的遮罩图片下面设置精度条进度图片,宽度随意;

精度条背景进度图片.png
注意skin和renderType的设置
第四步:代码
private function updateProgressBar(playAnim:Boolean = true,p:Number):void{
        var max:Number =540;    //进度条的宽度
//P:为进度比如0.1
        if(playAnim){
            Tween.to(_ui.bar,{"width":max*p},1000);
        }else{
            _ui.bar.width = max*p;
        }               
}       

相关文章

网友评论

      本文标题:LayaBox:使用遮罩实现进度条

      本文链接:https://www.haomeiwen.com/subject/dqyzectx.html