快捷導(dǎo)航

JavaScript?Canvas實(shí)現(xiàn)噪點(diǎn)濾鏡回憶童年電視雪花屏

更新時(shí)間：2022年09月19日 09:20:30 作者：jsmask

這篇文章主要為大家介紹了JavaScript?Canvas實(shí)現(xiàn)噪點(diǎn)濾鏡回憶童年電視雪花屏，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

相信很多人80,90后的同學(xué)對(duì)童年里電視機(jī)的突然出現(xiàn)刺啦刺啦的雪花屏記憶猶新，本期將用 pixi.js 來(lái)完成一個(gè)電視機(jī)播放動(dòng)漫然后突然出現(xiàn)雪花屏的動(dòng)畫(huà)，里面主要講解了如何使用pixi.js播放幀動(dòng)畫(huà)和如何用噪點(diǎn)濾鏡制造雪花屏。

正文

初始化渲染

import * as PIXI from "pixi.js"
const GAME_WIDTH = 800;
const GAME_HEIGHT = 600;
export default class Game {
    constructor(el) {
        this.isOpen = false;
        return this.init(el)
    }
    init(el) {
        this.app = new PIXI.Application({
            width: GAME_WIDTH,
            height: GAME_HEIGHT,
            backgroundColor: 0x000000,
            antialias: true,
            clearBeforeRender: true,
            antialias: true,
            autoDensity: true,
            resolution: window.devicePixelRatio || 1,
        });
        el.appendChild(this.app.view);
        this.loader = new PIXI.Loader();
        this.loader
            .add("tv", "./assets/SnowflakeScreen/TV.png")
            .load(this.render.bind(this))
        return this;
    }
    render(loader, resources) {
        // 渲染
        this.resources = resources; 
        // 創(chuàng)建容器
        this.container = new PIXI.Container();
        this.container.interactive = true;
        this.container.buttonMode = true;
        this.app.stage.addChild(this.container);
        this.tv = this.drawTV();
        this.container.addChild(this.tv);
    }
    drawTV() {
        // 繪制電視機(jī)
        let tv = PIXI.Sprite.from(this.resources.tv.texture);
        tv.anchor.set(0.5);
        tv.position.set(GAME_WIDTH / 2, GAME_HEIGHT / 2)
        tv.scale.set(.7, .7)
        tv.zIndex = 9;
        return tv;
    }
}

初始化就是創(chuàng)建 pixi.js 應(yīng)用，然后把生成后的視圖追加到要傳入的 el 元素節(jié)點(diǎn)上。這里我們還要先加載一張電視機(jī)png格式的圖片。加載完這張圖后，我們才會(huì)執(zhí)行 render 方法進(jìn)行渲染。先創(chuàng)建主容器 container 并添加到場(chǎng)景舞臺(tái)中，同時(shí)開(kāi)啟 interactive 為了可以給他下面的元素設(shè)置 zIndex 來(lái)改變圖層優(yōu)先級(jí)。然后就用剛加載的電視機(jī)圖片的紋理圖變成圖片精靈添加到主容器中，就這樣電視機(jī)就繪制到屏幕中央了。

雪花屏動(dòng)畫(huà)

實(shí)現(xiàn)雪花屏動(dòng)畫(huà)之前先來(lái)繪制一個(gè)電視屏幕：

export default class Game {
	render(loader, resources) {
        // 渲染
        // ...
        this.noise = this.drawNoise()
        this.noise.visible = true
        this.container.addChild(this.noise);
    }
    drawNoise() {
        let noise = new PIXI.Graphics()
        noise.beginFill(0xffffff, .55)
        noise.drawRect(105, 100, 450, 360)
        noise.zIndex = 1
        return noise;
    }
}

其實(shí)就是一個(gè)簡(jiǎn)單的白色透明矩形矩形放置在電視機(jī)之下。

然后，接下來(lái)就是在這個(gè)半透明矩形上用噪點(diǎn)濾鏡，就可以出現(xiàn)雪花效果：

this.noise.filters = [new PIXI.filters.NoiseFilter(.6, Math.random())]

里面可以傳兩個(gè)值，第一個(gè)值代表了噪聲強(qiáng)度應(yīng)為范圍[0,1]，第二個(gè)值則是用于噪聲生成的隨機(jī)量，感興趣的可以看它具體的 shader 實(shí)現(xiàn)。

當(dāng)然，現(xiàn)在畫(huà)面雖然是雪花，但是它還不會(huì)動(dòng)，非常簡(jiǎn)單，我們只要在每次渲染時(shí)改變它就好了。

export default class Game {
	render(loader, resources) {
        // 渲染
        // ...
        this.noise.filters = []
        this.app.ticker.add(this.step.bind(this));
    }   
    step() {
        this.noise.filters = [new PIXI.filters.NoiseFilter(.6, Math.random())]
    }
}

幀動(dòng)畫(huà)播放

先要準(zhǔn)備好播放的幀動(dòng)畫(huà)圖片：

export default class Game {
	render(loader, resources) {
        // 渲染
        // ...
       	this.video = this.drawVideo()
        this.container.addChild(this.video);      
    }    
	drawVideo() {
        let textureList = []
        for (let i = 1; i <= 28; i++) {
            let texture = PIXI.Texture.from(`assets/SnowflakeScreen/video/ezgif-frame-${(i + "").padStart(3, 0)}.jpg`);
            textureList.push(texture);
        };
        const video = new PIXI.AnimatedSprite(textureList);
        video.anchor.set(.5, .5)
        video.position.set(GAME_WIDTH / 2, GAME_HEIGHT / 2 - 10)
        video.scale.set(.48, .48)
        video.loop = false;
        video.animationSpeed = .16
        return video;
    }
}

我們把這28張圖片先生成紋理圖，按照順序保存到一個(gè)數(shù)組里面，然后可以把這個(gè)數(shù)組傳入一個(gè)實(shí)例化的 AnimatedSprite 類中，里面可以控制它的大小位置是否循環(huán)或者播放速度等信息，添加到容器里就可以自動(dòng)播放啦。

export default class Game {
	render(loader, resources) {
        // 渲染
        // ...
        this.video.visible = false;
        this.video.onComplete = () => {
            this.video.visible = false;
            this.noise.visible = true
        }
        this.container.on('pointerdown', (e) => {
            if(!this.isOpen){
                this.isOpen = true;
                this.video.visible = true;
                this.noise.visible = false
                this.video.gotoAndPlay(0)
            }
            else{
                this.isOpen = false;
                this.noise.filters.length = 0
                this.video.visible = false;
                this.noise.visible = true;
            }
        })
    }
    step() {
        if(!this.isOpen) return;
        this.noise.filters = [new PIXI.filters.NoiseFilter(.6, Math.random())]
    }
}

最后加入一些邏輯比如播放完開(kāi)啟雪花屏，容器點(diǎn)擊后播放動(dòng)畫(huà)等，非?？焖俚木涂梢詫?shí)現(xiàn)這個(gè)電視機(jī)播放動(dòng)漫然后突然出現(xiàn)雪花屏的動(dòng)畫(huà)效果了。