使用PixiJS创建涟漪效果

Create ripple effects

有很多有趣的效果可以添加到页面以增加参与度,但重要的是选择与网站整体美感完美结合的效果。在这里,我们演示如何使用JavaScript引入置换涟漪。查看MustafaCelik这是行动效果的一个很好的例子。

1.创造涟漪

为了产生波纹效果,将使用PixiJS,因为这提供了简单的位移效果。这里JavaScript代码设置所需的变量并加载图像以创建效果。加载图像后,将调用“setup”功能。

var app = new PIXI.Application(window.innerWidth,window.innerHeight); document.body.appendChild(app.view); app.stage.interactive = true; var posX,displacementSprite,displacementFilter,bg,vx; var container = new PIXI.Container(); app.stage.addChild(容器); 。PIXI.loader.add(“IMG / ripple.png”)添加(“IMG / bg.jpg”)负荷(设置)。

2.创建位移

在'setup'功能中,创建了位移精灵,它将产生波纹效果,并将其添加到位移滤波器中。然后设置将其锚点移动到图像的中心并定位在屏幕上。

function setup(){posX = app.renderer.width / 2; displacementSprite = new PIXI.Sprite(PIXI.loader.resources [“img / ripple.png”]。texture); displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite); displacementSprite.anchor.set(0.5); displacementSprite.x = app.renderer.width / 2; displacementSprite.y = app.renderer.height / 2; vx = displacementSprite.x;

3.完成设置

要完成“设置”功能,请设置位移滤镜比例并定位背景。请注意,位移的比例为“0”,这是因为只要鼠标移动它就会设置为高度。

app.stage.addChild(displacementSprite); container.filters = [displacementFilter]; displacementFilter.scale.x = 0; displacementFilter.scale.y = 0; bg = new PIXI.Sprite(PIXI.loader.resources [“img / bg.jpg”]。texture); bg.width = app.renderer.width; bg.height = app.renderer.height; container.addChild(BG); app.stage.on('mousemove',onPointerMove).on('touchmove',onPointerMove);环(); }

4.抓住鼠标

只要鼠标移动,下一个代码就会抓住鼠标在x轴上的位置。这将用于在用户移动鼠标时触发纹波位移效果。更多的运动将使波纹更大。

function onPointerMove(eventData){posX = eventData.data.global.x; }

5.让它移动

'循环'功能不断更新屏幕。使用鼠标的位置和纹波计算出x轴的速度。然后将其映射到过滤器以提供0到120之间的值。

function loop(){requestAnimationFrame(loop); vx + =(posX  -  displacementSprite.x)* 0.045; displacementSprite.x = vx; var disp = Math.floor(posX  -  displacementSprite.x); if(disp <0)disp = -disp; var fs = map(disp,0,500,0,120); disp = map(disp,0,500,10,0.6);

6.完成代码

在'循环'函数结束时,精灵被缩放到位移量并且过滤器缩放到它应该具有的深度量。最后,声明map函数将值范围映射到新值。

displacementSprite.scale.x = disp; displacementFilter.scale.x = fs; } map = function(n,start1,stop1,start2,stop2){var newval =(n  -  start1)/(stop1  -  start1)*(stop2  -  start2)+ start2;返回newval; };

查找本教程的完整代码FileSilo

本文最初出现在Web Designer杂志上。在这里订阅

在Generate London 2018了解更多信息

An image displaying the speakers appearing at Generate London and providing a link to buy tickets.

去看看Sarah Parmenter,Bruce Lawson,Richard Rutter以及2018年Generate London的演讲

特效和超越是网络的发展方向和生成演讲者Marpi Marcinowski的创作工作围绕着构建3D世界,创造身临其境的AR,VR体验和讲故事的风格与差异。

他的演讲将带您浏览所有交互式媒体和技术,并从用户的角度来看待它。

不要错过,现在就买票

相关文章:



翻译字数超限