Рафаэль JS представление изображения анимации - PullRequest
Новая
       0

Рафаэль JS представление изображения анимации

2 голосов
/ 23 декабря 2010

Я пытаюсь создать анимацию изображения с помощью Raphael JS.

Я хочу, чтобы эффект пчелы случайно перемещался по странице, у меня есть рабочий пример, но он немного "дрожит", и я получаю это предупреждение в консоли:

"Ресурс интерпретируется как изображение, но передается с текстом MIME типа / html"

Я не уверен, что предупреждение вызывает "дрожащее" движение или просто так, как я подошел к нему с помощью математики.

Если у кого-то есть лучший способ создать эффект или улучшения, пожалуйста, дайте мне знать.

У меня есть демо онлайн здесь

и вот мой код JavaScript: 

function random(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;  
} 

function BEE(x, y, scale) {
    this.x = x;
    this.y = y;
    this.s = scale;
    this.paper = Raphael("head", 915, 250);

    this.draw = function() {
        this.paper.clear();
        this.paper.image("bee.png", this.x, this.y, 159*this.s, 217*this.s);
    }

    this.update = function() {
        var deg = random(-25, 25);

        var newX = Math.cos(Raphael.rad(deg)) * 2;
        var newY = Math.sin(Raphael.rad(deg)) * 2;

        this.x += newX;
        this.y += newY;

        if( this.x > 915) {
            this.x = 0;
        }
        if( this.y > 250 || this.y < 0 ) {
            this.y = 125;
        }
    }
}

$(document).ready(function() {

    var bee = new BEE(100, 150, 0.4);
    var timer = setInterval(function(){
        bee.draw();
        bee.update();
    }, 15);
}

1 Ответ

7 голосов
/ 23 декабря 2010

Вы не используете лучшую функцию Рафаэля, способность просто устанавливать атрибуты на объекты, которые вы создаете, как DOM.Вы восстанавливаете пчелу и очищаете бумагу на каждом шагу.Это то, как вы делаете это с тэгом canvas, и он настолько утомителен, что подвержен ошибкам, и пусть браузер беспокоится о том, что перекрасить.

Лучший способ сделать то, что вы делаете, это следующий 

/**
 * I don't like closure object orientation, but if you're
 * going to use it, use it all the way
 * (instead of using this.x and this.y for private variables)
 */
function Bee(paper, x, y, scale) 
{

    // The Raphael img object for the bee)
    var img = paper.image("bee.png", x, y, 159 * scale, 217 * scale);

    var timerId = null;

    // Allows access to 'this' within closures
    var me = this;

    this.draw = function() {
      img.attr({x: x, y: y});
    }

    this.update = function() {
        var deg = random(-25, 25);

        var newX = Math.cos(Raphael.rad(deg)) * 2;
        var newY = Math.sin(Raphael.rad(deg)) * 2;

        x += newX;
        y += newY;

        if( x > 915) {
            x = 0;
        }
        if( y > 250 || y < 0 ) {
            y = 125;
        }
    }

    this.fly = function() {
        timerId = setInterval({
            me.update();
            me.draw();
        }, 15);
    }

    this.stop = function() {
      clearInterval(timerId);
      timerId = null;
    } 

    function random(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;  
    } 
}

$(document).ready(function() {
    var paper = Raphael("head", 915, 250);
    var bees = [ new Bee(paper, 100, 150, 0.4), new Bee(paper, 50, 10, 0.2) ];
    bees[0].fly();
    bees[1].fly();
    $(document).click(
        bees[0].stop();
        bees[1].stop();
    );

}
...