scotch 安装_建立新的Scotch.io动画SVG徽标

scotch 安装

In this article we will be looking at how we implemented the new animated logo of Scotch.io, a visual detail to complement all the improvements that the site has experienced. Something like the icing on the cake :)

在本文中，我们将研究如何实现Scotch.io的新动画徽标，该徽标是视觉上的细节，可以补充该网站经历的所有改进。 像蛋糕上的糖霜一样:)

For those who have not yet played a bit with the animation of the new logo, they can do so by moving the cursor inside (to resume animation) or outside (to pause animation) of the logo in the top left corner.

对于尚未使用新徽标的动画播放的用户，可以通过将光标移到左上角徽标的内部（以恢复动画）或外部（以暂停动画）来进行操作。

If you want to know all the details about how it was implemented, just keep reading!

如果您想了解有关其实现方式的所有详细信息，请继续阅读！

保持杯子内的波浪 ( Keeping the Waves Inside the Cup )

One of the first things we had to do was to keep the waves inside the cup.

我们要做的第一件事就是将波浪保持在杯子内。

First we thought about cutting the waves using just a circular HTML element, using border-radius and overflow: hidden in the CSS. However, this was not possible, since the waves had to be at a height similar to what they are in the original Scotch.io logo. Therefore it was necessary to use an SVG clip-path region, which is shown in red color in the following image:

首先，我们考虑仅使用圆形HTML元素，使用border-radius和overflow: hidden来切割波浪overflow: hidden在CSS中。 但是，这是不可能的，因为波浪的高度必须类似于原始Scotch.io徽标中的高度。 因此，必须使用SVG clip-path区域，在下图中以红色显示：

With this region in place, we could start to build the waves and animate them.

有了这个区域之后，我们就可以开始建立波浪并将其设置为动画了。

使用HTML和SVG构建波浪 ( Building the Waves with HTML and SVG )

Let's look at the basic HTML and SVG code to start developing the logo:

让我们看一下开始开发徽标的基本HTML和SVG代码：

<div class="scotch-logo">
    <img class="scotch-logoimage" src="img/blank-glass.png">
    <svg class="scotch-logoliquid" viewBox="0 0 30 48">
        <defs>
            <clipPath id="clip-path--glass">
                <path class="liquid__path-container" d="M 8.6 1.5 c 0 13.33 -4.17 20 -3.75 23.33 a 9.17 8.33 0 0 0 20.83 0 c 0.42 -3.33 -3.75 -10 -3.75 -23.33 Z"></path>
            </clipPath>
        </defs>
        <g clip-path="url(#clip-path--glass)">
            <!-- Here will go the liquid waves -->
        </g>
    </svg>
</div>

As you can see, the basic structure is quite simple. We have an image, which is the empty cup in the logo, and some SVG elements to build the animation.

如您所见，基本结构非常简单。 我们有一个图像，它是徽标中的空杯子，还有一些SVG元素来构建动画。

We have already defined the clip-path region that will help us show the waves only inside the cup. So let's see how we have defined the first wave:

我们已经定义了clip-path区域，它将帮助我们仅在杯子内部显示波浪。 因此，让我们看看如何定义第一波：

<path class="liquidpath liquidpath--top" d="M -80 22 C -75.08 16 -69.08 16 -64.17 22 S -53.25 28 -48.33 22 S -37.42 16 -32.5 22 S -21.58 28 -16.67 22 S -5.75 16 -0.83 22 S 10.08 28 15 22 S 25.92 16 30.83 22 S 41.75 28 46.67 22 S 57.58 16 62.5 22 S 73.42 28 78.33 22 S 89.25 16 94.17 22 S 105.08 28 110 22 l 0 30 l -190 0"></path>

It is a simple SVG path, which we have built supporting us in a tool to build SVG paths like waves, that we already used in a previous tutorial.

这是一条简单的SVG path ，我们已经构建了一个支持该工具的工具，用于构建像wave这样的SVG path ，我们已经在上一教程中使用过该工具。

The other wave was created using the same tool, testing different parameters and positions, to make our new logo as close as possible to the original.

另一个波浪是使用相同的工具创建的，测试了不同的参数和位置，以使我们的新徽标尽可能接近原始徽标。

At the end, with the help of some CSS transformations (translate specifically), we achieved a static logo, very similar to the original Scotch.io logo, only without the color difference for the intersection between the waves:

最后，借助一些CSS转换（专门translate ），我们获得了一个静态徽标，该徽标与原始Scotch.io徽标非常相似，只是在波浪之间的交点没有色差：

Later in this tutorial we will see how we added that third color!

在本教程的后面，我们将看到我们如何添加第三种颜色！

用CSS制作波浪动画 ( Animating the Waves with CSS )

With the waves in place, the most anticipated moment arrived: Animate them!

随着海浪的到来，最令人期待的时刻到了：给它们添加动画！

Actually we thought of a fairly simple animation, so that it would run smoothly, but that it would fulfill the main objective of being attractive enough. That's why we decided to animate the waves (SVG paths) with CSS translateX transformations, in opposite directions, and with a slight offset to give a touch of randomness.

实际上，我们想到的是一个相当简单的动画，这样它可以流畅地运行，但是可以满足吸引人的主要目标。 这就是为什么我们决定动画波（SVG path与CSS S） translateX转换，方向相反，并有轻微的偏移给触摸随机性。

After many tests, this was the final CSS code (SCSS) for the animation:

经过多次测试，这是动画的最终CSS代码（SCSS）：

// Code for liquid waves
.liquid__path {
  animation: 1.5s linear infinite;

  // First (top) wave
  &--top {
    transform: translateX(0);
    animation-name: liquid-top;
  }

  // Second (bottom) wave
  &--bottom {
    transform: translateX(-27px);
    animation-name: liquid-bottom;
    // Little phase shift respect the top wave
    animation-duration: 1.6s;
    animation-delay: -0.7s;
  }
}

// Animation for the top wave
@keyframes liquid-top {
  100% {
    transform: translateX(-31.66px);
  }
}

// Animation for the bottom wave
@keyframes liquid-bottom {
  100% {
    transform: translateX(1.66px);
  }
}

添加波浪的相交颜色 ( Adding the Intersection Color for Waves )

To add the third color, corresponding to the intersection between the waves, we thought of several options.

为了增加第三种颜色，对应于波浪之间的交点，我们想到了几种选择。

The first option that came to mind, was to use SVG filters to blend the two waves and get the third color. We quickly discarded that option because it did not have adequate browser support, and we would not have absolute control of the resulting color.

我想到的第一个选择是使用SVG滤镜混合两个波并获得第三种颜色。 我们很快放弃了该选项，因为它没有足够的浏览器支持，并且我们对结果的颜色没有绝对的控制权。

So then we thought about using a new clip-path, where the clipping region would be a copy of one of the waves, and the clipped region would be a copy of the other wave. Then we could arbitrarily assign any color we wanted to the intersection between the two waves.

因此，我们考虑使用新的clip-path ，其中剪切区域将是其中一个波的副本，而剪切区域将是另一个波的副本。 然后，我们可以将所需的任意颜色分配给两个波的交点。

So, the code that we had to add to our initial SVG code was the following:

因此，我们必须添加到初始SVG代码中的代码如下：

<!-- New SVG code to add the intersection color -->
<defs>
    <clipPath id="clip-path--liquid">
        <path class="liquidpath liquidpath--top-clip" d="M -80 22 C -75.08 16 -69.08 16 -64.17 22 S -53.25 28 -48.33 22 S -37.42 16 -32.5 22 S -21.58 28 -16.67 22 S -5.75 16 -0.83 22 S 10.08 28 15 22 S 25.92 16 30.83 22 S 41.75 28 46.67 22 S 57.58 16 62.5 22 S 73.42 28 78.33 22 S 89.25 16 94.17 22 S 105.08 28 110 22 l 0 30 l -190 0"></path>
    </clipPath>
</defs>
<g clip-path="url(#clip-path--glass)">
    <g class="liquidpath--clip-container" clip-path="url(#clip-path--liquid)">
        <path class="liquidpath liquid__path--bottom-clip" d="M -70 24.5 C -65.92 18.5 -59.92 18.5 -55.83 24.5 S -45.75 30.5 -41.67 24.5 S -31.58 18.5 -27.5 24.5 S -17.42 30.5 -13.33 24.5 S -3.25 18.5 0.83 24.5 S 10.92 30.5 15 24.5 S 25.08 18.5 29.17 24.5 S 39.25 30.5 43.33 24.5 S 53.42 18.5 57.5 24.5 S 67.58 30.5 71.67 24.5 S 81.75 18.5 85.83 24.5 S 95.92 30.5 100 24.5 l 0 30 l -170 0"></path>
    </g>
</g>

To also animate these copies of our original waves, we only had to add the new selectors to the CSS code that we already had, nothing more.

为了使原始wave的这些副本具有动画效果，我们只需要将新的选择器添加到我们已经拥有CSS代码中，仅此而已。

使用Interseccion颜色修复Firefox问题 ( Fixing Firefox Issue with the Interseccion Color )

Just after adding the color of the intersection between the waves, during the tests, we could verify that all the browsers ran the animation without problems, except Firefox.

在添加波浪之间的交点的颜色之后，在测试期间，我们可以验证除Firefox之外，所有浏览器都可以正常运行动画。

Firefox does not allow to animate with CSS the elements that have been defined within the defs tags, in our case the clip-path element. This is not a bug, since Firefox is honoring the SVG specification in this regard, being the other browsers those that allow a little more liberties.

Firefox不允许使用CSS为defs标签中定义的元素（在本例中为clip-path元素）制作动画。 这不是错误，因为Firefox在这方面尊重SVG规范，因为其他浏览器允许更多自由。

But for practical purposes, this was definitely an issue that we had to solve, or at least find a workaround for, since the animation did not looks good.

但是出于实际目的，这绝对是我们必须解决的问题，或者至少找到了解决方法，因为动画效果不佳。

The workaround that we used was to simply hide that third color for Firefox, avoiding the problem of not being able to animate it. Another solution could have been to use Javascript to perform the animations, but we wanted to keep the CSS animations, and also avoid adding extra dependencies only for this visual detail.

我们使用的解决方法是简单地为Firefox隐藏该第三种颜色，避免了无法为其设置动画的问题。 另一个解决方案可能是使用Javascript来执行动画，但是我们希望保留CSS动画，并且还避免只为该视觉细节添加额外的依赖项。

So, what we did was:

因此，我们所做的是：

1. Hide the third color initially through a CSS class.
   最初通过CSS类隐藏第三种颜色。
2. Detect if the browser that was being used was Firefox.
   检测正在使用的浏览器是否是Firefox。
3. In case of NOT being Firefox, we remove the CSS class, to show the third color properly.
   如果不是Firefox，我们将删除CSS类，以正确显示第三种颜色。

添加滴 ( Adding Drops )

So far, the animation looked great, but we just wanted to add another small detail: drops.

到目前为止，动画看起来很棒，但是我们只想添加另一个小细节：水滴。

It was fairly simple to add them into the SVG code. Just two small SVG circles did the job:

将它们添加到SVG代码中非常简单。 只有两个SVG小型circle完成了这项工作：

<circle class="liquiddrop liquiddrop--top liquiddrop--1" cx="18.3" cy="3.3" r="1.5"></circle>
<circle class="liquiddrop liquiddrop--bottom liquiddrop--2" cx="12" cy="5" r="1.5"></circle>

Next we just needed to animate them with CSS as well:

接下来，我们只需要使用CSS为它们设置动画：

// Code for drops
.liquid__drop {
  animation: 4.5s ease-in-out infinite;

  // First drop
  &--1 {
    transform: translate(0, 25px);
    animation-name: drop-1;
    animation-delay: 2s;
  }

  // Second drop
  &--2 {
    transform: translate(0, 25px);
    animation-name: drop-2;
  }
}

// Animation for the first drop
@keyframes drop-1 {
  20% { transform: translate(0, 25px); }
  40% { transform: translate(-2px, 10px); }
  60% { transform: translate(-4px, 25px); }
}

// Animation for the second drop
@keyframes drop-2 {
  20% { transform: translate(0, 25px); }
  40% { transform: translate(2px, 5px); }
  60% { transform: translate(4px, 25px); }
}

Finally, to integrate the animation to the new Scotch.io site, we implemented a simple logic to pause and resume the animation from Javascript, in order to start or stop the animation in different situations.

最后，为了将动画集成到新的Scotch.io网站，我们实现了一个简单的逻辑来暂停和恢复Javascript中的动画，以便在不同情况下启动或停止动画。

结论 ( Conclusion )

And that's how we managed to develop a nice and simple animation for the logo of the new Scotch.io site.

这就是我们设法为新的Scotch.io网站的徽标开发美观而简单的动画的方法。

If you want to see the complete code, or even play with it, you can do it in the Codepen demo.

如果您想查看完整的代码，甚至要使用它，可以在Codepen演示中进行操作 。

We hope you have enjoyed this tutorial and that it has been useful!

我们希望您喜欢本教程并且对您有所帮助！

翻译自: https://scotch.io/tutorials/building-the-new-scotchio-animated-svg-logo

scotch 安装