SVG——入门，路径变形动画

刚学了两天svg基础，随手记个笔记，通过改变svg锚点路径创作动画效果，今天的demo是一个播放和暂停的按钮

动画的原理，无论是帧动画，还是位移动画，无非就是将一个图形从a状态转变为b状态的一个过程

首先想象一下播放和暂停的按钮应该是什么样子的

通过动画，将暂停的画面改变为播放的画面，

因为涉及到图形的坐标和形状，这个比较考验空间想象力，我本身呢这种想象力就不是很好，所以在ps里画了一个草图，用来计算尺寸和坐标，作为辅助，

现在来画背景的圆，

<svg width="100%" height="100%">
    <circle class="bgI" cx="50" cy="50" r="50" fill="#000"/>
</svg>

圆的中心点在svg的左上角50，50的位置开始，半径为50，填充色黑色，

再来画白色的三角形，这里的处理是将白色的三角形用两个四边形的路径组合，这样方便之后的动画

接下来标注用ps标注一下各个锚点的坐标，从0，0开始

由图中可以看出左边(.left)的白色四边形的坐标分别为 32,21 51,32 54,68 33,80(顺时针)

右边的(.right)的白色三角形(暂且先看成三角形)的坐标分别为 54,32 85,50 54,68(顺时针)

为什么说是暂且看成三角形呢因为之后我们写path坐标的时候需要些四个只不过第二个和第三个是同一个坐标点，现在可以写代码了，因为我不习惯在标签内写样式或者路径，所以提出来在style中去写，

    <svg width="100%" height="100%">
        <circle class="bgI" />
        <path class="left" />
        <path class="right" />
    </svg>


        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            height: 100%;
        }

        .bgI {
            cx: 50;
            cy: 50;
            r: 50;
            fill: #000;
        }

        .left,
        .right {
            fill: #fff;
        }

        .left {
            d: path('M32,21 54,32 54,68 33,80Z')
        }

        .right {
            d: path('M54,32 85,50 85,50 54,68Z')
        }

这样就做成暂停按钮，

接下来需要做的就是播放按钮，

同样是标注坐标，

分析一下，从暂停到播放过程中的锚点的改变

将播放按钮的锚点路径写在变化后的样式，点击变话有很多种方式 js、jq、css都可以，这里咱们通过复选框的:checked属性进行控制

        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            height: 100%;
        }

        .bgI {
            cx: 50;
            cy: 50;
            r: 50;
            fill: #000;
        }

        .left,
        .right {
            fill: #fff;
            transition:all 0.2s linear 0.1s ;
        }

        .left {
            d: path('M32,21 54,32 54,68 33,80Z')
        }

        .right {
            d: path('M54,32 85,50 85,50 54,68Z')
        }
        #checked{
            display:none;
        }
        input:checked+svg{
        }
        input:checked+svg .left{
            d: path('M25,21 44,21 44,80 25,80Z')
        }
        input:checked+svg .right{
            d: path('M56,21 75,21 75,80 56,80Z')
        }

一个简单的暂停、播放按钮的动画就搞定啦

SVG——入门，路径变形动画

猜你喜欢