使用JS前端技术实现静态图片局部流动效果_javascript技巧

来源:脚本之家  责任编辑:小易  
目录
背景效果实现HTML 页面结构?? feTurbulence 和 feDisplacementMapCSS 样式?? mask-imageJavaScript 方法① 绘制热点图② 生成动画③ 清除画布④ 切换图片总结

声明:本文涉及图文和模型素材仅用于个人学习、研究和欣赏,请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。

背景

如果你有玩过 ?? 《王者荣耀》《阴阳师》 等手游,一定注意到过它的启动动画、皮肤立绘卡片等场景,经常采用静态底图加局部液态流动效果的简单动画,这些流动动画可能出现在缓缓流动的水流 ??、迎风飘动的旗帜 ??、游戏角色衣袖 ??‍♀?、随着时间缓动的云、雨、雾天气效果 ? 等。这种过渡效果不仅节省了开发全量动画的成本,而且使得游戏画面更加热血、冒险、奥德赛、高级,也更加容易吸引玩家氪金 ??

本文使用前端开发技术,结合 SVGCSS 来实现类似的液化流动效果。本文包含的知识点主要包括:mask-image 遮罩、feTurbulencefeDisplacementMap 滤镜、filter 属性、canvas 绘制方法、TimelineMax 动画以及input[type=file] 本地图片资源加载等。

效果

先来看看实现效果,下面几个示例以及 ?? 文章 Banner 图都是应用了由本文内容生成的液态流动动画效果。由于GIF 图压缩比较严重,动画效果看起来不是很流畅 ??,大家不妨通过以下演示页面链接,亲自体验一下效果,生成自己的 传说典藏 皮肤立绘吧 ??

??‍?? 在线体验:https://dragonir.github.io/paint-heat-map/

??‍?? 在线体验:https://codepen.io/dragonir/full/qBoxQKW

?? 雾气扩散 塞尔达传说:旷野之息

?? 衣袖飘动 貂蝉:猫影幻舞

?? 湖光波动

?? 文字液化

?? ps:体验页面部署在 Gitpage 上传图片功能不是真正上传到服务器,而是只会加载到浏览器本地,页面不会获取任何信息,大家可以放心体验,不用担心隐私泄漏问题。

实现

页面主要由 2 部分构成,顶部用于加载图片 ,并且可以通过按住 ?? 鼠标划动的方式绘制热点路径,给图片添加流动效果;底部是控制区域,点击按钮 ?? 清除画布,可以清除绘制的流动动画效果、点击按钮 ?? 切换图片可以加载本地的图片。

?? 注意,还有一个隐形的功能,当你绘制完成时,可以点击 ?? 鼠标右键,然后选择保存图片,保存的这张图片就是我们绘制流体动画路径的热点图,利用这张热点图,使用本文的 CSS 知识,就能把静态图片转化成动态图啦!

HTML 页面结构

#sketch 元素主要是用于绘制和加载流动效果热点图的画板;#button_container 是页面底部的按钮控制区域;svg 元素用于利用其 filter 滤镜实现液态流动动画效果,包括 feTurbulencefeDisplacementMap 滤镜。

<main id="sketch">
  <canvas id="canvas" data-img=""></canvas>
  <div class="mask">
    <div id="maskInner" class="mask-inner"></div>
  </div>
</main>
<section class="button_container">
  <button class="button">清除画布</button>
  <button class="button"><input class="input" type="file" id="upload">上传图片</button>
</section>
<svg>
  <filter id="heat" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
    <feTurbulence id="heatturb" type="fractalNoise" numOctaves="1" seed="2" />
    <feDisplacementMap xChannelSelector="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 上绘制波动路径热点。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var sketch = document.getElementById('sketch');
var sketchStyle = window.getComputedStyle(sketch);
var mouse = { 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);

var onPaint = () => {
  ctx.lineTo(mouse.x, mouse.y);
  ctx.stroke();
  var url = canvas.toDataURL();
  document.querySelectorAll('div').forEach(item => {
    item.style.cssText += `
      display: initial;
      -webkit-mask-image: url(${url});
      mask-image: url(${url});
    `;
  });
};

绘制完成后,可以在页面中右键保存生成的波动路径热点图,直接将绘制满意的热点图放到 CSS 中,就能给喜欢的图片添加局部波动效果了,下面这张图片就是本示例页面使用的波动的热点路径图。

② 生成动画

为了生成实时更新的波动效果,本文使用了 TweenMax 来通过改变 feTurbulencebaseFrequency 属性值来实现,使用其他动画库或使用 requestAnimationFrame 也是可以实现相同的功能。

feTurb = document.querySelector('#heatturb');
var timeline = new TimelineMax({
  repeat: -1,
  yoyo: true
}),
timeline.add(
  new TweenMax.to(feTurb, 8, {
    onUpdate: () => {
      var bfX = 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 画布来实现的。

function clear() {
  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 () {
  var imageFile = this.files[0];
  var newImg = 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;
  `;
};

到这里,全部功能都实现完毕了,大家赶快制作一张自己喜欢的 史诗皮肤奥德赛小游戏 的启动页面吧 ??

?? 源码地址:https://github.com/dragonir/paint-heat-map

总结

本文包含的新知识点主要包括:

mask-image 遮罩元素feTurbulencefeDisplacementMapsvg滤镜filter 属性Canvas 绘制方法TimelineMax 动画input[type=file] 本地图片资源加载

到此这篇关于使用JS前端技术实现静态图片局部流动效果的文章就介绍到这了,更多相关js静态图片局部流动内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

您可能感兴趣的文章:javascript实现瀑布流动态加载图片原理javascript转换静态图片,增加粒子动画效果

  • 本文相关:
  • js获取当前页面路径示例讲解
  • js创建对象的方法汇总
  • javascript判断两个值相等的方法详解
  • js实现贪吃蛇游戏 canvas绘制地图
  • js与jquery正则验证电子邮箱、手机号、邮政编码的方法
  • javascript实现点击按钮变色
  • js分页控件 可用于无刷新分页
  • bootstrap中table分页插件使用详解
  • bootstrap实现模态框效果
  • js li来实现的效果
  • 前端js实现图片压缩
  • 前端,js实现图片上传的原理是设么??能回答面试即可
  • 当前使用JS在前端完成图片压缩的有哪些方法
  • js 不使用css3 canvas 等技术,怎么实现图片的任意角度旋转
  • 能否利用JS+CSS技术实现静态HTML页面能动态读取服务器某...
  • 一静态页面 如何通过js 实现 点击按钮 弹出当前“图片另存为”...
  • 如何使用js实现IE9下上传图片并预览
  • 使用js操作css实现js改变背景图片示例
  • js中使用animate实现图片滑动,怎么使最后一张直接滚动到第一...
  • js实现使用鼠标拖拽切换图片的方法
  • 使用JS实现图片展示瀑布流效果的实例代码
  • 我使用JS实现图片切换功能,可是那图片一直无法居中,如下是部...
  • 前端js把图片转换成base64位的后端(C#)怎么转成image保存?
  • Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式...
  • 使用asp或者js实现将整个网页生成为一张图片
  • 如何实现前端工程化和静态资源的管理
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧javascript实现瀑布流动态加载图片原理javascript转换静态图片,增加粒子动画效果js获取当前页面路径示例讲解js创建对象的方法汇总javascript判断两个值相等的方法详解js实现贪吃蛇游戏 canvas绘制地图js与jquery正则验证电子邮箱、手机号、邮政编码的方法javascript实现点击按钮变色js分页控件 可用于无刷新分页bootstrap中table分页插件使用详解bootstrap实现模态框效果js li来实现的效果js删除数组里的某个元素方法js刷新页面方法大全js中settimeout()的用法详解js页面跳转常用的几种方式js截取字符串常用方法详细整理js数组与字符串的相互转换方法js保留两位小数方法总结js设置cookie、读取cookie、删除cookiejs打开新窗口的2种方式js 将json字符串转换为json对象的方法解析js截取字符串常用方法详细整理基于javascript实现带缩略图的轮播效果document.documentelement和document.bodyjs实现无缝轮播图特效微信小程序系列之自定义顶部导航功能javascript中ahooks?处理?dom?的方法根据输入邮箱号跳转到相应登录地址的解决方法js实现简单商品筛选功能漫谈js引擎的运行机制 你应该知道什么js中字符串trim()使用示例
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved