PixiJs系列实战课程- 基础篇-02初始化

基础篇

第二章 初始化

这一章是做好一镜到底最关键的一课，打开vscode，确保文件夹和文件的结构跟我本地是否一致，然后开始live-server启动vscode本地服务器。

本地浏览器输入地址

http://127.0.0.1:8080/

2.1 初始化阶段资源：resources.js

2.1.1 创建舞台

    这一步就相当于flash按键盘的ctrl+n，设置了舞台宽度为1344，高度为750
    let app = new PIXI.Application({width: 1344, height: 750});

2.1.2 导入图片资源

    这一步相当于flash，导入了素材
    const loader = new PIXI.loaders.Loader();
    loader.add('bg1', 'imgs/bg1.jpg')
    ......

2.1.3 监听图片加载进度

    target.progress会根据上面图片的多少真实的实现loading效果，返回0~100的小数，然后需要用parseInt()格式化整数。
    loader.on("progress", function(target, resource) {  //加载进度
        console.log(target.progress+"%")
    });

2.1.4 监听图片加载完成事件

loader.once('complete', function(target, resource) {  //加载完成
    document.body.appendChild(app.view)
    
    //初始化场景
      initScenes();
    //初始化精灵
     initSprites();
    //初始化动画
     initAnimation();
    
}
loader.load();  // 开始加载资源

================================================================
这句话document.body.appendChild(app.view)写完，才可以显示舞台
这句话loader.load()写完，才可以监听到加载进度;
complete事件中，完成我们一镜到底要完成的事情

2.2 初始化阶段场景：scenes.js

2.2.1 创建场景需要的数据json

const scenesOptions = [ // 场景数据：定义每个场景的宽高,x/y距离
    {
      name:"scene1",
      x:1000,y:0,
      width:3554,height:750
    },
    {
      name:"scene2",
      x:1000,y:0,
      width:3554,height:750
    }
    .....
 ];
================================================================
name:就是场景的名字
x,y就是它初始化的位置
width,height就是设计稿场景1的宽度和高度

2.2.2 循环场景数据json

const scenes = {};  // 场景集合 - pixi对象

function initScenes(){ // 初始化场景
  for (let i = scenesOptions.length-1; i >= 0 ; i--) {
    scenes[scenesOptions[i].name] = new PIXI.Container({
      width:scenesOptions[i].width,
      height:scenesOptions[i].height
    });
    scenes[scenesOptions[i].name].x = scenesOptions[i].x;
    app.stage.addChild(scenes[scenesOptions[i].name]);
  }
}
=========================================================
这句话如果不封装，其实很好理解就是这么几句话
const scenes = {}; 
scenes.scene1 = new PIXI.Container({
      width:1344,
      height:750
});
scenes.scene1.x = 0;
app.stage.addChild(scenes.scene1);把场景添加到舞台

2.3 初始化阶段精灵：sprites.js

2.3.1 创建精灵需要的数据json

const spritesOptions = [
    {// 第一个场景的精灵
      bg1:{
        position:{x:0,y:0}
      },
      {
          ...
      }
    },
    {// 第二个场景的精灵
      bg1:{
        position:{x:0,y:0}
      },
      {
          ...
      }
    }
]

2.3.2 循环精灵数据json

function initSprites(){  // new出所有精灵对象，并交给函数initSprite分别赋值
    for (let i = 0; i < spritesOptions.length; i++) {
      let obj = spritesOptions[i];
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          sprites[key] = PIXI.Sprite.fromImage(key);
          initSprite(sprites[key],obj[key],i+1);
        }
      }
    }
    initSpecialProp();
  }
  function initSprite(sprite,prop,i){  // 初始化单个精灵的属性并加入对应的场景中
    for (let key in prop) {
      if (prop.hasOwnProperty(key)) {
        sprite[key] = prop[key];
      }
    }
    scenes['scene'+i].addChild(sprite);
  }
  =========================================================
  这句话如果不封装，其实很好理解就是这么几句话
  sprites.bg1 = PIXI.Sprite.fromImage('bg1');
  bg1.position.x = 0;
  bg1.position.y = 0;
  scenes.scenes1.addChild('bg1');把精灵给到场景

2.4 初始化阶段动画：animation.js

2.4.1 创建动画需要的数据json

const animationsOptions = {  // 精灵动画集合
    jzLeft:[{
      delay:0,
      duration:0.11,
      to:{x:600,y:200,ease:Power0.easeNone}
    }],
    jzRight:[{
        delay:0,
        duration:0.11,
        to:{x:1746,y:200,ease:Power0.easeNone}
    }]
}

2.4.2 循环动画数据json

function initAnimation(){
        // delay=0.1 表示滚动到10%开始播放动画
        // duration=0.1 表示运动时间占滚动的百分比
        for (let key in animationsOptions) {
          if (animationsOptions.hasOwnProperty(key)) {
            let obj = animationsOptions[key];
            for (let i = 0; i < obj.length; i++) {
              let act;
              let target;
              if (obj[i].prop) {
                target = sprites[key][obj[i].prop];
              } else {
                target = sprites[key];
              }
              if(obj[i].from & obj[i].to){
                act = TweenMax.fromTo(target,obj[i].duration,obj[i].from,obj[i].to);
              } else if (obj[i].from) {
                act = TweenMax.from(target,obj[i].duration,obj[i].from);
              }else if (obj[i].to) {
                act = TweenMax.to(target,obj[i].duration,obj[i].to);
              }
              let tm = new TimelineMax({delay:obj[i].delay});
              tm.add(act,0);
              tm.play();
              timeline.add(tm,0);
            }
          }
        }
    }
    ===================================================================
    let act;
    let tm;
    
    act = TweenMax.to(scenes.scene1,0.11,{x:2400})
    tm = new TimelineMax({delay:0});
    tm.add(act,0);
    tm.play();
    timeline.add(tm,0);

结束语

到这里就结束啦，下一章解决横竖适配问题，在下一章分享如何通过滑动结合时间控制动画。