Использование jQuery / HTML5 для анимации круга

Question

Для личного проекта я стараюсь сделать приложение для таймера (для контроля расписаний покера в покер). Я знаю, что на рынке уже есть несколько решений, но по причинам, которые слишком длинны, чтобы вдаваться в них, нам нужна специальная система. Хотя конечный пользователь в конечном итоге будет определять выходной шаблон системы, мы хотели бы включить виджет, который отображает кружок, который оживляется по мере обратного отсчета времени. Вот иллюстрация рабочего примера, показывающая желтый круг и то, что мы хотели бы достичь (или что-то подобное в любом случае):

Мой вопрос: как можно было бы кодировать анимацию, как показано ниже, используя jQuery или необработанные HTML5 / CSS3 анимации? Это для веб-приложения, использующего jQuery, поэтому я не могу использовать другие опции библиотеки.

Большое спасибо!

Answer 1

Этого можно добиться с помощью CSS3 и jQuery.

Посмотрите мой пример здесь http://blakek.us/css3-pie-graph-timer-with-jquery/, который с небольшими изменениями может заставить таймер выглядеть так, как вы хотите.

Answer 2

Если вы можете использовать HTML5, вам лучше всего использовать canvas.У Mozilla есть несколько приличных учебных пособий по рисованию дуг.Этого должно быть достаточно, чтобы вы начали.

var canvas = document.getElementById('canvasid'),
    width = canvas.width,
    height = canvas.height,
    ctx = canvas.getContext('2d');

function drawTimer(deg) {
  var x = width / 2, // center x
      y = height / 2, // center y
      radius = 100,
      startAngle = 0,
      endAngle = deg * (Math.PI/180),
      counterClockwise = true;

  ctx.clearRect(0, 0, height, width);
  ctx.save();

  ctx.fillStyle = '#fe6';

  // Set circle orientation
  ctx.translate(x, y);
  ctx.rotate(-90 * Math.PI/180);

  ctx.beginPath();
  ctx.arc(0, 0, radius, startAngle, endAngle, counterClockwise);
  ctx.lineTo(0, 0);
  ctx.fill();
}

setInterval(function() {

  // Determine the amount of time elapsed; converted to degrees
  var deg = (elapsedTime / totalTime) * 360;

  drawTimer(deg);

}, 1000);

Answer 3

Вы действительно должны проверить Обработка !

Особенно Processing.js . Было несколько интересных вещей сделанных с его помощью для iPhone

Answer 4

В HTML5 вы можете рисовать на холсте.Например:

// Create the yellow face
context.strokeStyle = "#000000";
context.fillStyle = "#FFFF00";
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.fill();

Ссылка

Answer 5

HTML5 Команда холста дуги (MDN) , вероятно, то, что вы ищете.Просто уменьшите конечный угол с течением времени, чтобы ваш таймер уменьшился.

Answer 6

Первое решение, о котором я могу подумать, - это html5 canvas реализация. Из приведенного выше примера становится ясно, что мы говорим о мобильных устройствах, поэтому о том, какую поддержку предоставляет canvas для мобильных браузеров, я не могу сказать. developer.mozilla.org предоставляет достаточной документации . Использование canvas для достижения такого отсчета должно быть довольно простой задачей. Удачи.