Как анимировать рисунок спирали

Привет, у меня есть следующий код, который генерирует спираль на холсте, и я хочу, чтобы спираль была анимирована по мере ее нарисования, в данный момент с нижним кодом спираль полностью нарисованная при загрузке страницы. Я хочу видеть, как спираль вытягивается. Я хотел бы использовать requestAnimationFrame для выполнения задания.Как анимировать рисунок спирали

мой HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" href="styles.css"> 
<meta charset="utf-8"> 
    <title>Spiral</title> 
</head> 
<body> 
    <canvas id="canvas" style="border: 1px solid black" width="300" height="300"></canvas> 
<script src="scripts.js"></script> 
</body> 
</html>

и мой Javascript

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var centerX = canvas.width/2; 
var centerY = canvas.height/2; 
ctx.moveTo(centerX,centerY); 


    var gap =2; 
    var steps = 60; 

    var increment = 2*Math.PI/steps; 
    var theta = increment; 

while(theta < 20*Math.PI) { 
    var newX = centerX + theta * Math.cos(theta) * gap; 
    var newY = centerY + theta * Math.sin(theta) * gap; 
    ctx.lineTo(newX,newY); 
    theta = theta + increment; 
} 
ctx.stroke();

см для jsfiddle https://jsfiddle.net/gustav1105/hx8tm43k/

источник

2016-01-13 Gustav Coetzee

Посмотрите на эту тему: http://stackoverflow.com/questions/31096766/creating-the-butterfly-curve-with-arrays В частности, обратите внимание на 'tavnab's' ответ, который предоставляет как статическую, так и анимированную версию. (совершенно другой кривой) – enhzflep

Я предполагаю, что вы хотите, чтобы анимация нарисовать спираль в течение заданного промежутка времени (например, 4 секунды). Я поместил ваш код чертежа в функцию update(). Я вызвал функцию requestAnimationFrame с помощью функции update(). При первом вызове функции update() я записываю время начала анимации. Затем я вычисляю ход чертежа (0 = start, 1 = end) путем вычитания текущего времениStamp из времени начала и затем деления на желаемое общее время (например, 4 секунды = 4000 мс). Затем я рисую спираль до текущего прогресса. Если спираль не завершена (т. Е. Прогресс < 1), то снова запрашивается функция requestAnimationFrame().

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var centerX = canvas.width/2; 
 
var centerY = canvas.height/2; 
 
var gap = 2; 
 
var steps = 60; 
 
var increment = 2 * Math.PI/steps; 
 
var start = null; 
 
function update(timeStamp) { 
 
    if (!start) { 
 
     start = timeStamp; 
 
    } 
 
    var progress = Math.min((timeStamp - start)/4000, 1); 
 
    var theta = increment; 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    ctx.moveTo(centerX,centerY); 
 
    while (theta < progress * 20 * Math.PI) { 
 
     var newX = centerX + theta * Math.cos(theta) * gap; 
 
     var newY = centerY + theta * Math.sin(theta) * gap; 
 
     ctx.lineTo(newX,newY); 
 
     theta = theta + increment; 
 
    } 
 
    ctx.stroke(); 
 
    if (progress < 1) { 
 
     requestAnimationFrame(update); 
 
    } 
 
} 
 
requestAnimationFrame(update);

<canvas id="canvas" style="border: 1px solid black" width="300" height="300"></canvas>

источник

2016-01-13 21:43:46

спасибо, что вы работаете как шарм –

Для анимации использования window.requestAnimationFrame(yourFunction); это будет вызывать вашу функцию синхронизируются с экрана и на этапе с чтобы обеспечить наилучшую производительность анимации. Он также передаст функцию, которую он называет текущим временем в миллисекундах.

Я только что добавил функцию update, которая очищает экран. Затем называет вашу спираль небольшим модом, чтобы оживить ее по времени. Затем функция обновления запрашивает новый кадр и завершает работу.

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var centerX = canvas.width/2; 
 
var centerY = canvas.height/2; 
 
ctx.lineWidth = 3; 
 
function drawSpiral(time) { 
 
    var angOff, gap, steps, increment, theta, newX, newY; 
 
    // use time to get an angle offset 
 
    angOff = time/-60; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(centerX, centerY); 
 
    gap = 2; 
 
    steps = 60; 
 
    increment = 2 * Math.PI/steps; 
 
    theta = increment; 
 
    while (theta < 20 * Math.PI) { 
 
     newX = centerX + theta * Math.cos(theta + angOff) * gap; 
 
     newY = centerY + theta * Math.sin(theta + angOff) * gap; 
 
     ctx.lineTo(newX, newY); 
 
     theta = theta + increment; 
 
    } 
 
    ctx.stroke(); 
 
} 
 
function update(time) { // called by browser through requestAnimationFrame 
 
    // time is the current time in milliseconds 
 

 
    // clear the canvas 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 

 
    // draw the spiral animating via the time 
 
    drawSpiral(time); 
 

 
    // this gets the next animation frame 
 
    // that is in sync with the browsers rendering and 
 
    // will keep in sync with the screen refresh so you dont 
 
    // get any shearing 
 
    requestAnimationFrame(update); //' request next animation frame 
 
} 
 
// start the animation 
 
requestAnimationFrame(update);

\t <canvas id="canvas" style="border: 1px solid black" width="300" height="300"></canvas>

источник

2016-01-13 19:59:39 Blindman67

Как анимировать рисунок спирали

ответ

Смежные вопросы