网站地图 | 联系我们 赣州网站建设 赣州做网站 赣州网站制作 赣州网站优化
你现在的位置:网站首页 > 资源分享 > JS插件 > 正文内容


创建网页设计与SVG涟漪效应

发布时间:2015-10-16 | 编辑 : 小勇 | 分类 : JS插件 | 阅读: 次 | 评论 :0

深入教程如何构建在谷歌列出的涟漪效应页面设计的径向行动规范和SVG的权力和GreenSock结合起来

 

SVGRipples

演示 下载源

随着谷歌的材料设计是一种视觉语言,着手创建一个统一的体验平台和设备。 谷歌的例子描述了通过他们 动画 部分的材料在野外指南已经变得如此的许多家庭都知道这些交互作为谷歌品牌的一部分。

在本教程中,我们将向您展示一种构建连锁反应特别概述了下 光线的作用 谷歌材料设计规范的结合SVG和GreenSock的权力。

响应行动

谷歌定义响应交互使用光线的作用如下:

径向行动是墨水的视觉涟漪向外蔓延的输入。

一个输入事件和屏幕上的行动之间的联系应该直观地表示把它们组合在一起。 对于触摸或鼠标,这发生在接触点。 一点涟漪表明何时何地发生联系,承认收到触摸输入。

转换,或输入事件引发的行为,应该在视觉上连接到输入事件。 震中附近的连锁反应发生远早于反应。

谷歌很清楚,输入反馈应该从它的起源和发生向外传播。 例如,如果用户点击一个按钮直接在中间,这涟漪向外扩大,初始接触点。 这就是我们如何显示何时何地发生联系,以确认收到的用户输入。

在SVG光线的作用

脉动技术已经由许多开发人员主要使用CSS等技术 @keyframes 转换 转换 伪欺骗, 这个特性 甚至额外的标记等 跨度 或 div 。 而不是使用CSS,让我们看看如何使用SVG创建这个光线的作用GreenSock的TweenMax 图书馆的运动。

创建SVG

信不信你不需要的应用程序(如Adobe Illustrator甚至素描作者这种效果。 SVG的标记可以编写使用一些XML标记可能已经熟悉和使用自己的工作。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol viewBox="0 0 100 100">symbol>
svg>

对于那些使用SVG精灵图标,您将注意到的使用 < >符号 。 的 象征 元素允许作者在个体匹配相关的XML 象征 随后实例和实例化他们、也就是说使用在应用程序像一个邮票。 每个实例上是相同的,这是唯一的创造者;它驻留在的象征。

接受属性,如象征元素 viewBox 和 preserveAspectRatio 提供一个 象征 scale-to-fit能力在一个矩形窗口定义的引用 使用 元素。 莎拉Soueidan 写了一篇精彩的文章 和 建立一个交互式工具 帮助理解viewBox 一劳永逸地坐标系统。 简单地说,我们定义最初的x和y坐标值(0,0),最后定义一个SVG画布的宽度和高度(100100)。

下一个拼图,这个XML是添加一个形状我们打算动画涟漪。 这就是 圆 元素出现的原因。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol viewBox="0 0 100 100">
    <circle />
  symbol>
svg>

的 圆 将需要更多的信息然后它拥有什么才能正确显示在SVG的 viewBox 

<circle cx="1" cy="1" r="1"/>

的属性 残雪 和 cy 协调立场相对于吗 viewBox SVG的; 象征 在我们的例子中。 为了使点击感觉自然,我们需要确保下面的触发点建立直接接收输入时用户的指尖。

circle-coordinates-diagram

中间的例子图的属性创建一个2 px x 2 px圆半径为1 px。 这将确保我们的圆作物不像我们看到在底部图的例子。

<div style="height: 0; width: 0; position: absolute; visibility: hidden;" aria-hidden="true">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false">
    <symbol id="ripply-scott" viewBox="0 0 100 100">
      <circle id="ripple-shape" cx="1" cy="1" r="1"/>
    symbol>
  svg>
div>

最后,我们给它缠上一股 div 包含内联CSS隐藏雪碧简洁。 这可以防止它在页面呈现时占用空间。

在撰写本文时,SVG雪碧包含符号块引用它的梯度定义您将看到演示-通过ID不能正确地找到梯度和渲染,的原因 可见性 属性的使用 显示:没有 随着 整个梯度失败 在Firefox和其他浏览器。

的使用 focusable = " false " 需要所有IE的11;除了边缘,因为它还没有被测试。 这是一个提议从SVG 1.2规范 描述键盘焦点控制应该是如何工作的 。 即实现这一点,但没有人。 对于HTML的一致性,以及更大的控制权, SVG 2是采用 tabindex 而不是 。 HT, 阿米莉亚Bellamy-Royds 学校的这一建议。

 
 

做标记

编写可靠的标记是我们早上起床的原因让我们编写一个语义 按钮 元素作为我们的对象,将揭示这涟漪。

<button>Click for Ripplebutton>

标记的结构 按钮 最熟悉的是直接包括一些填充文本。

<button>
  Click for Ripple
  <svg>
    <use xlink:href="#ripply-scott">use>
  svg>
button>

利用 象征 元素创建之前,我们需要一种方法来参考利用 使用 在按钮的SVG元素引用的符号的ID属性的值。

<button id="js-ripple-btn" class="button styl-material">
  Click for Ripple
  <svg class="ripple-obj" id="js-ripple">
    <use width="100" height="100" xlink:href="#ripply-scott" class="js-ripple">use>
  svg>
button>

最后一个标记为CSS和JavaScript钩子具有额外的属性。 属性值开始“js -”表示值只有在JavaScript,从而删除它们会妨碍相互作用,但不影响造型。 这有助于区分CSS选择器从JavaScript钩子为了避免彼此需要删除或更新时,造成混乱。

的 使用 元素必须有一个宽度和高度定义否则将不可见的观众。 你也可以定义这个CSS如果你决定不把它直接在元素本身。

样式的联合

时间编写CSS时,很少需要达到期望的结果。

.ripple-obj {
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  fill: #0c7cd5;
}

.ripple-obj use {
  opacity: 0;
}

这是剩下的,当删除声明用于一般样式。 的使用 pointer-events 消除了SVG脉动成为鼠标事件的目标,因为我们只需要父对象的反应, 按钮 元素。

最初因此必须无形的涟漪 不透明度 值设置为零。 我们也定位涟漪对象的左上角 按钮 。 我们可以中心波纹形状,但因为这事件发生时根据用户交互担心是毫无意义的地位。

赋予它生命

呼吸生命这种交互是这都是什么和什么材料设计指导方针文档作为视觉语言的最重要的一个部分。

本文标签   网页设计   SVG  

赞助我们:如果你觉得本站的内容对你确实有所帮助,请赞助我们让我们有动力为你继续奉献更多有用的内容→赞助我们

版权说明:如非注明,本站文章均为 小勇工作室 原创,转载请注明出处和附带本文链接 http://www.yl0797.com/html/2015/jq_1016/7.html。


联系我们
QQ:
873268813
旺旺:
wsuper勇
邮箱:
给我发邮件
QQ群:
加入交流群

Powered By 小勇工作室,Copyright www.yl0797.com © 2008-2018, 赣ICP备15004575号