1

Все привет!) Нужно при загрузки страницы нарисовать кривую Безье. После того, как она порисуется, необходимо ее координаты изменять плавно, чтобы был эффект "плаванья"

Прикладываю гиф изображение, как примерно должно быть рандом

На данном этапе добилась с помощью svg рисование кривой безье.

http://jsfiddle.net/0mhkx4qd/

Подскажите, как можно "заставить" ее двигаться рандомно по заданной траетории? В какую степь двигаться?

Спасибо!

0

3 ответа 3

2

    var canvas = document.createElement('canvas');
    canvas.width = 500;
    canvas.height = 500;
    
    document.body.appendChild(canvas);
    
    var AMPLITUDE_START_VALUE = 50;
    var amplitude = AMPLITUDE_START_VALUE;
    
    var context = canvas.getContext('2d');
    context.beginPath();
    context.moveTo(50, 400);
    context.bezierCurveTo(450,amplitude,200,100,200,20);
    context.stroke();
    
    requestAnimationFrame(enterFrame)
    
    var object = {
    	direction: 1,
    	speed: .5
    };
    
    function change(){
    	object.direction *= -1;
    }
    
    function enterFrame(){
    	if(amplitude > 70|| amplitude < 50){
    		change();
    	}
    
    	amplitude += object.speed * object.direction;
    
    	canvas.width = canvas.width;
    	requestAnimationFrame(enterFrame);
    	context.moveTo(50, 400);
    	context.bezierCurveTo(450,450,200,100,200,amplitude);
    	context.stroke();
    	
    }

0
-1

Смотрю на GIFку и не могу понять траекторию по которой она движется.

Но в любом случае есть пару способов её санимировать в зависимости от эффектов которые вам нужны.

  1. Умножать на случайную матрицу трансляции зависящую от времени или подставлять в какую-нибудь фукнкцию зависящую от времени только координаты опроных точек.
  2. Тоже самое, но не для координат опорных точек а для финальных координат. На гифке вроде второй способ использован. Т.е. отрисовать кривую в память с большим шагом дискретизации. Потом домножить каждую точку на нужную матрицу, интерполировать и далее отрисовать финальный кадр.
-3

По таймеру(см. http://javascript.ru/setTimeout) перерисовывайте кривую, плавно изменяя опорные точки.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.