先看一下效果，然后再一一分析

res.gif

縮放

縮放主要改變頂點坐標(biāo)的位置，和片元中的紋理沒有太直接的關(guān)系，我們讓圖片，先放大，再縮小，再放大，再縮小，這樣一個循環(huán)邏輯。我們引入弧度的正弦值，我們知道弧度在[0,π]范圍正弦值的變化是[0,1,0],我們通過取莫再變化得出此變化規(guī)律

attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;

void main (void) {
    float duration = 0.6;
    float maxAmplitude = 0.3;
    
    float time = mod(Time, duration); //time [0,0.6]
    float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));
//time * (PI / duration) 變化規(guī)律是0到π，然后又0到π
    
    gl_Position = vec4(Position.x * amplitude, Position.y * amplitude, Position.zw);
    TextureCoordsVarying = TextureCoords;
}

//靈魂出竅
靈魂出竅是兩個圖層組合成的，一個圖層是位置紋理不變的，另一個紋理是出竅紋理，圍著中心點，放大淡出。變化規(guī)律，放大淡出一個周期后在放大淡出

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

void main (void) {
    float duration = 0.7;
    float maxAlpha = 0.4;
    float maxScale = 1.8;
    
    float progress = mod(Time, duration) / duration; // 0~1
    float alpha = maxAlpha * (1.0 - progress);
    float scale = 1.0 + (maxScale - 1.0) * progress;
    
    float weakX = 0.5 + (TextureCoordsVarying.x - 0.5) / scale;
    float weakY = 0.5 + (TextureCoordsVarying.y - 0.5) / scale;

    vec2 weakTextureCoords = vec2(weakX, weakY);
    
    vec4 weakMask = texture2D(Texture, weakTextureCoords);
    
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    
    gl_FragColor = mask * (1.0 - alpha) + weakMask * alpha;
}

weakX 和 weakY顯示的是該位置要顯示的紋理坐標(biāo)，
我們可以先計算本該顯示的紋理坐標(biāo)，經(jīng)過放大后的位置
(x -0.5 )*scale + 0.5 = XR；
和該像素疊加的另一紋理是其他地方經(jīng)過放大后的紋理坐標(biāo)，我們知道 讓XR是該像素的坐標(biāo)，計算出和該像素疊加的其他像素紋理是
反推到就是 weakX = 0.5 + (TextureCoordsVarying.x - 0.5) / scale；

抖動濾鏡

顏?偏移 + 微弱的放大效果

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

void main (void) {
//動畫時長
    float duration = 0.7;
//放大
    float maxScale = 1.1;
//紋理坐標(biāo)偏移
    float offset = 0.02;
    
    float progress = mod(Time, duration) / duration; // 0~1
//(0,0)->(0.2,0.2)
    vec2 offsetCoords = vec2(offset, offset) * progress;
//[1.0,1.1]
    float scale = 1.0 + (maxScale - 1.0) * progress;
    
//其他地方的坐標(biāo)經(jīng)過放大后顯示該像素的坐標(biāo)
    vec2 ScaleTextureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) / scale;
    //取微小偏移后其他紋理的色值
    vec4 maskR = texture2D(Texture, ScaleTextureCoords + offsetCoords);
    vec4 maskB = texture2D(Texture, ScaleTextureCoords - offsetCoords);
    vec4 mask = texture2D(Texture, ScaleTextureCoords);
    
    gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);
}

閃白

兩個圖層混合，一個紋理圖層，一個白色顏色圖層，一個周期變化是，紋理圖層從alpha值1->0，白色圖層從alpha 值0->1，然后紋理圖層從alpha 0->1,白色圖層alpha值從 1->0

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;

void main (void) {
    float duration = 0.6;
    
    float time = mod(Time, duration);
    
    vec4 whiteMask = vec4(1.0, 1.0, 1.0, 1.0);
    float amplitude = abs(sin(time * (PI / duration)));
    
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    
    gl_FragColor = mask * (1.0 - amplitude) + whiteMask * amplitude;
}

毛刺

具體的思路路是，我們讓每一?像素隨機(jī)偏移 -1 ~ 1 的距離(這?的 -1 ~ 1 是對于紋理坐標(biāo)來說的)，但是如果整個 畫面都偏移?較?的值，那我們可能都看不出原來圖像的樣子。所以我們的邏輯是，設(shè)定一個閾值，小于這個閾值才進(jìn)行偏 移，超過這個閾值則乘上一個縮小系數(shù)。
則最終呈現(xiàn)的效果是:絕大部分的?都會進(jìn)?微?的偏移，只有少量的?會進(jìn)行較?大偏移

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;

float rand(float n) {
    return fract(sin(n) * 43758.5453123);
}

void main (void) {
    float maxJitter = 0.06;
    float duration = 0.3;
    float colorROffset = 0.01;
    float colorBOffset = -0.025;
    
    float time = mod(Time, duration * 2.0); //[0,0.6]
//time * (PI / duration)  [0,2π]
// time [0,0.3]  amplitude值為[0,1,0],time [0.3,0.6] amplitude的值為0
    float amplitude = max(sin(time * (PI / duration)), 0.0);//[0,1]
    // rand() [0,1]   jitter[-1,1]
    float jitter = rand(TextureCoordsVarying.y) * 2.0 - 1.0; // -1~1
// abs(jitter) [0,1]       maxJitter * amplitude [0,0.06]   needOffset很小概率是True 
//周期內(nèi)某一個時間，和特定的 TextureCoordsVarying.y范圍 needOffset為true,所以毛刺位置不發(fā)生變化。
    bool needOffset = abs(jitter) < maxJitter * amplitude;
    
    float textureX = TextureCoordsVarying.x + (needOffset ? jitter : (jitter * amplitude * 0.006));
    vec2 textureCoords = vec2(textureX, TextureCoordsVarying.y);
    
    vec4 mask = texture2D(Texture, textureCoords);
    vec4 maskR = texture2D(Texture, textureCoords + vec2(colorROffset * amplitude, 0.0));
    vec4 maskB = texture2D(Texture, textureCoords + vec2(colorBOffset * amplitude, 0.0));
    
    gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);
}

幻覺

殘影和顏色偏移的疊加
殘影的效果: 是在移動的過程中，每經(jīng)過一段時間隔，根據(jù)當(dāng)前的位置去創(chuàng)建一個新層，并且新層的不透明度隨著時間逐 漸減弱。于是在一個移動周期內(nèi)，可以看到很多透明度不同的層疊加在一起，從?形成殘影的效果。殘影,讓圖片隨著時間 做圓周運動
顏?偏移: 物體移動的過程是藍(lán)色在前面，紅?在后面。所以整個過程可以理解成:在移動的過程中，每間隔一段時間，遺 失了一部分紅色通道的值在原來的位置，并且這部分紅色通道的值，隨著時間偏移，會逐漸恢復(fù).

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;
const float duration = 2.0;

vec4 getMask(float time, vec2 textureCoords, float padding) {
   
    vec2 translation = vec2(sin(time * (PI * 2.0 / duration)),
                            cos(time * (PI * 2.0 / duration)));
    
    vec2 translationTextureCoords = textureCoords + padding * translation;
    vec4 mask = texture2D(Texture, translationTextureCoords);
    
    return mask;
}

float maskAlphaProgress(float currentTime, float hideTime, float startTime) {
    float time = mod(duration + currentTime - startTime, duration);
    return min(time, hideTime);
}

void main (void) {
    float time = mod(Time, duration);
    float scale = 1.2;
  // padding  =1/12
    float padding = 0.5 * (1.0 - 1.0 / scale);
    vec2 textureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) / scale;
    
    float hideTime = 0.9;
    float timeGap = 0.2;
    
    float maxAlphaR = 0.5; // max R
    float maxAlphaG = 0.05; // max G
    float maxAlphaB = 0.05; // max B
    
    vec4 mask = getMask(time, textureCoords, padding);
    float alphaR = 1.0; // R
    float alphaG = 1.0; // G
    float alphaB = 1.0; // B
    
    vec4 resultMask = vec4(0, 0, 0, 0);
    
    for (float f = 0.0; f < duration; f += timeGap) {
        float tmpTime = f;
        vec4 tmpMask = getMask(tmpTime, textureCoords, padding);
        
        //
        float tmpAlphaR = maxAlphaR - maxAlphaR * maskAlphaProgress(time, hideTime, tmpTime) / hideTime;
        float tmpAlphaG = maxAlphaG - maxAlphaG * maskAlphaProgress(time, hideTime, tmpTime) / hideTime;
        float tmpAlphaB = maxAlphaB - maxAlphaB * maskAlphaProgress(time, hideTime, tmpTime) / hideTime;
     
        resultMask += vec4(tmpMask.r * tmpAlphaR,
                           tmpMask.g * tmpAlphaG,
                           tmpMask.b * tmpAlphaB,
                           1.0);
        alphaR -= tmpAlphaR;
        alphaG -= tmpAlphaG;
        alphaB -= tmpAlphaB;
    }
    resultMask += vec4(mask.r * alphaR, mask.g * alphaG, mask.b * alphaB, 1.0);

    gl_FragColor = resultMask;
}