Как оживить объект Рафаэля по дорожке?

Объект может быть простым, прямоугольным или круговым. Но путь должен быть кривой Безье. Пожалуйста, предоставьте JavaScript /Рафаэль код, если не слишком много проблем.

Будет хорошо, если во время анимации будет эффект от движущегося объекта.

 joe23 июн. 2009 г., 15:49
Google это, прежде чем отправлять вопрос
 Adriano Varoli Piazza23 июн. 2009 г., 15:47
Этот вопрос пахнет "сделай мою домашнюю работу для меня"
 mheavers03 нояб. 2011 г., 14:50
Хорошо публиковать то, что вы пробовали, перед публикацией в стеке, чтобы люди знали, что вы не просто просите их выполнить вашу работу за вас.

Ответы на вопрос(4)

Вот.

Я скопировал приведенный ниже код:

/*

You can copy and paste the below into your codebase somewhere.
As long as Raphael is a global object, it'll just work.

USAGE (same default values for optional parameters as Raphaël's "animate" method)
=====
element.animateAlong({
    path: REQUIRED - Path data string or path element,
    rotate: OPTIONAL - Boolean whether to rotate element with the direction it is moving
                       (this is a beta feature - currently kills existing transformations
                        and rotation may not be perfect),
    duration: OPTIONAL - Number in milliseconds,
    easing: OPTIONAL - String (see Raphaël's docs),
    debug: OPTIONAL - Boolean, when set to true, paints the animating path, which is
                      helpful if it isn't already rendered to the screen
},
props - Object literal containing other properties to animate,
callback - Function where the "this" object refers to the element itself
);

EXAMPLE
=======
var rect = paper.rect(0,0,50,50);
rect.animateAlong({
    path: "M0,0L100,100",
    rotate: true,
    duration: 5000,
    easing: 'ease-out',
    debug: true
},
{
    transform: 's0.25',
    opacity: 0
},
function() {
    alert("Our opacity is now:" + this.attr('opacity'));
});

*/

Raphael.el.animateAlong = function(params, props, callback) {
    var element = this,
        paper = element.paper,
        path = params.path,
        rotate = params.rotate,
        duration = params.duration,
        easing = params.easing,
        debug = params.debug,
        isElem = typeof path !== 'string';

    element.path = 
        isElem
            ? path
            : paper.path(path);
    element.pathLen = element.path.getTotalLength();
    element.rotateWith = rotate;

    element.path.attr({
        stroke: debug ? 'red' : isElem ? path.attr('stroke') : 'rgba(0,0,0,0)',
        'stroke-width': debug ? 2 : isElem ? path.attr('stroke-width') : 0
    });

    paper.customAttributes.along = function(v) {
        var point = this.path.getPointAtLength(v * this.pathLen),
            attrs = {
                x: point.x,
                y: point.y 
            };
        this.rotateWith && (attrs.transform = 'r'+point.alpha);
        // TODO: rotate along a path while also not messing
        //       up existing transformations

        return attrs;
    };

    if(props instanceof Function) {
        callback = props;
        props = null;
    }
    if(!props) {
        props = {
            along: 1
        };
    } else {
        props.along = 1;    
    }

    var startAlong = element.attr('along') || 0;

    element.attr({along: startAlong}).animate(props, duration, easing, function() {
        !isElem && element.path.remove();

        callback && callback.call(element);
    });
};

.animateAlong() метод.

Требуется 4 аргумента:

path - object or string path element or path string along which the element will be animated ms - number - The duration of the animation, given in milliseconds. rotate - boolean - [optional] if true, element will be rotated along the path callback - function - [optional]

По сути из документации:

window.onload = function() {
    var r = Raphael("canvas", 200, 200), 
        p = r.path("M10,50C10,100,90,0,90,50C90,100,10,0,10,50Z")
             .attr({stroke: "#ddd"}),
        e = r.ellipse(10, 50, 4, 4).attr({stroke: "none", fill: "#f00"});
    r.rect(0, 0, 200, 200).attr({stroke: "none", fill: "#000", opacity: 0})
     .click(function () {
         e.attr({rx: 5, ry: 3})
          .animateAlong(p, 4000, true, function () {        // Animate along path
              e.attr({rx: 4, ry: 4});
          });
     });
}​;
Try it out with this jsFiddle (click to activate)
 20 мая 2014 г., 15:06
Метод animateAnong недоступен в новой версии Rapheljs

если вы пытаетесь использовать это с RaphaelJS 2 (animateAlong больше не существует), здесь вы можете увидеть возможное решение:http://jsfiddle.net/gyeSf/17/.

И вот оригинальное обсуждение:https://groups.google.com/forum/#!searchin/raphaeljs/animatealong/raphaeljs/W9bA0SkArVY/KnPRKi8uFrsJ

Редактировать: И вот еще один пример:http://raphaeljs.com/gear.html

 04 июл. 2013 г., 09:47
Конечно, взгляните на этот пример:jsfiddle.net/ZPX78
 28 июн. 2013 г., 20:47
Вы проходите красную точку вправо, возможно ли пропустить изображение по этому пути?

animate() метод (так как он изменяет атрибуты объекта линейно).

Я бы предложил вам реализовать функцию, которая изменяет положение объекта каждую миллисекунду или около того в соответствии с формулой кривой B & # xE9; zier. Используйте Rapha & # x451; ltranslate() таймеры метода и JavaScript.

Ваш ответ на вопрос