WebGis——Pixi开发vue项目之实现闪烁点功能（二）-阿里云开发者社区

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

2023-07-12 285

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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))
                  })
                }
          },