重现代码_重现Google Design所见的触摸纹波效果

最新推荐文章于 2024-10-10 18:18:43 发布

daique1908

最新推荐文章于 2024-10-10 18:18:43 发布

阅读量125

点赞数

文章标签： python css js java html ViewUI

重现代码

Google的新设计工作量巨大，可以进行大量对话。但是，除了谈论材料设计的理论以及Google最新努力的含义之外，我们将重点介绍Google在其设计目标网页上采用的一种有趣技术。

当用户单击其中一个块时，SVG圆圈将从用户单击的点开始扩展，以填充大部分框。谷歌将此称为触摸波纹。我们将使用几行jQuery，一些简单HTML和CSS重新创建这种效果。

让我们开始吧！

基本网格

在开始之前，我们需要建立一个基本的网格。我们将在不使用框架的情况下构建网格元素，但是该技术可以在框架上很好地工作。

<div class="row">
    <div class="col col-1-3 blue"></div>
	<div class="col col-1-3 orange"></div>
	<div class="col col-1-3 green"></div>
</div>
<div class="row">
	<div class="col col-1-2 gray"></div>
	<div class="col col-1-2 blue"></div>
</div>
<div class="row">
	<div class="col col-1-4 orange"></div>
	<div class="col col-1-2 green"></div>
	<div class="col col-1-4 blue"></div>
</div>

列类映射到分数，因此“ col-1-3”表示包含元素的宽度的1/3。

基本CSS

接下来，我们将设置我们的列类。我们正在使用LESS，它允许我们嵌套规则并利用&运算符。我们不会涉及LESS的细节，但是为了本教程的缘故，我们将解释&运算符的工作方式。但是首先，这是各列的LESS。

.col {
  position: relative;
  display: block;
  float: left;
  margin: 1.25%;
  background-color: #444;
  color: #fff;
  padding: 100px;
  box-sizing: border-box;
  &.orange {
    background-color: #EF8130;
  }
  &.blue {
    background-color: #00ADE2;
  }
  &.gray {
    background-color: #444;
  }
  &.green {
    background-color: #76CE51;
  }
  &-1- {
    &2 {
      width: 47.5%;
    }
    &3 {
      width: 30.8333%;
    }
    &4 {
      width: 22.5%;
    }
  }
}

注意&规则。 &运算符将其后的字符串附加到父项。换句话说，这个更少：

.col {
    &-1 {
		&-3 {
			color: #fff;
		}
	}
}

将导致此CSS：

.col-1-3 { color: #fff; }

而这个：

&.col {
    &.orange {
		background-color: #EF8130;
	}
}

将导致此CSS：

.col.orange {
    background-color: #EF8130;
}

SVG将如何工作

接下来，让我们计划一下单击将如何工作，以及如何将SVG放置在每个框中。

当用户单击任何一个框时，我们将计算鼠标到该框角的偏移量。然后，我们将使用这些坐标放置圆。我们还将SVG元素绝对放置在盒子中，盒子本身将相对放置。我们将利用SVG的本机<circle>元素以及自定义jQuery动画功能。

首先，让我们为SVG元素设置CSS。

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
circle {
  fill: rgba(255,255,255,0.1);
}

填充利用RGBa，它实际上以10％的白色填充了圆形元素。

JavaScript

首先，我们将在.col元素上设置一个单击侦听器，并抓住鼠标相对于文档的位置（这将忽略滚动位置）。

滑鼠位置

该位置是相对于盒子本身的。使用$(this).offset()获取框的左上角。

$(".col").on("click", function(e){
    	var x = e.pageX;
		var y = e.pageY;
		var clickY = y - $(this).offset().top;
		var clickX = x - $(this).offset().left;
    var box = this;
    // ...
});

注意：本示例使用的是jQuery。

接下来，我们将clickX和clickY变量转换为整数，因为它们在某些浏览器中显示为浮点数。这确保了避免子像素混叠导致的任何渲染问题。但是请注意，效果生效不一定需要这样做。

var setX = parseInt(clickX);
    var setY = parseInt(clickY);

删除现有的SVG元素

接下来，我们将从单击的框中删除所有现有的SVG元素。如果打算将SVG添加到包装盒的内容中，请确保将类似jQuery的.not()与类结合使用，以避免删除内容。

$(this).find("svg").remove();

附加新的SVG

接下来，我们附加我们通过将文本传递到jQuery函数中而创建的SVG。

$(this).append('<svg><circle cx="'+setX+'" cy="'+setY+'" r="'+0+'"></circle></svg>');

setX和setY将圆心定位在我们之前获得的点击点处。

动画圆半径

接下来，我们使用jQuery的animate函数对r属性（设置半径）进行animate 。 animate函数不支持动画属性，因此我们使用step选项，该选项在动画本身的每一步之后调用。

var c = $(box).find("circle");
c.animate(
  {
    "r" : $(box).outerWidth()
  },
  {
    easing: "easeOutQuad",
    duration: 400,
       step : function(val){
			c.attr("r", val);
		}
  }
);

请记住，该box之前定义为单击的框。我们还利用了jquery.easing ，这使我们能够为easing属性定义“ easeOutQuad”。

JavaScript，一起

最终JavaScript将如下所示：

$(".col").on("click", function(e){
    var x = e.pageX;
	var y = e.pageY;
	var clickY = y - $(this).offset().top;
	var clickX = x - $(this).offset().left;
  var box = this;
  
  var setX = parseInt(clickX);
  var setY = parseInt(clickY);
  $(this).find("svg").remove();
  $(this).append('<svg><circle cx="'+setX+'" cy="'+setY+'" r="'+0+'"></circle></svg>');
  

  var c = $(box).find("circle");
  c.animate(
    {
      "r" : $(box).outerWidth()
    },
    {
      easing: "easeOutQuad",
      duration: 400,
     	step : function(val){
				c.attr("r", val);
			}
    }
  );
});