Ajax Russia : Аякс по-русски

Свежие новости из мира IT

Индикатор загрузки для айФона

October 05th, 2007 | Category: Javascript, Web20, iPhone | Автор: Александр

iPhoneДолго я терпел, пока T-Mobile выпустит в Германии iPhone. Так и не вытерпел. Купил на eBay американский разблокированный айФон и теперь хожу себя ругаю, что так долго ждал. Телефон просто замечательный, и я не представляю, что должны сделать другие производители телефонов, чтобы составить конкуренцию. Не буду перечислять все достоинства айфона, блог у меня не про мобильники, а про вэб разработку. Как наверное многие из вас слышали, на айфоне установлен браузер Safari, и это означает, что можно писать сайты или программы нацеленные на владельцев айфона (и iPod Touch).

В поиске каких либо туториалов про разработку сайтов для айфона, наткнулся на интересную статью от Adam van den Hoven. Оказывается на айфоне не работают большие анимированные гифы. Я так ещё и не выяснил, насколько они должны быть большими, чтобы не работать. Тем не менее, Адам написал очень интересный джаваскрипт код, который генерирует индикаторы загрузки без картинок. Использует он для этого canvas, и просто рисует нужные индикаторы. Подобную технику можно использовать не только на айфоне, но и в любом браузере с поддержкой канваса (как перевести canvas на русский?).

1. Нужен следующий код:

PLAIN TEXT
JavaScript:
  1. function getLoading(context, bars, center, innerRadius, size, color) {
  2. var animating = true,
  3.     currentOffset = 0;
  4.  
  5. function makeRGBA(){
  6.     return "rgba(" + [].slice.call(arguments, 0).join(",") + ")";
  7. }
  8. function drawBlock(ctx, barNo){
  9.     ctx.fillStyle = makeRGBA(color.red, color.green, color.blue, (bars+1-barNo)/(bars+1));
  10.     ctx.fillRect(-size.width/2, 0, size.width, size.height);
  11. }
  12. function calculateAngle(barNo){
  13.     return 2 * barNo * Math.PI / bars;
  14. }
  15. function calculatePosition(barNo){
  16.     angle = calculateAngle(barNo);
  17.     return {
  18.         y: (innerRadius * Math.cos(-angle)),
  19.         x: (innerRadius * Math.sin(-angle)),
  20.         angle: angle
  21.     };
  22. }
  23. function draw(ctx, offset) {
  24.     clearFrame(ctx);
  25.     ctx.save();
  26.     ctx.translate(center.x, center.y);
  27.     for(var i = 0; i<bars; i++){
  28.         var curbar = (offset+i) % bars,
  29.             pos = calculatePosition(curbar);
  30.         ctx.save();
  31.         ctx.translate(pos.x, pos.y);
  32.         ctx.rotate(pos.angle);
  33.         drawBlock(context, i);
  34.         ctx.restore();
  35.     }
  36.     ctx.restore();
  37. }
  38. function clearFrame(ctx) {
  39.     ctx.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
  40. }
  41. function nextAnimation(){
  42.     if (!animating) {
  43.         return;
  44.     };
  45.     currentOffset = (currentOffset + 1) % bars;
  46.     draw(context, currentOffset);
  47.     setTimeout(nextAnimation, 50);
  48. }
  49. nextAnimation(0);
  50. return {
  51.     stop: function (){
  52.         animating = false;
  53.         clearFrame(context);
  54.     },
  55.     start: function (){
  56.         animating = true;
  57.         nextAnimation(0);
  58.     }
  59. };
  60. }

2. HTML элемент Canvas

PLAIN TEXT
HTML:
  1. <canvas id="indicator" width="500" height="500" style="border: 1px solid black">

3. И вызов функции для запуска индикатора

PLAIN TEXT
JavaScript:
  1. var controller = getLoading(document.getElementById('indicator').getContext("2d"), 9, {x:250, y:250}, 10, {width: 20, height:50}, {red: 0, green: 17, blue: 58});

Вот небольшая демонстрация:


del.icio.us Забобрить!

6 Comments so far

  1. Виталий Обищенко October 5th, 2007 09:40

    Canvas переводится как “канва”, насколько я знаю.
    Поддержка этой штуки в браузерах - вещь хорошая и интересная. Жаль только IE как всегда в стороне.

  2. erja October 15th, 2007 20:03

    за сколько взяли, если не секрет? тоже хочу.)

  3. Aleksandr October 15th, 2007 20:24

    Отдал немало - 560 евро :)

    Но стоит того! Возможностей куча. Например на днях сделал Remote Desktop, и теперь могу с телефонона управлять своим ноутбуком.

    Сейчас вот пытаюсь понять, как проапдейтить прошивку с 1.0.2 на 1.1.1.

  4. Жанна October 18th, 2007 14:44

    Привет.
    недавно узнала про Айфон…и просто загорелась….ХОЧУ…но вот сегодня на разных форумах поковыряласьи возникает вопрос для меня пока не понятный….каким образом он работает с нашими операторами и каким образом переводится на русскую клавиатуру???? И еще… ГДЕ его можнокупить?

  5. Aleksandr October 18th, 2007 17:57

    Всё просто. Покупаешь разблокированный телефон (или можно это сделать самому) и можешь им пользоваться с любыми операторами.

    Русскую клавиатуру можно поставить на сайте http://www.russianiphone.ru

    Где купить в России я не знаю. Я из Германии и купил на eBay. Поспрашивай на RussianIphone, может подскажут.

  6. Димок July 1st, 2008 15:04

    Уцепились за цацку, ерунда, дорогой девайс за такой функционал. налодонник должен быть с qwerty клавой. Без нее- нет смысла в нем.

Leave a reply