PixiJs系列實戰課程- 基礎篇-05.1製做字幕

基礎篇

製做字幕

動畫中不免會用到文字，當前你能夠用圖片來實現，不過若是是每行或者說每一個字的運動的話，就須要學習一下PIXI.Text，用起來也不是很複雜

const w = document.body.clientWidth,
              h = document.body.clientHeight
        var app = new PIXI.Application(w, h, {
            backgroundColor: 0x000000
        });
    document.body.appendChild(app.view);
 
    var style = {
        fontFamily: 'Arial',
        fontSize: '36px',
        fontStyle: 'italic',
        align:'center',
        lineHeight:48,
        fontWeight: 'bold',
        fill: '#F7EDCA',
        stroke: '#000000',
        strokeThickness: 5,
        dropShadow: true,
        dropShadowColor: '#ffffff',
        dropShadowAngle: Math.PI / 6,
        dropShadowDistance: 6,
        wordWrap: true, //是否容許換行
        wordWrapWidth: 440 //換行執行寬度
    };
    
    var richText = new PIXI.Text('你們好！\n歡迎學習pixiJs', style);
    richText.x = 35;
    richText.y = 20;
    app.stage.addChild(richText);
複製代碼

效果以下：

如何應用到項目

首先在精靈裏綁定這個文字，而後加入場景，在動畫中應用以前的機制讓他動，最後在結合着時間軸讓他運動起來。 代碼以下

let style1 = new PIXI.TextStyle({
    fontFamily: 'SourceHanSansSC-Normal',
  	align:'center',
    fontSize: 43,
  	lineHeight:66,
    fill: ['#ffffff'], // gradient
    wordWrap: true,
    wordWrapWidth: 500
  });
  sprites.text1 = new PIXI.Text('xxxx',style1);
  sprites.text1.x = 840;
  sprites.text1.y = sprites.text.height+sprites.text.y;
  scenes.scene7.addChild(sprites.text,sprites.text1);

 text:[{
    delay:0.88,
    duration:0.07,
    from:{alpha:0}
  },{
    delay:0.88,
    duration:0.07,
    from:{y:-200}
  }]
複製代碼

結束語

下節課怎麼就實戰一個小例子，結合着上面全部的語法制做一個簡單版一鏡到底。