css svg_CSS和SVG的创意飞溅过渡

css svg

SVG path's are really awesome! And its versatility is what makes them even more impressive and useful for creating engaging animations.

SVG路径真的很棒！ 而且它的多功能性使它们在制作引人入胜的动画时更加引人注目和有用。

In this tutorial we'll be creating an eye catching animation, just using SVG paths and CSS transitions. To make things easier, we will also be using Pug and Sass, HTML and CSS preprocessors respectively. They will allow us to write much cleaner and more organized code, and also help with maths.

在本教程中，我们将使用SVG路径和CSS过渡来创建引人注目的动画。 为了使事情变得简单，我们还将分别使用Pug和Sass，HTML和CSS预处理程序。 它们将使我们能够编写更简洁，更有条理的代码，并帮助数学。

The animation we'll be creating, has been inspired by this shot on Dribbble, by Clément Brichon. More specifically, we'll be building something like this:

我们将要创建的动画的灵感来自ClémentBrichon在Dribbble上的拍摄 。 更具体地说，我们将构建如下所示的内容：

The main idea to get it working in the browser, is to have a background image, and then the entire black background is composed by SVG paths that we can animate to achieve an effect similar to the animated prototype.

使它在浏览器中运行的主要想法是具有背景图像，然后整个黑色背景由SVG路径组成，我们可以对其进行动画处理以实现类似于动画原型的效果。

Important: Please note that we are using some techniques that are not fully supported by all browsers. The final demo has been tested successfully in Chrome, Opera and Firefox (Linux).

重要提示：请注意，我们使用的某些技术并非所有浏览器都完全支持。 最终演示已在Chrome，Opera和Firefox（Linux）中成功测试。

SVG路径绘图入门 ( Getting started with SVG paths drawing )

To implement the animation, we will use the technique of "drawing" SVG paths. You can get started with the technique reading any of this great tutorials:

为了实现动画，我们将使用“绘制” SVG路径的技术。 您可以通过阅读以下任何出色的教程来开始使用该技术：

• Animated line drawing in SVG by Jake Archibald
  SVG中的动画线条画，作者：Jake Archibald
• How SVG Line Animation Works by Chris Coyier
  SVG Line动画的工作原理Chris Coyier

However, this time we will be using a variation of this technique, so that we will not animate the stroke-dashoffset property, but the stroke-dasharray. This will provide us a little more flexibility to draw the paths in the direction we want. If you want to know more about how this technique works, you can read this tutorial that I wrote some time ago, where it is described in detail (section "Drawing from begin to end").

但是，这一次，我们将使用此技术的一种变体，因此我们将不对stroke-dashoffset属性进行动画stroke-dashoffset ，而是对stroke-dasharray 。 这将为我们提供更大的灵活性，以便按所需方向绘制路径。 如果您想进一步了解该技术的工作原理，可以阅读我前一段时间写的本教程 ，其中对此进行了详细描述（“从头到尾绘制”部分）。

使用Pug生成HTML ( Generating the HTML with Pug )

Let's start by saying that Pug (formally known as Jade) is a high performance template engine, heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. If you want to learn more about it, here is a nice tutorial.

首先，我们说Pug（以前称为Jade）是一种高性能模板引擎，受Haml的影响很大，并使用JavaScript实现了Node.js和浏览器。 如果您想了解更多有关它的信息， 这里有一个不错的教程 。

Pug's syntax is pretty straightforward, and we will be using just variables and mixins, leaving HTML markup as is. So you may not need to read a tutorial to understand the following code :)

Pug的语法非常简单，我们将仅使用变量和mixins，而保留HTML标记。 因此，您可能无需阅读教程即可了解以下代码:)

//- Background image and button
<div class="background-image"></div>
<button>Toggle Animation</button>

//- Some variables to help with maths
- var circlesNumber = 5;
- var strokeWidth = 150;
- var radius = 100;
- var width = radius * 2;
- var height = radius * 2;
- var left = width / 2;
- var top = height / 2;

//- The main function to build a circle (SVG path)
//- Formula taken from this answer: http://stackoverflow.com/a/10477334
mixin circle(className)
    <path class="#{className}" d="M #{left} #{top} m -#{radius} 0 a #{radius} #{radius} 0 1 0 #{radius * 2} 0 a #{radius} #{radius} 0 1 0 -#{radius * 2} 0"/>

//- Center circle
<svg class="svg-center" width="#{width}" height="#{height}">
    + circle('path-center')
</svg>

//- Reset some variables to build the other circles
- width = 10000;
- height = 5000;
- left = width / 2;
- top = height / 2;
- radius += strokeWidth / 2 - 1;

//- Very big SVG
<svg class="svg-borders" width="#{width}" height="#{height}">

    //- Build the circles, increasing the radius at each iteration
    while circlesNumber--
        + circle('path-borders')
        - radius += strokeWidth - 1;
</svg>

Basically, what we have done here is to generate several SVG paths as circles. Then with a little style, we will make the stroke of each path very thick, covering the whole screen as we want.

基本上，我们在这里所做的是生成多个SVG路径作为圆。 然后用一点样式，使每个路径的笔触非常粗大，覆盖我们想要的整个屏幕。

绘制SVG路径 ( Drawing the SVG paths )

Now that we have our markup ready, we can start animating the SVG paths with CSS. So without further ado let's see the code needed to get it working:

现在我们已经准备好标记，我们可以开始使用CSS对SVG路径进行动画处理。 因此，事不宜迟，让我们来看一下使其正常工作所需的代码：

// Same variables used in HTML
$circlesNumber: 6;
$strokeWidth: 150;
$radius: 100;

// PI value (approximately)
$pi: 3.15;

// A big length
$maxLen: 10000;

// Loop to generate convenient stroke-* values
@while $circlesNumber > 0 {

  // Calculate the SVG path length (approximately)
  $currentRadius: $radius + ($circlesNumber) * $strokeWidth - $strokeWidth / 2;
  $len: 2 * $pi * $currentRadius;

  // Draw the entire path
  .path-borders:nth-child(#{$circlesNumber}) {
    stroke-dashoffset: $maxLen;
    stroke-dasharray: $maxLen 0 $len;
  }

  .open-state {

    // "Erase" the path, with alternating direction
    .path-borders:nth-child(#{$circlesNumber}) {
      @if ($circlesNumber % 2 == 0) {
        stroke-dasharray: $maxLen 0 0;
      } @else {
        stroke-dasharray: $maxLen $len $len;
      }
    }
  }

  // Next iteration
  $circlesNumber: $circlesNumber - 1;
}

To make things clearer, let's have a look a the CSS output just for one iteration:

为了使事情更清楚，让我们看一下一次迭代CSS输出：

.path-borders:nth-child(2) {
  stroke-dashoffset: 10000;
  stroke-dasharray: 10000 0 2047.5;
}

.open-state .path-borders:nth-child(2) {
  stroke-dasharray: 10000 0 0;
}

That's all the CSS needed to get a single SVG path working! The complexity in the SCSS code is associated with calculating these values automatically, avoid repeating code and facilitate maintenance.

这就是使单个SVG路径正常工作所需的所有CSS！ SCSS代码中的复杂性与自动计算这些值相关联，避免了重复代码并简化了维护。

添加一些动画细节 ( Adding some animation details )

To get the most of our animation, we need to pay attention to details. So, let's apply some more effects to complement the drawing animation.

要充分利用我们的动画，我们需要注意细节。 因此，让我们应用更多的效果来补充绘图动画。

.open-state {

  // Scaling down the image
  .background-image {
    transform: scale(1);
  }

  // Rotating SVG paths (except the center circle)
  .svg-borders {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  // Animating the center circle
  .path-center {
    stroke-width: 400px;
  }
}

精加工 ( Finishing )

And we are done! With some more style touches we should get the desired effect. The live version is here. Enjoy it!

我们完成了！ 通过更多的样式修饰，我们应该获得期望的效果。 现场版本在这里 。 好好享受！

Please note that to focus the tutorial on how to build and animate SVG paths, some details in the code have been omitted. As always, we invite you to get the full code on Github, and we really hope you find it useful!

请注意，为了使本教程专注于如何构建和动画化SVG路径，代码中的一些细节已被省略。 与往常一样，我们邀请您在Github上获取完整的代码 ，我们真的希望您发现它有用！

翻译自: https://scotch.io/tutorials/creative-splash-transition-with-css-and-svg

css svg