虚线动画_在虚线上签名：使用航点完成动画

最新推荐文章于 2024-09-26 10:01:01 发布

daique1908

最新推荐文章于 2024-09-26 10:01:01 发布

阅读量279

点赞数

文章标签： css html java css3 js ViewUI

虚线动画

在上一个教程中，我们使用CSS为SVG签名制作了动画。这是一个很棒的效果，使其看起来好像单词正被写在屏幕上一样。在本教程中，我们将进一步介绍并在选择时使用Waypoint触发动画。

问题

我们的动画签名不是完美的-书写效果从页面加载时开始，即使SVG位于页面底部，也看不见。理想情况下，只要签名第一次滚动到视图中，我们就希望对其进行动画处理。

为此，我们需要使用JavaScript和Waypoints库中的一些帮助。航点将检测我们的签名何时滚动到视图中，这时将在<svg>元素中添加一个类，并以此触发动画。

8.添加一些填充内容

首先，添加大量的段落和一些文本以填充页面顶部，并将我们的签名从视口中移出。我们还将添加一些通用样式，以使整个过程看起来更简单：

body {
  padding-top: 20px;
  width: 90%;
  max-width: 580px;
  margin: 0 auto;
  color: #263238;
}

p {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 1.5em;
}

#signature {
  width: 40%;
  padding: 2em 0;
}

奖励积分！

我使用了一种出色的线框字体，称为BLOKK Neue-这是我们演示中非常出色的样式，并吸引了我们的签名。如果需要，请下载字体并自己使用。

p {
  font-family: "BLOKKNeue-Regular", serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 1.5em;
}

有关如何使用网络字体的更多信息，请查看Jeremy Loyd的Figuring Out @ font-face 。

9.引入Waypoints.js

对于我来说，不寻常的是，我不会依赖jQuery。 Waypoints 3.0引入了一个完全免费的框架版本，所以我会大胆地使用它。如果您喜欢jQuery语法，或者由于其他原因已经将jQuery挂接到项目中并且发现它更易于使用，则一定要使用其他Waypoints文件并更改我们相应编写的代码。

无论如何，都可以抓取文件，从HTML文档（或在CodePen JS面板中）链接到该文件，然后坐下来喝咖啡五分钟。

指向SVG

我们需要告诉Waypoint关于我们的<svg> ，所以让我们抓取它并将其分配给变量mySignature ：

var mySignature = document.getElementById('signature');

现在，我们实例化Waypoint类，因此将以下代码段添加到CodePen中的JS窗格中（如果这样做的话，也可以将其添加到HTML文档底部的<script>标记内）。

我们必须确保将mySignature传递给element选项（这样它就知道要注意哪个元素），并确保定义了handler选项。处理程序是我们决定触发航点时会发生什么的地方。

var mySignature = document.getElementById('signature');

var waypoint = new Waypoint({ 
    element: mySignature,
    handler: function (direction) {
        
    }
})

窗底

当我们的<svg>元素的顶部碰到窗口顶部时，上面的代码将触发“某物”。当<svg>的底部碰到窗口的底部时，换句话说，当它完全滚动到视图中时，我们需要一个触发点。为此，我们可以使用Waypoint的偏移。偏移量使我们可以准确指定何时需要元素触发动作，在这种情况下，我们要使用： offset: 'bottom-in-view'如下所示：

var mySignature = document.getElementById('signature');

var waypoint = new Waypoint({ 
    element: mySignature,
    handler: function (direction) {
        
    },
    offset: 'bottom-in-view'
})

处理程序

最后，我们需要指定触发航点时将要发生的情况。我们希望将一个类（ animate ）添加到我们的<svg> ，该类将是我们将动画附加到的类。因此，只有在添加课程后，动画才会开始播放。我们将mySignature.classList.add('animate')添加到处理函数中，为我们提供一个完整的脚本，如下所示：

var mySignature = document.getElementById('signature');

var waypoint = new Waypoint({ 
    element: mySignature,
    handler: function (direction) {
        mySignature.classList.add('animate')
    },
    offset: 'bottom-in-view'
})

10.在我们CSS中使用`.animate`

还记得我们定义动画的所有那些规则吗？我们将更加具体。而不是：

.stroke-I {
  stroke-dasharray: 80;
  animation: write1 2s 1 ease-out;
}

我们将仅在将animate类添加到父类<svg>时使每个应用：

.animate .stroke-I {
  stroke-dasharray: 80;
  animation: write1 2s 1 ease-out;
}

结果应该非常接近，请尝试向下滚动：

11.不透明度

最后剩下的细节是，默认情况下签名是完全可见的，然后当滚动到视图中时，在“绘制”之前消失时会出现闪烁。我们可以通过以下方法解决此问题：首先使<svg>透明，然后在添加animate类时将其animate 。

我们将使用opacity: 0; 在其默认状态下，然后添加opacity: 1; 准备就绪时：

#signature {
  width: 40%;
  padding: 2em 0;
  opacity: 0;
}

#signature.animate {
  opacity: 1;
}

结论

这是一个练习多种技能的很棒的小项目！我们在网页上使用了内联SVG，通过剥离属性并将其转换为CSS属性对其进行了清理，我们探索了受控良好CSS动画，最后在JavaScript的帮助下以功能性方式使最终结果起作用。

这是一个有趣的最终结果，但是您还能用它做什么？首先，可以通过使用预处理器使CSS更加整洁-可以对其进行整理。您也可以将这种技术用于徽标，推荐书或号召性用语。自己尝试，然后在评论中发布结果！

翻译自: https://webdesign.tutsplus.com/tutorials/sign-on-the-dotted-line-finishing-your-animation-with-waypoints--cms-23848