Cocos Creator 开发实战——万物皆可进度条

Cocos Creator 开发实战——万物皆可进度条

       在实际工作中会遇见各种各样的需求，只要用到进度条，则可以使用本篇独特方法。需求任它皮，本篇全搞定。
       普通进度条效果：用进度条组件即可实现

       本篇讲所有图片都能做成进度条 国际惯例先上效果

原理

       要实现这种特殊需求不能走寻常路，不用进度条组件，改变 sprite组件 属性实现进度条功能。
       sprite组件 的类型选择FILLED(填充模式)，填充类型选择RADIAL(饼形)，填充中心点选择图片中间(x:0.5,y:0.5)。设置完即可实现使一张要做成进度条的图片以图片中心为圆点慢慢出现或者消失。

       属性基础知识：

实战

• 拖入节点，设置属性：FillStart==0.25 是从正上方开始
  
• 创建js脚本挂载在Canvas节点下，拖入节点

	properties: {
	    m_frame: cc.Node,
	},

• 计时器实现进度条效果

    onLoad () {
    	//获得m_frame节点上的 Sprite组件
        let	fillPic = this.m_frame.getComponent(cc.Sprite)
        for (let i = 0; i <= 100; i++) {
            this.scheduleOnce(function() {
                //对Sprite组件上的属性修改
                fillPic .fillRange -= 0.01
                if (fillPic .fillRange < 0) {
                    fillPic .fillRange = 0
                }
            },( 4/100)* i)
        }
    },

• 结果
  
  教程到这结束了，有了这篇文章，大家可以少走坑路，希望大家有所收获！

       更多实战教程和源码可以关注微信公众号，需要本篇的资源请回复关键字：进度条。

       github：https://github.com/creatorHY/blog_bar.git