整页幻灯切换，通过SVG元素实现过渡效果

Demo地址：http://codyhouse.co/demo/animated-svg-hero-slider/index.html
下载链接：http://codyhouse.co/redirect/?resource=animated-svg-hero-slider

浏览器支持：IE Chrome Firefox Safari Opera 9+

有一天，我在网上寻找灵感，无意间打开了本田HR-V漂亮的网站。在这个网站里，从一个区块导航到另一个区块的动画效果，是使用 元素创建的动画形状实现的。

我们想做个类似的站点，但不使用画布，而是使用 SVG。同样，也不采用必须垂直滚动才能触发动画的思路，而是把所有资源整合成一个 Hero Slider。 使用如下资源：

• Snap.svg：用于动画SVG元素
• Icons：来自我们的Nucleo library
• Images：来自Unsplash

HTML结构

HTML包含3个主元素：一个包含幻灯片的无序列表（ul.cd-slider）、一个包含幻灯片导航的有序列表（ ol.cd-slider-navigation），还有一个div.cd-svg-cover，用于在切换幻灯片时显示可见的动画形状。

<section>
    <ul>
        <li>
            <div>
                <h2>Animated SVG Slider</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, explicabo.
                </p>
                <a href="#0">Article & Download</a>
            </div>
        </li>
        <li>
            <!-- slide content here -->
        </li>
        <!- additional slides here -->
    </ul>
    <!- .cd-slider -->
    <ol>
        <li>
            <a href="#0"><em>Item 1</em></a>
        </li>
        <li>
            <a href="#0"><em>Item 2</em></a>
        </li>
        <li>
            <a href="#0"><em>Item 3</em></a>
        </li>
        <li>
            <a href="#0"><em>Item 4</em></a>
        </li>
    </ol>
    <!- .cd-slider-navigation -->
    <div data-step1="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z" data-step2="M1400,800H383L770.7,0.6c0.2-0.3,0.5-0.6,0.9-0.6H1400v294V800z"
    data-step3="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z" data-step4="M615,800H0V0.6C0,0.4,0,0.3,0,0h615L393,312L615,800z"
    data-step5="M0,800h-2V0.6C-2,0.4-2,0.3-2,0h2v312V800z" data-step6="M-2,800h2L0,0.6C0,0.3,0,0.3,0,0l-2,0v294V800z"
    data-step7="M0,800h1017L629.3,0.6c-0.2-0.3-0.5-0.6-0.9-0.6L0,0l0,294L0,800z"
    data-step8="M0,800h1400V0.6c0-0.2,0-0.3,0-0.6L0,0l0,294L0,800z" data-step9="M785,800h615V0.6c0-0.2,0-0.3,0-0.6L785,0l222,312L785,800z"
    data-step10="M1400,800h2V0.6c0-0.2,0-0.3,0-0.6l-2,0v312V800z">
        <svg height='100%' width="100%" preserveAspectRatio="none" viewBox="0 0 1400 800">
            <title>SVG cover layer</title>
            <desc>an animated layer to switch from one slide to the next one</desc>
            <path id="cd-changing-path" d="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z"/>
        </svg>
    </div>
    <!- .cd-svg-cover -->
</section>
<!-- .cd-slider-wrapper -->

添加样式

默认情况下，所有幻灯片的不透明度为0（opacity:0），且绝对定位，相互重叠（top: 0、left:0）。通过给选中的幻灯片添加 .visible 类，令其可见（ opacity: 1 ）。

.cd-slider-wrapper {
  position: relative;
}

.cd-slider > li {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.cd-slider > li.visible {
  /* selected slide */
  position: relative;
  z-index: 2;
  opacity: 1;
}

处理事件

让SVG产生动画效果，可以改变.cd-svg-container中路径元素的d属性。

首先，要定义动画的各个步骤（我们计划用5步从一个幻灯片切换到下一个幻灯片，反之也是5步）。换句话说，一个往返需要创建10个不同的SVG path元素（为保证动画正确，锚点数相同），效果如下面Illustrator文件的截图所示（虽然有些步骤中看似空的，实际上也包含了路径）。

定义好路径后，给.cd-svg-cover添加data-stepn属性（每步一个），使其等于定义路径的d属性（以方便JavaScript读取）。

然后使用Snap.svg提供的animate()方法，实现不同路径的切换：

var svgCoverLayer = $('.cd-slider-wrapper').find('div.cd-svg-cover'), svgPath = Snap('#cd-changing-path'), path1 = svgCoverLayer.data('step1');

svgPath.animate(

{'d': path2}

, 300, customMinaAnimation, function(){ //...
});

缓动函数是一个自定义的贝塞尔曲线函数，可惜Snap.svg中默认不包含，不过我们可以为自定义的贝塞尔曲线函数创建一个自定义的调速函数（参见StackOverflow中相关的内容）。

Illustrator小技巧：为了实现预期效果，需要<path>元素。在Illustrator中，如果只使用直线，会创建<polygon>元素。可以为其中一个锚点添加border-radius，将其转换为<path>。

原文地址：http://codyhouse.co/gem/animated-svg-hero-slider/

扫码关注w3ctech微信公众号