点击换头像

var app = new PIXI.Application(500,800);
document.body.appendChild(app.view);

var bg = new PIXI.Sprite.fromImage("res/lianxi/findFace/bg.png");
app.stage.addChild(bg);


//文本样式
var style = {
    font : '20px 微软雅黑',//加粗 倾斜 字号 字体名称
    fill : '#F7EDCA',//颜色
    stroke : '#4a1850',//描边颜色
    strokeThickness : 3,//描边宽度
    dropShadow : true,//开启阴影
    dropShadowColor : '#000000',//阴影颜色
    dropShadowAngle : Math.PI / 6,//阴影角度
    dropShadowDistance : 2,//投影距离
};

//文本
var str = "点击头像进行反转";
//创建文本
var timeTxt = new PIXI.Text(str,style);
app.stage.addChild(timeTxt);
timeTxt.x = 180;
timeTxt.y = 30;

//开始按钮
var headPic = new PIXI.Sprite.fromImage("res/lianxi/findFace/1.png");
headPic.x = 250;
headPic.y = 350;
headPic.anchor.set(0.5, 0.5);
app.stage.addChild(headPic);

var d;
var a=false;
headPic.interactive = true;
headPic.on("click",aaa1);
function aaa1(){
    d = Math.round(Math.random()*19+1);
    // headPic.scale.x = 1;
    // b=0;
    a=true;
}

var arr = [];
for(var i=1;i<=20;i++){
    var wenli = new PIXI.Texture.fromImage("res/lianxi/findFace/"+i+".png");
    arr.push(wenli);
}

var b = 0;
var c = 0.1;
app.ticker.add(aaa2);
function aaa2(){
    if(a===true){

        headPic.scale.x -= c;
        if(b > 0.9){
            headPic.texture = arr[d];
        }
        if(b>1.9){
            a=false;
            b=0;
            headPic.scale.x = 1;
        }
        b += 0.1;
    }

}