WebGis——Pixi开发vue项目之实现闪烁点功能（二）

接着上一章写目的是让我们的小猫（实际项目可以换成圆点）不断地放大缩小来实现闪烁的功能

如果我们以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，我们也可以改变透明度来实现闪烁原理都一样，感兴趣的小伙伴可以自己实践一下。