Write sequence frame animation with shader

forehead , If you're free, then write a simple sequence frame animation ... This is really a strange idea , But very practical hahaha .
Art give you a picture , That's about it

Then let's talk about the general idea ：

Divide the picture into 12 Equal division ,, One sample at a time , Pictured above , according to 1,2,3,4… Sequential sampling display ; Just pass in a start coordinate ;

//effect Code 
void main () {
    vec4 o = vec4(1, 1, 1, 1);
    float unit = 0.25;
    float unitY = 1.0/3.0;
    #if USE_TEXTURE
        vec2 uv =  vec2(v_uv0.x * unit + uRangeData.x  ,v_uv0.y * unitY + ( unitY * 2.0 - uRangeData.y));
        CCTexture(texture, uv, o);
    #endif

ts Code ：
export default class NewClass extends cc.Component {

    private uRangeData:cc.Vec2 = new  cc.Vec2();
    private _material:cc.Material = null;
    private _rotAllTime:number= 0.05;
    private _rotTime:number = 0;
    private _unitWidth:number = 0.25;
    private _unitLastPos:cc.Vec2 = new cc.Vec2(0.5,0.5);

    start () {
        this.uRangeData.x = 0;
        this.uRangeData.y = 0;
        let sp = this.node.getComponent(cc.Sprite);       
        this._material = sp.getMaterial(0);
        this._material.setProperty("uRangeData", this.uRangeData);
        sp.setMaterial(0, this._material);
    }

    update (dt) {
        this._rotTime += dt;
        if(this._rotTime>=this._rotAllTime){
            this._rotTime = 0;
            this.uRangeData.x += this._unitWidth;
            if(this.uRangeData.x >= 1){  // Cross to the last 
                this.uRangeData.y += this._unitWidth;
                this.uRangeData.x = 0;
            }
            if (this.uRangeData.x == this._unitLastPos.x && this.uRangeData.y == this._unitLastPos.y) {  // It's the last one , Start from scratch 
                this.uRangeData.x = 0;
                this.uRangeData.y = 0;
            }
            this._material.setProperty("uRangeData", this.uRangeData);
        }
    }
}

The effect is as follows ：