接着上一章写目的是让我们的小猫(实际项目可以换成圆点)不断地放大缩小来实现闪烁的功能
如果我们以js的思想来做肯定是要做一个定时器,这里pixi给我们提供了一个类似于计时器的东西ticker,除了用Pixi的ticker去创造一个游戏循环,你还可以使用requestAnimationFrame(个人喜欢ticker,按照个人习惯)
在ticker里有一个delta,delta = (当前帧的时间 - 上一帧的时间) / (1000 / 60); 其中1000是指1000ms,即1秒, 60是1秒种执行60次。 (1000 / 60)就是每秒钟执行60次,帧与帧之前的平均时间间隔。
上代码:
init(){ let app = new PIXI.Application({ width: 500, height: 500, antialias: true, transparent: false, resolution: 1, }); app.stage.alpha=0.5 let url = require('../../assets/cat.png') document.getElementById("pixi").appendChild(app.view); app.loader .add(url) .load(setup) function setup(){ const cat=new PIXI.Sprite(app.loader.resources[url].texture) app.stage.addChild(cat) cat.position.set(200,200) cat.anchor.set(0.5) cat.scale.set(0.5) app.ticker.add((delta)=>{ if(cat.scale.x>0.5){ cat.scale.set(0.01) } cat.scale.set(cat.scale.x+(delta/100)) }) } },
让我们看看新添加了什么,首先我们将精灵位置调整了一下,放到了200,200的位置,然后我们通过sacle属性来放大缩小,因为我们图片比较大,缩放到0.5才到正常大小,然后接着设置轴点来控制放大缩小的原点在哪,轴点大小为0到1之间。最后在ticker里设置缩放的级别实现闪烁。
效果图:没gif图只能截取两张最大最小时的图片
总结:在实际项目中我们把这个图片变成小圆点然后就实现闪烁的功能,精灵还有一个属性alpha,我们也可以改变透明度来实现闪烁原理都一样,感兴趣的小伙伴可以自己实践一下。