Вопрос по raphael, javascript, jquery – Как оживить объект Рафаэля по дорожке?

9

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

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

Хорошо публиковать то, что вы пробовали, перед публикацией в стеке, чтобы люди знали, что вы не просто просите их выполнить вашу работу за вас. mheavers
Этот вопрос пахнет "сделай мою домашнюю работу для меня" Adriano Varoli Piazza
Google это, прежде чем отправлять вопрос joe

Ваш Ответ

4   ответа
2

Вот.

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

/*

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);
    });
};
2

.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)
Метод animateAnong недоступен в новой версии Rapheljs
1

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

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

12

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

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

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

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

Похожие вопросы