Имя
Логин
Пароль
Повтор пароля
Email

    Войти через соц. сети:


    или внутреннюю авторизацию:

    Логин
    Пароль

      Программирование с нуля за 5 минут

      Программирование с нуля - инвентаризация рабочего стола

      Перед тем, как писать программу, убедимся что для этого есть все необходимое.
      Уверен, у Вас есть все, чтобы начать изучение программирования прямо сейчас.

      Нам понадобится:
      1. Текстовый редактор - отлично подойдет программа "Блокнот", которая включена в Windows.

      2. Браузер - для "запуска" написанной программы. Можно выбрать любой из установленных на Вашем компьютере
      Совет: Если вы начали изучать программирование с нуля, рекомендую отказаться от использования браузера Internet Explorer.

       Готовим "сцену" для анимации

      Скоро мы с Вами "оживим" короля, который прогуливается в окружении двух пажей. Но сперва поместим его на "сцену".

      Сцена, которую мы будем использовать, создается на языке HTML. HTML - язык для создания веб страниц, которые являются основой любого сайта.

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

      1. Создаем на своем компьютере папку, например king;

      2. Качаем изображение короля со свитой здесь. Сохраним изображение в папке, созданной ранее;

      3. Открываем блокнот, переносим туда код. Сохраняем файл как king.html в той папке, куда ранее сохранили картинку.
      Совет: Думаю, Вы согласитесь со мной - в краткой статье невозможно объяснить все аспекты. Вы хотите досконально разобраться как быстро создать сайт? Проблема решаема - достаточно записаться на курс HTML.

      Код страницы и пояснения для тех, кто изучает программирование с нуля

      <html>
      <head>
      </head>
      <body>
      <img src="/king.png" >
      </body>
      </html>
      В этом небольшом коде мы объявляем тело страницы при помощи тега body. Все, что будет показано зрителю, находится между элементами <body> и </body>.


      Поместим на страницу изображение. Изображение размещается при помощи  тега <img> (сокращение от image). Внутри тега обязательно должна находится запись вида

      src="/имя файла картинки, которую надо показать"

      <img src="/king.png" >
      Думаю, если Вы были внимательны при задании имени изображения, первый шаг в программировании с нуля прошел успешно. Можно переходить к "оживлению" картинки.

      Программирование с нуля параметров анимации

      Часто приходится слышать мнение, что программирование с нуля анимации - это сложно. Долгое время это действительно было так. Анимация требовала кропотливой работы программиста. К счастью нам на помощь приходят современные технологии. В современных браузерах "оживить" картинку можно всего двумя строками кода. Думаю Вы согласитесь со мной, что это недолго. Чаще все это займет не больше 5 минут.


      Совет: Если Вас заинтересовали современные средства разработки интерактивных сайтов, запишитесь на наш курс HTML5.


      Идея анимации изображения очень проста. Как известно, мультипликация - это демонстрация быстро меняющихся изображения, которые "чуть - чуть" изменены.

      При движении изменение картинки заключается в ее перемещении относительно левого края.


      Раньше Вам пришлось бы отрисовывать каждое микроизменение положения, и показывать на экране 24 раза в секунду. Сейчас за Вас эту работу сделает браузер. Достаточно указать, что свойство изображения "отступ картинки от левого края страницы" будет меняться при помощи специальных правил.

      Программирование с нуля правил очень простое занятие. Давайте запишем между элементами

      <head> ... </head> следующий код:


      <style>
       .walking-king {
         margin-left: 0;
         -webkit-transition: margin-left 3s ease-in-out;
         -moz-transition: margin-left 3s ease-in-out;
         -o-transition: margin-left 3s ease-in-out;
         -ms-transition: margin-left 3s ease-in-out;
       }
       </style>


      Думаю, Вы уже догадались, что блок кода задает "стиль" отрисовки анимации, поэтому он расположен между элементами <style> ... </style>.

      Теперь объявим набор свойств изображения, включая анимацию его перемещения. Набор свойтв в терминологии программирования HTML страниц называется классом.


      Открываем блокнот и начинаем программирование с нуля класса .walking-king { }


      Первое свойство, которое следует задать, это первоначальное расположение короля на "сцене. Король со свитой начинает двишаться от левого края экрана - его местоположение программируется нулем.


      margin-left: 0;


      Теперь - самое важное. Нужно объяснить браузеру, каким образом следует "нарисовать" движение. К счастью анимация уже встроена в современные браузеры. Для программирования анимации с нуля и без знаний в программировании нужно добавить свойство transition. Оно говорит браузеру, что положение картинки надо изменить не моментально, а постепенно.


      Программирование с нуля характеристик движения короля делается так:


      -transition: margin-left 3s linear;


      • margin-left - анимироваться будет изменение положения картинки по горизонтали. Далее, при изменении этого свойства, браузер сам обработает анимацию.

      • 3s - время, которое будет длиться движение короля "из пункта А в пункт В"

      • linear - характер движения. Король у нас "гуляет", поэтому движение без ускорения. Равномерное движение задается параметром linear.


      Добавление к объектам HTML свойств анимации пока работает в экспериментальном режиме. Для каждого браузера анимация отрисовывается по-своему.


      Именно поэтому для каждого типа браузеров приходится вставлять свое описание характеристик анимации. Чтобы у Вас не возникло проблем при работе "мультипликации"


      -webkit-transition: margin-left 3s linear;
      -moz-transition: margin-left 3s linear;
      -o-transition: margin-left 3s linear;
      -ms-transition: margin-left 3s linear;


      Остался последний штрих - нужно "сказать" браузеру использовать описание анимации для изображения короля.

      <img src="/king.png" class="walking-king"> 
       

      Запускаем анимацию

      Вы подготовили сцену для анимации, описали как король будет двигаться. Осталось только дать команду: "Мотор!".


      Воспользуемся средствами языка программирования JavaScript. Пускай старт движению задаст щелчок мышью на картинке. Для этого немного изменим тег img с описанием картинки.

      <img src="/boat.png" class="walking-king" onclick="this.style.marginLeft = (marginLeft ? 0 : 400) + 'px';" >



      onclick - означает, что выполнение программы начнется после щалчка по изображению мышью

      this.style.marginLeft - говорит какое свойство надо изменить по клику мыши. Перемещение - это изменение местоположения изображения, поэтому меняется свойство marginLeft (расположение каратинки относительно левого края браузера)

      (marginLeft ? 0 : 400) + 'px' - определяем новое местоположение картинки.


      Совет: Чтобы научиться профессионально программировать на JavaScript пройдите наш курс JavaScript для начинающих.
       Все современные браузеры, кроме IE<10 поддерживают CSS transitions, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.

      Большинство примеров из этой статьи не будут работать в IE<10.

      Читайте также:

      5 5 3