金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 使用方式总结,实现动态模糊动画效果

使用方式总结,实现动态模糊动画效果

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-20 14:28

SVG 完结动态模糊动漫效果

2017/11/11 · CSS · 3 评论 · SVG

初稿出处: Lucas Bebber   译文出处:码农网 – 小峰   

不久前大家将向大家来得什么创设SVG动态模糊效果,并将其应用于HTML成分的健康JS或CSS动漫。

动态模糊是风姿洒脱种常见使用于动态印象和动漫片的本事,它能使动作看起来更为平整自然。图片 1

 

在线演示源码下载

动态模糊是静止图像或豆蔻梢头层层图像(如电影或动画卡塔 尔(英语:State of Qatar)中快速移动物体的家喻户晓图像拖尾。当记录的图像在单帧记录时期发生变化时,由于高速移动或长日子暴光进而引致动态模糊的结果。——维基百科上对动态模糊的介绍

在此篇随笔中,大家将介绍如何对品位或垂直的调换制作出相同的动态模糊效果。

专心:这种意义特别实用,但独有部分今世浏览器才支撑。到这几天甘休,貌似Chrome具备最棒的习性。

为了对动漫片应用动态模糊效果,咱们要求在各种帧中依据目的的速度和它移动的来头使用方向模糊。图片 2

 

那就是说,怎么技巧爆发这种效果啊?

深远浅析HTML5中的SVG,深刻浅析HTML5SVG

SVG是Scalable Vector Graphics的缩写,意为可缩放矢量图形。1998年,环球网结盟创造了四个专门的学业组,研究开发黄金年代种通过XML来表现矢量图形的技能——SVG!由于SVG也是豆蔻梢头种XML文件,所以SVG也接二连三了XML的开放性、可移植性和交互作用性的独特之处,本文介绍html5中svg,需求的相恋的人参谋下

SVG 背景

SVG是Scalable Vector Graphics的缩写,意为可缩放矢量图形。一九九八年,万维网联盟创造了叁个专门的学业组,研究开发黄金年代种通过XML来表现矢量图形的工夫——SVG!由于SVG也是生龙活虎种XML文件,所以SVG也持续了XML的开放性、可移植性和人机联作性的优点。近年来差不多具有主流的浏览器都扶持SVG,我们能够从 这里 获得更多的合营音讯,当中囊括:

应用<embed>只怕<object>成分来显示基本的SVG图形;
使用<img>来显示SVG图形;
将SVG图形应用为CSS背景图;
直接在HTML文书档案中使用<svg>标签(要求HTML5支撑卡塔尔;
对利用CSS也许外界对象元素的HTML成分使用SVG转换、滤镜等特效;
对SVG对象使用相同photoshop的效劳,包蕴模糊和色彩管理;
对SVG图像使用动漫片;
运用SVG格式的书体;

* SVG
* 基本内容
* SVG并不归于HTML5专有内容
* HTML5提供有关SVG原生的从头到尾的经过
* 在HTML5冒出早前,就有SVG内容
* SVG,简单的话正是矢量图
* SVG文件的恢宏名叫".svg"
* SVG使用的是XML语法
* 概念
* SVG是生龙活虎种选取XML技术描述二维图形的语言
* SVG的特点
* SVG绘制图形能够被搜寻引擎抓取
* SVG在图纸质量不下落的动静下,被放大
* SVG与Canvas的区别
* SVG
* 不凭借分辨率
* 支持事件绑定
* 大型渲染区域的次第(举个例子百度地图)
* 不能够用来兑现网游
* Canvas
* 依赖分辨率
* 不扶持事件绑定
* 最合适网络游戏
* 保存为".jpg"格式的图纸
* 用途
* 网页中有些小的Logo
* 网页中动态特效(动画效果)
* HTML5中使用SVG
* 使用<svg></svg>元素
* 作用 - 类似于<canvas>元素
* 暗中认可大小为300px*150px
* 使用CSS样式
* 使用SVG绘制图形,必得定义<svg>成分中
* 绘制图形
* 矩产生分

代码如下:
<rect x="" y="" width="" height="" />
<!DOCTYPE html>
<html>
<head>
<title>SVG绘制矩形</title>
<meta charset="utf-8" />
</head>
<body>
<!--
在HTML页面中接受svg标签的话
* 定义<svg></svg>元素
* 相同于<canvas>成分的法力
* 暗中同意大小 300px * 150px
* 设置宽度和可观 - 属性和style
* 利用svg绘制全数图形,必需定义在<svg>元素内
* 利用svg绘制的图形是与HTML页面有关的
-->
<svg style="background:pink;width:400px;height:400px;">
<!--
绘图矩形 - <rect />
* x和y - 绘制矩形的左上角坐标值
* width和height - 绘制矩形的宽度和惊人
* 必需运用质量情势,不能够应用style样式情势
* 默许颜色为黑古铜色
设置颜色 - 既可以够使用性质,还足以应用样式
* fill - 设置填充颜色
* stroke - 设置描边颜色
安装线条宽度
* stroke-width
注意
* svg绘制的图样,使用style方式设置样式,使用的不是CSS属性,而是SVG属性
-->
<rect x="10" y="10" width="100" height="100" fill="blue" stroke="black" stroke-width="5" />
<rect x="120" y="10" width="100" height="100" style="fill:blue;stroke:black;stroke-width:5" />
</svg>
</body>
</html>
* 圆造成分
<circle cx="" cy="" r="" />
<body>
<svg width="500px" height="500px">
<!--
绘制圆形 - <circle>
* cx和cy - 圆形的圈子坐标值
* r - 圆形的半径
-->
<circle cx="100" cy="100" r="100" fill="pink" />
</svg>
</body>
* 椭圆成分
<ellipse cx="" cy="" rx="" ry="">
<body>
<svg width="300px" height="300px">
<ellipse cx="150" cy="150" rx="150" ry="100" />
</svg>
</body>
* 直线成分
<line x1="" y1="" x2="" y2="" />
<body>
<!--
<svg>成分中不能不分包八个图造成分,还能够饱含三个图产生分?
* 能够包蕴多个图产生分
-->
<svg width="300px" height="300px">
<line x1="10" y1="10" x2="200" y2="200" stroke-width="10" stroke="black"/>
<line x1="200" y1="200" x2="200" y2="10" stroke-width="10" stroke="black"/>
</svg>
</body>
* 折线成分
<polyline points="">
<body>
<svg width="500px" height="500px">
<!--
<polyline>元素 - 折线
* points - 设置源点、折点及终端
* x和y之直接纳","分隔
* 八个点时期利用空格分隔
折线的天性
* 私下认可将折线中的区域(起源到终端),暗许提供紫铜色
-->
<polyline points="10,10 200,10 200,200 10,200 10,10" stroke-width="5" stroke="black" fill="white"/>
</svg>
</body>
* 多边变成分
<polygon points="" />
<body>
<svg width="500px" height="500px">
<polyline points="10,10 200,10 200,200 10,200 100,100 10,10" stroke-width="5" stroke="black" fill="white"/>
</svg>
</body>
* 特效成分
* 渐变 - 渐造成分定义在<defs>成分内
* 线型渐变 - <linearGradient>
* 该因素是伊始元素
<linearGradient x1="%" y1="%" x2="%" y2="%">
<stop offset="%" stop-color="color" />
</linearGradient>
<body>
<svg width="400px" height="400px">
<!--
设置线型渐变 - <linearGradient>
* 用法 - 将渐变定义在<defs>成分中
* 特点 - 具备基准线
* 源点坐标值 - x1和y1
* 终点坐标值 - x2和y2
* 注意
* 该因素是初叶成分
<linearGradient></linearGradient>
* x1和y1、x2和y2的值都是百分值
* 定义id属性
* 用于将安装的渐变增加到绘制的图片成分中
* 使用<stop>元素 - 设置渐变的颜色
* offset - 设置渐变颜色的职位
* 该值也是百分值
* stop-color - 设置渐变颜色
* stop-opacity - 设置渐变颜色的光滑度
-->
<defs>
<linearGradient id="mygrd" x1="0" y1="0" x2="100%" y2="100%">
<stop offset="0" stop-color="red" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="blue" />
</linearGradient>
</defs>
<!--
怎么着能够将方面安装线型渐变,增添在下边包车型地铁矩形中?
* 使用fill属性,值为url(#渐形成分的id值)
-->
<rect x="0" y="0" width="400" height="400" fill="url(#mygrd)" />
</svg>
</body>

* 扇形(射线)渐变 - <radialGradient>
* 滤镜 - 高斯模糊
* 滤镜使用<filter>成分
* <feGaussianBlur>元素 - 高斯模糊
* in="SourceGraphic"
* stdDeviation - 设置模糊程度

代码如下:
<body>
<svg width="500px" height="500px">
<!--
什么设置高斯模糊滤镜
* 定义<defs></defs>成分 - 滤镜定义在该因素中
* 定义<filter></filter>元素 - 表示SVG的滤镜
* 定义高斯歪曲成分<feGaussianBlur>
* 属性
* in="SourceGraphic" - 固定写法
* stdDeviation - 设置模糊程度
* 为<filter>成分定义id属性值
* 方便增加在绘制图形的因素中
-->
<defs>
<filter id="myfilter">
<feGaussianBlur in="SourceGraphic" stdDeviation=5 />
</filter>
</defs>
<!--
什么样将地点的高斯模糊与下部的因素进行关联
* 使用filter属性,值为url(#id)
* 设置当前图形的滤镜
-->
<rect x="100" y="100" width="100" height="100" filter="url(#myfilter)" fill="green" />
</svg>
</body>

* 注意 - 定义在<defs>元素中
* TWO.js
* 基本内容
* JS库介绍
* three.js - 特意用于绘制三个维度图形
* two.js - 特意用来绘制二维图形
* two.js帮忙的格式
* SVG - 默认
* Canvas
* WebGL - 专门用来绘制图像
* 怎样行使two.js
* 在HTML页面中引进two.js文件
* 在HTML页面中定义容器(<div>)
* 在javascript代码中
* 获取HTML页面中的容器
* 创立Two对象,将该指标增多到容器中
new Two(params).appendTo(Element);
* 使用two.js提供的API方法实行绘图
* 利用two.js提供的点子,设置图形
* 利用update()方法开展绘图
* 创建Two对象
* 构造器 - new Two(params)
* params参数 - 设置当前目的的音信
* type - 设置当前应用的格式(Two.Types.svg)
* svg - 默认值
* canvas
* webgl
* width和height - 设置宽度和惊人
* fullscreen - 设置是或不是全屏
* Boolean值,true表示全屏
* 图形方法
* makeLine() - 绘制线条
* makeRectangle() - 绘制矩形
* makeCircle() - 绘制圆形
* makeEllipse() - 绘制椭圆
* 动漫艺术
* update() - 更新动漫
* play() - 增加动漫片(循环)
* pause() - 删除动漫
* 设置绘制图形的体制
* 调用Two对象的绘图方法绘制图形时,再次来到该图形对象
* 通过该图形对象,设置相关属性值
* 分组操作
* Two.Group
* 动漫作用
* bind(event,callback)方法 - 事件绑定
* event - 绑定事件名称
* update - 对应update()方法的效能
* 全体的DOM事件都可以绑定
* callback - 事件管理函数
* 扩张内容
* 前端开辟工具
* Aptana Studio 3 - 代码提醒
* Webstrom - 国内前端开荒职员神器
* 实际开垦中
* 多用SVG
* 不失真
* 可被搜寻
* 页面优化 - 收缩外界链接
* <a href="">
* <img src="">
* Canvas - HTML绘制图形
* 实际运作中,是以图纸方式现身(.png)
* 无法被寻觅引擎抓取
* 放大后失真
* SVG内容
* 内容积非常的大
* 静态绘制图形
* 动态动漫功用
* 专门提供事件
* 网络有关SVG的材质超少(未有书籍)
* SVG的规范(W3C英文)
* SVG或CANVAS在HTML页面中定义
* 是只可以定义贰个因素,依然得以定义八个要素?
* 在多个HTML页面能够定义七个<svg>或<canvas>成分
* SVG依然CANVAS都以同意同一时间定义(绘制)三个图形
* 在实际付出中的使用
* SVG在今后的劳作付出,使用率并不高
* SVG图片平日都以由UI设计员来形成
* SVG就算是我们和好来设计(绘制)
* 近些日子互连网上无数特意提供现有的SVG图片的网站
* 使用JS库

------------------------------------------------------------------------------------>为了生存而改进,为了转移而创制.

SVG是Scalable Vector Graphics的缩写,意为可缩放矢量图形。壹玖玖陆年,环球网球联合会盟创立了一个专门的学业组,研究开发意气风发...

SVG
   基本内容
     SVG并不归于HTML5专有内容
       HTML5提供关于SVG原生的内容
     在HTML5并发从前,就有SVG内容
     SVG,不问可见就是矢量图
     SVG文件的扩展名称叫".svg"
     SVG使用的是XML语法
   概念
     SVG是后生可畏种采用XML本事描述二维图形的语言
     SVG的特点
       SVG绘制图形能够被搜寻引擎抓取
       SVG在图纸品质不下滑的意况下,被推广
     SVG与Canvas的区别
       SVG
         不注重分辨率
  协理事件绑定
  大型渲染区域的顺序(譬如百度地图)
  不可能用来实现网络电子游艺
       Canvas
         信赖分辨率
  不支持事件绑定
  最合适网络电游
  保存为".jpg"格式的图样
     用途
       网页中一些小的图标
       网页中动态特效(动画效果)
   HTML5中使用SVG
     使用<svg></svg>元素
       作用 - 类似于<canvas>元素
         暗中认可大小为300px 150px
  使用CSS样式
     使用SVG绘制图形,必需定义<svg>元素中
   绘制图形
     矩形元素
       <rect x="" y="" width="" height="" />
     圆形成分
       <circle cx="" cy="" r="" />
     椭圆成分
       <ellipse cx="" cy="" rx="" ry="">
     直线成分
       <line x1="" y1="" x2="" y2="" />
     折线成分
       <polyline points="">
     多边形成分
       <polygon points="" />
   特效成分
     渐变 - 渐产生分定义在<defs>成分内
       线型渐变 - <linearGradient>
         该因素是最初成分
  <linearGradient x1="%" y1="%" x2="%" y2="%">
    <stop offset="%" stop-color="color" />
  </linearGradient>
       扇形(射线)渐变 - <radialGradient>
     滤镜 - 高斯模糊
       滤镜使用<filter>成分
       <feGaussianBlur>成分 - 高斯模糊
         in="SourceGraphic"
  stdDeviation - 设置模糊程度
       注意 - 定义在<defs>元素中
  TWO.js
   基本内容
     JS库介绍
       three.js - 特地用来绘制三个维度图形
       two.js - 特意用于绘制二维图形
     two.js扶持的格式
       SVG - 默认
       Canvas
       WebGL - 特意用于绘制图像
   如何运用two.js
     在HTML页面中引进two.js文件
     在HTML页面中定义容器(<div>)
     在javascript代码中
       获取HTML页面中的容器
       创设Two对象,将该指标增添到容器中
         new Two(params).appendTo(Element);
       使用two.js提供的API方法实行绘图
         利用two.js提供的办法,设置图形
  利用update()方法开展绘图
   创建Two对象
     构造器 - new Two(params)
     params参数 - 设置当前指标的消息
       type - 设置当前利用的格式(Two.Types.svg)
         svg - 默认值
  canvas
  webgl
       width和height - 设置宽度和可观
       fullscreen - 设置是还是不是全屏
         Boolean值,true表示全屏
     图形方法
       makeLine() - 绘制线条
       makeRectangle() - 绘制矩形
       makeCircle() - 绘制圆形
       makeEllipse() - 绘制椭圆
     动绘画艺术术
       update() - 更新动漫
       play() - 加多动漫片(循环)
       pause() - 删除动漫
   设置绘制图形的体裁
     调用Two对象的绘图方法绘制图形时,再次回到该图形对象
     通过该图形对象,设置相关属性值
   分组操作
     Two.Group
   动漫作用
     bind(event,callback)方法 - 事件绑定
       event - 绑定事件名称
         update - 对应update()方法的成效
  全数的DOM事件都得以绑定
       callback - 事件处理函数

事实上中国人民解放军海军事工业程大学业作中,SVG大大多是用<svg>+<defs></defs>(也许symbol)+<use></use>+</svg>的咬合来行使的,defs 一孔之见就是「definitions」定义,大家得以把点不清重复性质高的要素,放入defs 成分内,让它形成叁个得以重新利用的物件。而symbol更加多的只是含有单个Logo。

安装模糊

由于常规CSS模糊滤镜不扶持定向模糊,所以大家不能不动用SVG滤镜。

我们已经在《Creative Gooey Effects》那篇小说中介绍过SVG滤镜的基本功知识。

为此,大家将只使用高斯滤镜模糊feGaussianBlur原语。

<svg xmlns="" version="1.1" class="filters"> <defs> <filter id="blur"> <fegaussianblur in="SourceGraphic" stddeviation="0,0"/> </filter> </defs> </svg>

1
2
3
4
5
6
7
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filters">
  <defs>
    <filter id="blur">
      <fegaussianblur in="SourceGraphic" stddeviation="0,0"/>
    </filter>
  </defs>
</svg>

stdDeviation属性用于安装模糊强度,並且能够吞噬多个参数,用于水平和垂直方向的歪曲。

将滤镜应用到三个成分上,有如大家事先见到的那样,特别轻松:

.selector{ -webkit-filter: url("#blur"); filter: url("../index.html#blur"); }

1
2
3
4
.selector{
-webkit-filter: url("#blur");
filter: url("../index.html#blur");
}

唯独,对于动态模糊效果,大家仍得经过JS动态更新各样帧的滤镜。

第风流倜傥,大家亟须选用并将滤镜存款和储蓄在三个变量中,以便以往能够访谈它。由于jQuery与SVG成分不相称,所以大家必要接受本机JS函数选择成分:

var filters = document.querySelector(".filters"), // the SVG that contains the filters defs = filters.querySelector("defs"), // the element inside the SVG blur = defs.querySelector("#blur"), // the blur filter blurFilter = blur.firstElementChild; // the feGaussianBlur primitive

1
2
3
4
var filters = document.querySelector(".filters"), // the SVG that contains the filters
defs = filters.querySelector("defs"), // the  element inside the SVG
blur = defs.querySelector("#blur"), // the blur filter
blurFilter = blur.firstElementChild; // the feGaussianBlur primitive

下一场设置强度,即改变滤镜原语的stdDeviation属性。比如,要安装三个水准12px的歪曲:

blurFilter.setAttribute("stdDeviation","12,0");

1
blurFilter.setAttribute("stdDeviation","12,0");

 

图片 3

牢牢记住,此模糊滤镜只扶植X或Y方向上的趋向模糊,不可能自由角度,由此你需求相应地设计好动漫效果。

再有,改造模糊滤镜会影响与其相关联的装有指标,因而我们须求为将采纳此意义的各种对象加多多个新的因素。下边是风姿洒脱种动态创制那几个滤镜的粗略方法:

// go through all the objects that need a blur filter $(".js-blur").each(function(i){ // clone the filter var blurClone=blur.cloneNode(true); // create and set a new ID so we can use the filter through CSS var blurId="blur"+i; blurClone.setAttribute("id",blurId); defs.appendChild(blurClone); // set the CSS var filter="url(#"+blurId+")"; $(this) .css({ webkitFilter:filter, filter:filter }) // store the filter reference on the object for practicity .data("blur",blurClone) ; });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// go through all the objects that need a blur filter
$(".js-blur").each(function(i){
// clone the filter
var blurClone=blur.cloneNode(true);
 
// create and set a new ID so we can use the filter through CSS
var blurId="blur"+i;
blurClone.setAttribute("id",blurId);
 
defs.appendChild(blurClone);
 
// set the CSS
var filter="url(#"+blurId+")";
$(this)
.css({
webkitFilter:filter,
filter:filter
})
// store the filter reference on the object for practicity
.data("blur",blurClone)
;
});

1、SVG使用办法

甭管哪一种艺术,svg都一定要作为根标签

  • 外链格局
    这种方法是先定义好叁个svg文件,再在html或css中引进。
// test.svg
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="40" fill="red"></circle>
</svg>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG</title>
</head>
<body>
         ![](test.svg)
</body>
</html>

外链的方式独有是将svg成分作为二个图片,不或许使用JS对其做一些操作,如改造大小颜色等。

  • 内联形式
<div id="div1">
    <svg width="100%" height="100%" >
        <circle cx="100" cy="100" r="40" fill="red" id='circle'></circle>
    </svg>
</div>

内联方式能够向操作普通html成分同样通过getElementById拿到dom,再经过setAttribute方法做属性操作:

<script type="text/javascript">
      var c = document.getElementById('circle');
      c.setAttribute('fill','blue');
</script>

衡量速度

接下去,咱们必要能够总括获得自上风姿罗曼蒂克帧以来对象活动的相距。每意气风发帧大家都要计算。完毕形式可能会依附设置的不等而不一致;举个例子动漫如何做到地点的设置等等。在本教程中,大家将动用更通用的不二秘诀,尽管它大概不或许针对具备用例实行优化,但适用于繁多JS和CSS动漫。

为了拿走间隔结果,大家将选取jQuery的offset函数,那正是大家必要的:它回到成分的坐标,相对于文书档案(实际不是它的父类卡塔 尔(英语:State of Qatar)来讲,何况将transform属性思虑在内。

为了能够检查改换并修正每风度翩翩帧,我们将使用requestAnimationFrame。

上边是一个事例:

// the element we want to apply the effect var $element=$(".selector"); // storing the last position, to be able to measure changes var lastPos=$element.offset(); // a multiplier, to be able to control the intensity of the effect var multiplier=0.25; // a helper to simplify setting the blur. function setBlur(x,y){ blurFilter.setAttribute("stdDeviation",x+","+y); } (function updateMotionBlur(){ // get the current position of the element var currentPos=$element.offset(); // calculate the changes from the last frame and apply the multiplier var xDiff=Math.abs(currentPos.left-lastPos.left)*multiplier; var yDiff=Math.abs(currentPos.top-lastPos.top)*multiplier; // set the blur setBlur(xDiff,yDiff); // store current position for the next frame lastPos=currentPos; // call to update in the next frame requestAnimationFrame(updateMotionBlur); })();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// the element we want to apply the effect
var $element=$(".selector");
// storing the last position, to be able to measure changes
var lastPos=$element.offset();
// a multiplier, to be able to control the intensity of the effect
var multiplier=0.25;
 
// a helper to simplify setting the blur.
function setBlur(x,y){
blurFilter.setAttribute("stdDeviation",x+","+y);
}
 
(function updateMotionBlur(){
// get the current position of the element
var currentPos=$element.offset();
 
// calculate the changes from the last frame and apply the multiplier
var xDiff=Math.abs(currentPos.left-lastPos.left)*multiplier;
var yDiff=Math.abs(currentPos.top-lastPos.top)*multiplier;
 
// set the blur
setBlur(xDiff,yDiff);
 
// store current position for the next frame
lastPos=currentPos;
 
// call to update in the next frame
requestAnimationFrame(updateMotionBlur);
})();

结果如下:图片 4

 

那只是是仅思虑四个因素的着力办法。更头昏眼花的或然要求特地为其优化的代码。对于更目眩神摇的照相,你能够构思将动态模糊效果应用于多少个对象,在并未有动漫时禁止使用模糊和进度总计,等等。

到此地本学科就得了了! 再说叁回,请细心,这种效益说不准很开销财富,所以你应该制止在巨型对象上使用它。

1 赞 4 收藏 3 评论

图片 5

2、defs & use

  • 实例1:简单组合
<defs>
  <rect id="rect1" width="100" height="50" x="10" y="10" fill="#c00"/>
</defs>
<use xlink:href="#rect1"/>
<use xlink:href="#rect1" x="110"/>

图片 6

基本构成

  • 实例2:复杂组合
<defs>
    <g id="g1">
          <rect id="rect1" width="100" height="50" x="10" y="10" fill="#c00"/>
          <circle id="circle1" cx="30" cy="30" r="10" fill="#00c"/>
    </g>
</defs>
<use xlink:href="#g1"/>
<use xlink:href="#rect1" x="110"/>
<use xlink:href="#circle1" x="210"/>

图片 7

复杂组合

  • 实例3:渐变
<defs>
   <linearGradient id="a1">
     <stop offset="5%" stop-color="#F00" />
     <stop offset="95%" stop-color="#ff0" />
   </linearGradient>
</defs>
<rect x="50" y="250" width="100" height="100" stroke="#000" stroke-width="5" fill="url(#a1)"></rect>
<circle cx="220" cy="300" r="50" stroke="#000" stroke-width="5" fill="url(#a1)"></circle>
<rect x="290" y="250" width="100" height="100" stroke="url(#a1)" stroke-width="5" fill="none"></rect>

图片 8

渐变

  • 实例4:路径
<defs>
  <path id="a1" d="M0 50 C150 150 100 -50 300 50" stroke="#000" fill="none"/>
</defs>
<text>
   <textPath xlink:href="#a1">这是随路径跑的文字,很酷吧
  </textPath>
</text>

图片 9

路径

  • 实例5:裁切
<defs>  
  <clipPath id="a1">
  <rect x="0" y="0" width="200" height="100" />
</clipPath>
</defs>
<circle cx="100" cy="100" r="100" clip-path="url(#a1)" fill="#000" />

图片 10

裁切

  • 实例6:遮罩
<defs>
  <mask id="mask1"> 
    <rect  x="50" y="50" width="100" height="100" fill="#ccc"/>
    <rect  x="150" y="150" width="50" height="50" fill="#fff"/>
  </mask> 
</defs>
  <rect id="box1" x="50" y="50" width="150" height="150" fill="#0f0"/>
  <rect id="box2" x="50" y="50" width="150" height="150" fill="#f00" mask="url(#mask1)"/>

图片 11

遮罩

  • 实例7:标志marker
<defs>
  <marker id="r" viewBox="-10 -10 70 70" refX="25" refY="25" markerWidth="15" markerHeight="15" orient="auto" >
      <circle fill="#fff" stroke="#000" stroke-width="10" cx="25" cy="25" r="25"/>
  </marker>
    <marker id="g" viewBox="0 0 50 50" refX="25" refY="25" markerWidth="10" markerHeight="10" orient="45" >
      <rect fill="#0a0" width="50" height="50"/>
  </marker>
  <marker id="b" viewBox="-10 -10 70 70" refX="25" refY="25" markerWidth="15" markerHeight="15" orient="auto" >
      <circle fill="#f99" stroke="#f00" stroke-width="10" cx="25" cy="25" r="25"/>
  </marker>
</defs>
<polyline points="20,100 50,100 80,20 110,80 140,30 170,100 200,100" fill="none" stroke="black" stroke-width="1" marker-end="url(#b)" marker-start="url(#r)" marker-mid="url(#g)"></polyline>

图片 12

marker

  • 实例8:滤镜
<defs>
<filter width="200" height="200" x="0" y="0" id="blur" filterUnits="userSpaceOnUse">
  <feGaussianBlur stdDeviation="5" />
</filter>
</defs>
<rect x="30" y="30" width="70" height="70" fill="#a00" filter=url("#blur") />

图片 13

滤镜

3、控制svg

  • CSS 方式
    svg成分和html成分同样,都得以用class属性增加类名来调整样式,只是对于svg成分来说,可调控的体裁比较少,平淡无奇的有fill,stroke,stroke-width
    ,opacity以至transform,看二个例子:

    //定义区
    <svg>
      <symbol id="ic"> 
          <path fill="#000" d="..."/> 
      </symbol> 
    </svg>
    //使用区
    <svg class="icon" viewBox="0 0 100 125"> 
       <use class="ic-1" xlink:href="#ic" x="0" y="0" /> 
    </svg> 
    <svg class="icon" viewBox="0 0 100 125">
       <use class="ic-2" xlink:href="#ic" x="0" y="0" />
    </svg>
    //定义样式
    .icon { width: 100px; height: 125px; }
    use.ic-1 { fill: skyblue; } 
    use.ic-2 { fill: #FDC646; }
    svg path { fill: inherit; }    //防止.ic-1,.ic-2设置的fill被path覆盖
    

图片 14

symbol成分和defs大概,都以用来组成成分的,但symbol更加多的用来单个Logo的咬合

  • JS 方式
    要在SVG内动态新增加<path>或<rect>等要素,要动用createElementNS,并不是createElement,因为svg和html不在同三个命名空间里。

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <body>
        <svg id="s" xmlns="http://www.w3.org/2000/svg"/>
        <script type="text/javascript">
            function makeSVG(tag, attrs) {
                var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
                for (var k in attrs)
                    el.setAttribute(k, attrs[k]);
                return el;
            }
            var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'red'});
            document.getElementById('s').appendChild(circle);
        </script>
    </body>
    </html>
    

4、svg最棒实行

在职业中svg使用最多的现象依旧当小Logo使用,替换诸如纯图片、iconfontLogo等方案。使用内联svg的优势在于:1、少发贰遍http央求;2、放大不会变形;3、易于用JS调整,比iconfont越来越灵敏。

一流做法(SVG sprite):

  • 1、将具有供给利用的小Logo统一定义在svg下,该svg要安装display:none,每一个小Logo用symbol包围,每一个symbol取一个id,方便后续调用;
  • 2、使用svg+use的法子调用,use中用属性xlink:href='#id'来援引相应Logo,可以给各类svg取一个类名,方便css和js动态调控;
  • 3、通过getElementById的艺术赢得需求更动属性的use成分,为其动态增加或删除相应的类名;
  • 4、增多的类名最终是运用在symbol上,symbol中定义的Logo(path卡塔尔会覆盖类名中对应的习性,所以并不是忘了安装symbol十二月素的本性持续自symbol,好似
    上例中:svg path { fill: inherit; };
  • 5、要想达成更为复杂的机能,如渐变等,能够使用defs;
  • 6、要想做动漫效果,能够在css类名中决定opacity、transform、stroke-dasharray和stroke-dashoffset属性。

5、SVG动画

5.1 路线动漫

路线动漫基本是svg动漫里最常用的了,其基本原理是动态改换stroke-dasharray和stroke-dashoffset属性的值:

图片 15

实例:

<body>
    <svg>
        <symbol viewBox="0 0 24 20" id="ic" xmlns="http://www.w3.org/2000/svg">
            <title>点赞前</title>
            <path d="M22.825 6.727a6.236 6.236 0 0 0-1.8-3.818A5.275 5.275 0 0 0 17.36 1.44a5.275 5.275 0 0 0-3.667 1.47A11.134 11.134 0 0 0 12 5.09a11.134 11.134 0 0 0-1.692-2.18A5.275 5.275 0 0 0 6.64 1.44a5.275 5.275 0 0 0-3.667 1.47 6.236 6.236 0 0 0-1.8 3.817c-.044.546-.1 2.095 1.236 4.364 2.584 4.364 7.655 6.802 9.59 7.636 1.935-.834 7.006-3.272 9.59-7.636 1.337-2.27 1.28-3.83 1.235-4.364z" stroke="#454545" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
    <svg class="icon" viewBox="0 0 100 125">
        <use class="ic-1" xlink:href="#ic" x="0" y="0" />
    </svg>
</body>

    svg.icon {
        width: 120px;
        height: 135px;
    }
    use.ic-1 {
        stroke: gray;
        fill: gray;
        animation: move 3s linear forwards;
    }
    @keyframes move {
        0% {
            stroke-dasharray: 30px, 30px;
        }
        100% {
            stroke-dasharray: 30px, 0px;
        }
    }
    svg path {
        fill: inherit;
        stroke: inherit;
    }

效用正是stroke从30px长和30px空白渐渐变得未有空白

5.2 SMIL动画(2018/1/1更新)

以上动漫情势连接供给依据css来达成,其实svg特意有做动漫的要素
先看活动端宽容性:

图片 16

SVG SMIL animation

  • set
    在一依期刻今后修正某些属性值
    用法:
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">
      马
      <set attributeName="x" attributeType="XML" to="60" begin="3s" />
    </text>
  </g>
</svg>

以此「马」会在3秒以后从横坐标160的任务移动60以此职位(须臾移,无动漫效果)

  • animate
    落实单属性(不分包css的transform)的卡通片过渡效果
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">
    马
      <animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
    </text>
  </g>
</svg>
  • animateTransform
    专用于transform动画
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g> 
    <text font-family="microsoft yahei" font-size="80" y="100" x="100">马</text>
    <animateTransform attributeName="transform" begin="0s" dur="3s"  type="scale" from="1" to="1.5" repeatCount="indefinite"/>
  </g>
</svg>
  • animateMotion
    专项使用于复杂的门径动漫
<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
  <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">马
    <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" repeatCount="indefinite"/>
  </text>
  <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>

5.3 小结

至于用svg做动漫,更推荐用5.2的主意,并且5.第22中学animate的用法是最多的,animate成分还足以组合使用:

<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">马
        <animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
        <animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" />
    </text>
</svg>

别的,svg动漫仍为能够手动调整(JS)动漫的开端和制动踏板

// svg指当前svg DOM元素
// 暂停
svg.pauseAnimations();

// 重启动
svg.unpauseAnimations()

6、参考:

  • SVG Coca Cola使用简单介绍
  • SVG 研商之路 (18) - 再談 defs
  • 最好无敌的SVG SMIL animation动漫详细明白
  • https://www.nihaoshijie.com.cn/index.php/archives/667/

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:使用方式总结,实现动态模糊动画效果

关键词:

上一篇:可能是最全的

下一篇:没有了