SVG 带有过渡效果的按钮

梦里梦外; 2022-08-07 16:34 175阅读 0赞

### SVG图形动画变形效果原理及展示 ###

> 图形动画变形过程需要两个SVG图形实现，需要有相同个数的点数（point属性中的坐标个数），如下：  
> –**你可以使用免费的SVG工具来实现你需要的SVG图形，例如：inkscape**

<svg viewBox="0 0 200 200">
                
                <polygon fill="#dd4814" points="97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 67.2,60.9">
                    
                    
                    <animate attributeName="points" dur="1200ms" fill="freeze" to="110,58.2 147.3,0 192.1,29 141.7,105.1 118.7,139.8 88.8,185.1 46.1,156.5 0,125 23.5,86.6 71.1,116.7" />
                    
                    
                    <animate attributeName="fill" dur="1200ms" fill="freeze" to="#53B848" />
                </polygon>
            </svg>

> javascrip 启动效果

/*现在调用JS来启动动画*/
    
    //取得页面定义的元素id="toCheck" 和 id = "toGreen"
    var tocheck = document.getElementById("toCheck"),
          togreen = document.getElementById("toGreen");
    
          //调用SVG的启动方法
          tocheck.beginElement(); //变形
          togreen.beginElement(); //变色

<svg viewBox="0 0 200 200">
                
                <polygon fill="#dd4814" points="97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 67.2,60.9">
                    <animate id="toCheck" attributeName="points" dur="1200ms" fill="freeze" begin="indefinite" to="110,58.2 147.3,0 192.1,29 141.7,105.1 118.7,139.8 88.8,185.1 46.1,156.5 0,125 23.5,86.6 71.1,116.7" />
    
                    <animate id="toGreen" attributeName="fill" dur="1200ms" fill="freeze" begin="indefinite" to="#53B848" />
                </polygon>
            </svg>
    <script type="text/javascript" src="../js/demo4.js" ></script>

> 添加恢复上个动画

var tocheck = document.getElementById("toCheck"),
          togreen = document.getElementById("toGreen");
    
          tocheck.beginElement();
          togreen.beginElement();
    
    
    //这里定义一个恢复方法，类似上面
    var tostar = document.getElementById("toStar"),
          tored = document.getElementById("toRed");
    
    function restoreTransform(){ 
      tostar.beginElement();
      tored.beginElement();
    }
    
    //这里我们延迟2000ms来执行变形恢复方法，如下：
    
    setTimeout(restoreTransform, 2000); //大家可以在课程结束自己调试代码试试

### 示例 ###

> 参考[https://css-tricks.com/svg-shape-morphing-works/][https_css-tricks.com_svg-shape-morphing-works]

/*CSS代码片段*/
    body{ background: #CFCFCF; }
    
    /* 定义按钮CSS */
    
    button{ border: 0; background: linear-gradient( to bottom, #555, #111 ); border-radius: 10px; padding: 10px 30px 12px; display: inline-block; width: 230px; text-align:left; }
    
    /* 定义按钮悬浮效果 */
    button:hover, button:active { background: black; }
    
    /* 定义SVG图形CSS*/
    button svg{ width: 45px; height: 45px; display: inline-block; vertical-align: middle; margin-right: 10px; }
    
    /* 定义按钮文字 */
    button span{ font-size: 32px; position:relative; top: 7px; color: #fff; font-family: "microsoft yahei",Arial,sans-serif; }
    
    /* 元素居中效果CSS */
    .center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    
    /* 定义一个已收藏的文字颜色 */
    button.saved span{ color: #53B848; }

/*处理动画效果JS*/
    
    /* 定义按钮文字和四个动画状态变量 */
    
    var buttonText = document.getElementById("btn-text"),
      tocheck = document.getElementById("toCheck"),
      togreen = document.getElementById("toGreen"),
      tostar = document.getElementById("toStar"),
      tored = document.getElementById("toRed"),
      button = document.getElementById("button");
    
    //添加按钮事件
    
    button.addEventListener('click', function(){
      //这里通过添加一个class定义来判断是否点击
      if(button.classList.contains('saved')){
        tostar.beginElement();
        tored.beginElement();
        button.classList.remove('saved');
        buttonText.innerHTML = '收藏';
      }else{
        tocheck.beginElement();
        togreen.beginElement();
        button.classList.add('saved');
        buttonText.innerHTML = '已收藏';
      }
    
    
    }, false);

<button id="button" class="center">
    
                
                <svg viewBox="0 0 200 200">
    
                    <polygon fill="#dd4814" points="97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 67.2,60.9">
    
                        <animate id="toCheck" begin="indefinite" attributeName="points" dur="1200ms" fill="freeze" to="110,58.2 147.3,0 192.1,29 141.7,105.1 118.7,139.8 88.8,185.1 46.1,156.5 0,125 23.5,86.6 71.1,116.7" />
    
                        <animate id="toStar" begin="indefinite" attributeName="points" dur="1200ms" fill="freeze" to="97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 67.2,60.9" />
    
                        
                        <animate id="toGreen" begin="indefinite" attributeName="fill" dur="1200ms" fill="freeze" to="#53B848" />
    
                        <animate id="toRed" begin="indefinite" attributeName="fill" dur="1200ms" fill="freeze" to="#dd4814" />
                    </polygon>
    
                </svg>
    
                <span id="btn-text">收藏</span>
    
            </button>
            <script type="text/javascript" src="../js/demo5.js"></script>

[https_css-tricks.com_svg-shape-morphing-works]: https://css-tricks.com/svg-shape-morphing-works/