Как нарисовать простой путь с анимацией в Raphaël.js

Я пытаюсь нарисовать простой путь с анимацией от начала до конца пути, используя библиотеку Raphaël.js по адресу Демонстрация.

var canvas = Raphael('canvas', 900, 648);
var pathString = "M 200,200 L200,10 L100,10";

$('#start').click(function(e) {
       var line = canvas.path(pathString).attr({ stroke: "#000" });
       line.animate({     },5000);
});

но не уверен, как использовать здесь функцию animate(). Как я могу этого добиться?


javascript raphael graphael
person Mona Coder    schedule 08.09.2016    source источник
comment
Что именно вы пытаетесь оживить?   -  person Dark Falcon    schedule 08.09.2016
comment
Привет, Дарк, я хотел бы провести линию от начала до конца, как эта демонстрация   -  person Mona Coder    schedule 08.09.2016

Ответы (1)


arrow_upward
2
arrow_downward

Может быть лучший способ сделать это, но вот лучший, который я могу найти: getSubpath позволяет получить сегмент пути. Реализуя пользовательское свойство, которое можно анимировать, мы можем управлять путем на основе значения этого свойства:

var canvas = Raphael('canvas', 900, 648);
var pathString = "M 200,200 L200,10 L100,10";

canvas.customAttributes.subpath = function (from, to) {
  from = Math.floor(from);
  to = Math.floor(to);
  if(to < from)
    to = from;
  return {path: this.parentPath.getSubpath(from, to)};
};

$('#start').click(function(e) {
  canvas.clear();
  // Create an invisible full representation of the path
  var completeLine = canvas.path(pathString).attr({ 'stroke-opacity': 0 });
  var len = completeLine.getTotalLength(pathString);

  // Create a partial representation of the path
  var line = canvas.path(pathString);
  line.parentPath = completeLine;
  line.attr({ stroke: "#000", subpath: [0, 0]});

  // Animate using our custom subpath attribute from 0 to the length of the full path
  line.animate({ subpath: [0, len] }, 5000);
});

https://jsfiddle.net/r40k0kjv/5/

person Dark Falcon    schedule 08.09.2016