pixi+gsap实现图片切片镜面滤镜动画效果代码
代码语言:html
所属分类:动画
代码描述:pixi+gsap实现图片切片镜面滤镜动画效果代码
代码标签: pixi gsap 图片 切片 镜面 滤镜 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { position: relative; overflow: hidden; } </style> </head> <body translate="no" > <script id="fs" type="x-shader/x-fragment"> precision mediump float; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform float time; void main (void) { float shakeLength = 0.2; float shakeWidth = 0.06; float speed = 0.03; vec4 coord = gl_FragCoord; coord.x = coord.x + time * 1.0; coord.y = coord.y + time * 3.0; float offsetX = cos(floor(coord.y * shakeLength / 20.0) * -20.0 + time * speed) * shakeWidth; float offsetY = sin(floor(coord.x * shakeLength / 20.0) * -20.0 + time * speed) * shakeWidth; gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + offsetX, vTextureCoord.y + offsetY)); } </script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.6.1.0.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.1.js"></script> <script > // filter PIXI.filters.MyFilter = class extends PIXI.Filter { constructor() { var fragmentSrc = document.querySelector('#fs').textContent; super( null, // vertex shader fragmentSrc, // fragment shader {.........完整代码请登录后点击上方下载按钮下载查看
网友评论0