如何使用JS前端技术实现静态图片局部流动效果
导读:本文共4708字符,通常情况下阅读需要16分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要:HTML 页面结构#sketch 元素主要是用于绘制和加载流动效果热点图的画板;#button_container 是页面底部的按钮控制区域;svg 元素用于利用其 filter 滤镜实现液态流动动画效果,包括 feTurbulence 和 feDisplacementMap 滤镜。<mainid="sketch"><canvasid="canva... ...
目录
(为您整理了一些要点),点击可以直达。HTML 页面结构
#sketch
元素主要是用于绘制和加载流动效果热点图的画板;#button_container
是页面底部的按钮控制区域;svg
元素用于利用其 filter
滤镜实现液态流动动画效果,包括 feTurbulence
和 feDisplacementMap
滤镜。
<mainid="sketch">
<canvasid="canvas"data-img=""></canvas>
<divclass="mask">
<divid="maskInner"class="mask-inner"></div>
</div>
</main>
<sectionclass="button_container">
<buttonclass="button">清除画布</button>
<buttonclass="button"><inputclass="input"type="file"id="upload">上传图片</button>
</section>
<svg>
<filterid="heat"filterUnits="objectBoundingBox"x="0"y="0"width="100%"height="100%">
<feTurbulenceid="heatturb"type="fractalNoise"numOctaves="1"seed="2"/>
<feDisplacementMapxChannelSelector="G"yChannelSelector="B"scale="22"in="SourceGraphic"/>
</filter>
</svg>
feTurbulence 和 feDisplacementMap
feTurbulence
:滤镜利用Perlin
噪声函数创建了一个图像,利用它可以实现人造纹理比如说云纹、大理石纹等模拟滤镜效果。feDisplacementMap
:映射置换滤镜,该滤镜用来自图像中从in2
到空间的像素值置换图像从in
到空间的像素值。即它可以改变元素和图形的像素位置,通过遍历原图形的所有像素点,feDisplacementMap
重新映射替换一个新的位置,形成一个新的图形。该滤镜在业界的主流应用是对图形进行形变,扭曲,液化。
CSS 样式
接着看看样式的实现,main
元素作为主容器并将主图案作为背景图片;canvas
作为画布占据 100%
的空间位置;.mask
和 .mask-inner
用于生成如下图所示热点路径与背景图相溶的效果,这种效果是借助 mask-image
实现的。最后,为了生成动态流动效果,.mask-inner
通过 filter: url(#heat)
将前面生成的 svg
作为滤镜来源,后续即将在 JavaScript
中通过不间断修改 svg
滤镜的属性,来生成液态流动动画。
main{
position:relative;
background-image:url('bg.jpg');
background-size:cover;
background-position:100%50%;
}
canvas{
opacity:0;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.mask{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
mask-mode:luminance;
mask-size:100%100%;
backdrop-filter:hard-light;
mask-image:url('mask.png');
}
.mask-inner{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url('bg.jpg')0%0%repeat;
background-size:cover;
background-position:100%50%;
filter:url(#heat);
mask-image:url('mask.png')
}
mask-image
mask-image
CSS
属性用于设置元素上遮罩层的图像。
语法:
//默认值,透明的黑色图像层,也就是没有遮罩层。
mask-image:none;
//<mask-source><mask>或CSS图像的url的值
mask-image:url(masks.svg#mask1);
//<image>图片作为遮罩层
mask-image:linear-gradient(rgba(0,0,0,1.0),transparent);
mask-image:image(url(mask.png),skyblue);
//多个值
mask-image:image(url(mask.png),skyblue),linear-gradient(rgba(0,0,0,1.0),transparent);
//全局值
mask-image:inherit;
mask-image:initial;
mask-image:unset;
兼容性:
⚡
此功能某些浏览器尚在开发中,需要使用浏览器前缀以兼容不同浏览器。
JavaScript 方法
① 绘制热点图
监听鼠标移动和点击事件,在 canvas
上绘制波动路径热点。
varcanvas=document.getElementById('canvas');
varctx=canvas.getContext('2d');
varsketch=document.getElementById('sketch');
varsketchStyle=window.getComputedStyle(sketch);
varmouse={x:0,y:0};canvas.width=parseInt(sketchStyle.getPropertyValue('width'));
canvas.height=parseInt(sketchStyle.getPropertyValue('height'));
canvas.addEventListener('mousemove',e=>{
mouse.x=e.pageX-canvas.getBoundingClientRect().left;
mouse.y=e.pageY-canvas.getBoundingClientRect().top;
},false);ctx.lineWidth=40;
ctx.lineJoin='round';
ctx.lineCap='round';
ctx.strokeStyle='black';canvas.addEventListener('mousedown',()=>{
ctx.beginPath();
ctx.moveTo(mouse.x,mouse.y);
canvas.addEventListener('mousemove',onPaint,false);
},false);canvas.addEventListener('mouseup',()=>{
canvas.removeEventListener('mousemove',onPaint,false);
},false);varonPaint=()=>{
ctx.lineTo(mouse.x,mouse.y);
ctx.stroke();
varurl=canvas.toDataURL();
document.querySelectorAll('div').forEach(item=>{
item.style.cssText+=display:initial; -webkit-mask-image:url(${url}); mask-image:url(${url});
;
});
};
绘制完成后,可以在页面中右键保存生成的波动路径热点图,直接将绘制满意的热点图放到 CSS
中,就能给喜欢的图片添加局部波动效果了,下面这张图片就是本示例页面使用的波动的热点路径图。
② 生成动画
为了生成实时更新的波动效果,本文使用了 TweenMax
来通过改变 feTurbulence
的 baseFrequency
属性值来实现,使用其他动画库或使用 requestAnimationFrame
也是可以实现相同的功能。
feTurb=document.querySelector('#heatturb');
vartimeline=newTimelineMax({
repeat:-1,
yoyo:true
}),
timeline.add(
newTweenMax.to(feTurb,8,{
onUpdate:()=>{
varbfX=this.progress()0.01+0.025,
bfY=this.progress()0.003+0.01,
bfStr=bfX.toString()+''+bfY.toString();
feTurb.setAttribute('baseFrequency',bfStr);
}
}),
0);
③ 清除画布
点击清除画布按钮,可以清空已经绘制的波动路径,主要是通过清除页面元素 mask-image
的属性值以及清 canvas
画布来实现的。
functionclear(){
document.querySelectorAll('div').forEach(item=>{
item.style.cssText+=display:none; -webkit-mask-image:none; mask-image:none;
;
});
}document.querySelectorAll('.button').forEach(item=>{
item.addEventListener('click',()=>{
ctx.clearRect(0,0,canvas.width,canvas.height);
clear();
})
});
④ 切换图片
点击切换图片,可以加载本地的一张图片作为绘制底图,该功能是通过 input[type=file]
来实现图片资源的获取,然后通过修改 CSS
将它设置成新的画布背景。
document.getElementById('upload').onchange=function(){
varimageFile=this.files[0];
varnewImg=window.URL.createObjectURL(imageFile);
clear();
document.getElementById('sketch').style.cssText+=background:url(${newImg}); background-size:cover; background-position:center;
;
document.getElementById('maskInner').style.cssText+=background:url(${newImg}); background-size:cover; background-position:center;
;
};
读到这里,这篇“如何使用JS前端技术实现静态图片局部流动效果”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。
如何使用JS前端技术实现静态图片局部流动效果的详细内容,希望对您有所帮助,信息来源于网络。