Увидел интересный эффект для кнопки - PullRequest
Новая
       36

Увидел интересный эффект для кнопки

0 голосов
/ 24 ноября 2018

Я хочу создать точно такой же эффект при наведении курсора на объект svg, как на этом сайте. http://animejs.com/.

Для этого я открыл inkscape и нарисовал путь и сохранил два состояния до и после наведения.

первое состояние: 

<svg viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">

 <path d="m11 103c64-2.5 123-1.5 178 0v42c-61 3.5-120 0.43-178 0z"
 style="fill:none; stroke:#ff17ff;"/>
</svg>

второе состояние 

<svg viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">

 <path d="m11 103c62-7.8 121-6.3 178 0v42c-61 9.7-120 6.3-178 0z" 
       style="fill:none;stroke:#ff17ff"/>
</svg>

Скорее всего, это нужно сделать в js / jquery, скажите, как вы можете реализовать этот эффект? Как я могу гибко изменить путь?

Ответы [ 2 ]

0 голосов
/ 24 ноября 2018

Я вижу, что уже есть ответ, но так как я подготовил это, я отправляю это.Я использую Javascript вместо анимации SMIL.

Сначала я подготовил пути.Если вы посмотрите, я преобразовал каждую команду в C

let rid = null;
let ry = [];
let speed = 1 / 10;

class pathsPair {
  constructor(thePath, yes, no) {
    this.path = thePath;
    this.yes = yes;
    this.no = no;
    this.vals = this.getArgsRy(yes);
    this.target = this.getArgsRy(no);
    this.targetAlp = 0;
    this.alp = 1;
    this.light = 70;
  }

  getArgsRy(path) {
    let d = path.getAttribute("d").replace(/\r?\n|\r/g, ""); //remove breaklines
    if (d.charAt(0) == "m") {
      d = "M" + d.slice(1);
    }
    let argsRX = /(?=[a-zA-Z])/;
    let args = d.split(argsRX);

    let ArgsRy = [];

    args.map(arg => {
      let argRy = arg
        .slice(1)
        .replace(/\-/g, " -")
        .split(/[ ,]+/);
      argRy.map((p, i) => {
        if (p == "") {
          argRy.splice(i, 1);
        }
      });

      for (let i = 0; i < argRy.length; i++) {
        argRy[i] = parseFloat(argRy[i]);
      }

      argRy.unshift(arg[0]);
      ArgsRy.push(argRy);
    });

    return ArgsRy;
  }

  morph() {
    let newD = "";

    this.vals.map((v, vi) => {
      let newStr = v[0];
      for (let i = 1; i < v.length; i++) {
        this.updateProp(vi, i);

        newStr += v[i].toFixed(3) + " ";
      }
      newD += newStr + " ";
    }); //
    this.path.setAttributeNS(null, "d", newD);
  }

  updateProp(vi, i) {
    let dist = this.target[vi][i] - this.vals[vi][i];
    let vel = dist / 10;
    this.vals[vi][i] += vel;
  }

  sayNO() {
    this.target = this.getArgsRy(this.no);
    this.targetAlp = 0;
  }

  sayYES() {
    this.target = this.getArgsRy(this.yes);
    this.targetAlp = 1;
  }
}

let the_pair = new pathsPair(morphingPath, _2, _1);
console.log(the_pair);
svg.addEventListener("mouseover", function() {
  console.log(rid);
  if (rid) {
    window.cancelAnimationFrame(rid);
    rid = null;
  }
  the_pair.sayYES();
  Frame();
});
svg.addEventListener("mouseleave", function() {
  
  if (rid) {
    window.cancelAnimationFrame(rid);
    rid = null;
  }
  the_pair.sayNO();
  Frame();
});

function Frame() {
  rid = window.requestAnimationFrame(Frame);
  the_pair.morph();
}

window.addEventListener("load", function() {
  Frame();
});
svg{border:1px solid}
#morphingPath{fill:transparent; stroke:black;}
<svg id="svg" viewBox="0 90 210 70" xmlns="http://www.w3.org/2000/svg">
<defs>
 <path id="_1" d="M11.000, 103.000 C75.000, 100.500 134.000, 101.500 189.000, 103.000 C189.000, 117.000 189.000, 131.000 189.000, 145.000 C128.000, 148.500 69.000, 145.430 11.000, 145.000 z"
/>
  
   <path id="_2" d="M11.000, 103.000 C73.000, 95.200 132.000, 96.700 189.000, 103.000 C189.000, 117.000 189.000, 131.000 189.000, 145.000 C128.000, 154.700 69.000, 151.300 11.000, 145.000 z" 
       />
  </defs>
  
  <path id="morphingPath" d=""
 style="fill:none; stroke:#ff17ff;" />
</svg>
0 голосов
/ 24 ноября 2018

Чтобы анимировать контур кнопки, вам нужно анимировать параметр d patch 

<animate attributeName="d" values="path1;path2" dur="2s" begin="btn.mouseover" /> 


.container {
width:25%;
height:25%;
}
<div class="container">
<svg   viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">

 <path id="btn"  d="m11 103c64-2.5 123-1.5 178 0v42c-61 3.5-120 0.43-178 0z"
 style="fill:none; stroke:#ff17ff;">
 <animate attributeName="d" values="m11 103c64-2.5 123-1.5 178 0v42c-61 3.5-120 0.43-178 0z;m11 103c62-7.8 121-6.3 178 0v42c-61 9.7-120 6.3-178 0z" dur="1s" begin="btn.mouseover" />
 </path>
 <text x="23" y="136" font-size="36" >mouseover</txt>
</svg>
</div>
...