动感的页面加载动画效果

　　如果您曾经访问过 Nicolas Zezuka 和 Active Theory 的出色的设计网站，你可能已经注意到在显示新内容之前动感的页面加载动画了。这种风格的动画效果最近非常流行，因此这篇文章想给你带来一些启示。　　这个效果的核心是让一个形状在页面窗口中动画显示并有展示活动的指示。当新内容被加载时，形状将以动画显示返回显示的页面。我们将使用 Snap.svg 动画库来实现，因为这个库让我们能够创建复杂的形状和有趣的变形转换效果。

立即下载      在线演示　　需要注意的是，这里的示例只是提供一种思路，动态内容加载是模拟的。另外没有做降级处理，动画和伪元素可能在某些浏览器无法正常工作。　　温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。　　我们显示遮罩的方式是，定义一个 SVG 路径动画：

12345

< div id = "loader" class = "pageload-overlay" data-opening = "M 0,0 80,-10 80,60 0,70 0,0" data-closing = "M 0,-10 80,-20 80,-10 0,0 0,-10" >      < svg xmlns = "http://www.w3.org/2000/svg" width = "100%" height = "100%" viewBox = "0 0 80 60" preserveAspectRatio = "none" >          < path d = "M 0,70 80,60 80,80 0,80 0,70" />      </ svg > </ div > <!-- /pageload-overlay -->

　　我们定义的初始路径在页面中是看不到的，开始和结果路径分别定义在 data-opening 和 data-closing 属性中。正如你所看到的，我们使用的是小型的 viewBox，但我们舒展绘图窗口的宽度和高度为100%，而不是保持长宽比。如果我们没有定义一个闭合的路径，我们将动画回到初始路径。　　请注意，我们也可以添加多个路径（用分号隔开），它允许 SVG 绘制你将在第一演示中看到的步骤明智的动画。 我们设置叠加划分到一个固定的位置，覆盖了整个页面，并通过给 ::before 和 ::after 伪元素添加样式来实现加载提示效果。

12345678910111213141516171819202122

.pageload-overlay {      position : fixed ;      width : 100% ;      height : 100% ;      top : 0 ;      left : 0 ;      visibility : hidden ; }     .pageload-overlay. show {      visibility : visible ; }     .pageload-overlay svg {      position : absolute ;      top : 0 ;      left : 0 ; }     .pageload-overlay svg path {      fill: #fff ; }

　　我们在这里使用 visibility，因为使用这些固定的风格定位与指针以及 SVG 的事件可能在移动端有些问题，所以我们通过定位和操纵父 DIV 来代替。 你可能已经注意到，圆形动画也从一个路径到另一个路径变换来实现（当然有其他的实现方式，例如缩放） ，但我们使用以下值来确定圆是响应式（ Rseponsive）的：

1	width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="xMidYMid slice"

　　使用 slice 将保持纵横比，但这样整个页面显示区域都可以被 viewBox 覆盖。我们的示例创建13种效果，但正如你所看到的，可能性是无止境的。我们真的很希望你能获得启发。