Комментарии 47
Здорово! Очень интересно!
круто, только примеры не работают :)
Они не грузятся или не работают? :) Я проверял в IE9 RC, Chrome 10.0.648.82 beta, Firefox 4b11 и Opera 11.01 на Win7. Какой у вас браузер?
Чуть-чуть подправить цвета…
Здорово, но чтобы подарок был оформленным, девушке надо дарить такую открытку, как фон рабочего стола на новеньком, только что купленном ей ноутбуке.
Поздравительная открытка к 8 марта на HTML5 и EaselJS и блог компании Microsoft. Казалось бы, какая связь?
Вы против? :)
Создатели EaselJS сотрудничают с MS, а в топике типа пиар)
Честно, у меня не было цели рекламировать именно EaselJS, но если бы и было — оно того стоит ;) Реально облегчает жизнь во многих сценариях.
Ну, у меня есть LibCanvas, и, судя по мануалу EaselJS (та и не шибко изящным исходникам в топике[ничего личного, исходники сами по себе — неплохи, но фреймворк мог их значительно улучшить]) — они ооочень сильно не дотягивают.
Свое всегда кажется лучше и удобнее :) И согласен, есть еще куда двигаться, библиотека еще только развивается. Впрочем, на ее ранеей версии сделано www.pirateslovedaisies.com/ — думаю, это достаточный показать потенциала.
Я знаю про пиратов — вполне неплохо. Но пиратов можно было бы сделать и без фреймворка.
Я стараюсь судить объективно. Например, JQuery и MooTools круче, чем мой atomJS, с чем я даже не собираюсь спорить.
Но смотрите — кучу рутинных операций вам всё равно приходится пределывать вручную.
Прелоадинг картинок, анимацию, та даже получение случайной точки на холсте.
Да и идею с методом «tick» в глобальной области видимости, а также
Обе штуки можно было бы исправить нормальной событийной моделью, как, например, сделано в JQuery:
На первый взгляд, конечно, разницы нету, но что будет, если надо будет прилепить два события? В dhtml раньше тоже так делали, но ведь отказались от этого со временем?
В общем, много вещей — непродуманно, а много — вообще не сделано. Ну да ладно, кому то оно нравится и это главное)
Я стараюсь судить объективно. Например, JQuery и MooTools круче, чем мой atomJS, с чем я даже не собираюсь спорить.
Но смотрите — кучу рутинных операций вам всё равно приходится пределывать вручную.
Прелоадинг картинок, анимацию, та даже получение случайной точки на холсте.
Да и идею с методом «tick» в глобальной области видимости, а также
this.onMouseOver. Обе штуки можно было бы исправить нормальной событийной моделью, как, например, сделано в JQuery:
this.onMouseOver = function (e) { this.reset(); };
// =>
this.bind('mouseover', function () {
this.reset();
});
// а также
stage.bind('update' , function () {});
На первый взгляд, конечно, разницы нету, но что будет, если надо будет прилепить два события? В dhtml раньше тоже так делали, но ведь отказались от этого со временем?
В общем, много вещей — непродуманно, а много — вообще не сделано. Ну да ладно, кому то оно нравится и это главное)
Кстати, оно основано на фреймворке YUI?
у меня все бабочки улетели и не хотят возвращаться! (ф5 помог)
В Chromium 11.0.691.0 (76865), Ubuntu 10.10 бабочки начитают лететь, только если навести на них курсор.
«на фоне красовой»
Прошу прощения, так и должно быть?
Прошу прощения, так и должно быть?
«Машем», а не «махаем»!
Я сначала всех бабочек прогнала, а потом накликала целую кучу что они бедняжки даже летали тяжело!
Спасибо за поздравление! ^_^
Спасибо за поздравление! ^_^
Я, конечно, очень сильно извиняюсь, но совершенно унылые бабочки. Вы же видели как летают бабочки (живые). С такой частотой взмахов крыльями как у Вас, простите, но «не взлетит».
По задору больше напоминает осенних мух, нежели бабочек.
По задору больше напоминает осенних мух, нежели бабочек.
Если делать быстрее, то ничего не видно будет :) Воспроизвести реалистично движение крыльев бабочки — отдельная сложная задача. В частности, крылья не являются двумя жесткими плоскостями — это динамичные поверхности, которые синхронно движутся, создавая вокруг необходимые вихревые потоки. Буду рад посмотреть, если воспроизведете.
Ну это ведь казуалка. Не стоит требовать от неё симуляции.
Боже мой, такой огромный код ради такой убогой анимации…
Мы тоже на днях делали анимацию бабочки. Решили попробовать интеграцию Flash+JS.
Получилось вот так. (нужно навести мышку на логотип).
Мы тоже на днях делали анимацию бабочки. Решили попробовать интеграцию Flash+JS.
Получилось вот так. (нужно навести мышку на логотип).
Жалко, надпись в фоновом изображении. Так просто не поменяешь
Кто-нибудь может объяснить доступно, как берутся формулы для взмахов крыльев и откуда взяты константы в них? Как это было расчитано?
butterfly.move = function () {
var wingAngle = (butterfly.steps - butterfly.step) / butterfly.steps * Math.PI;
butterfly.lWing.scaleX = butterfly.rWing.scaleX
= butterfly.scale * (0.4 + 0.6 * Math.abs(Math.cos(wingAngle * 4)));
butterfly.step--;
}1. Взмахи крыльев делаются через изменение масштаба по оси X.
2. Т.к. бабочки разного размера, в качестве отправной точки масштаба используется мастштаб бабочки butterfly.scale в качестве множителя. (Если размер не менялся, то butterfly.scale = 1).
3. Дальше масштаб нужно менять периодически — здесь хорошо подходят тригонометрические функции.
4. Полет бабочки состоит из {butterfly.steps} шагов, текущий шаг — {butterfly.step}. Из этих двух чисел получается пропорция в отрезке [0, 1.0].
5. Для косинуса (беру cos из соображения удобства) нужно передать угол, пропорцию выше, нужно перевести в интервал [0, PI], значия cos будет, соответственно, 1->… -> 0 ->… -> -1. Так как отрицательные значения нам не нужны, берем модуль (abs).
6. Дополнительный множитель 4 — определяет число взмахов за полет.
7. Коэффициенты 0.4 и 0.6 в сумме должны давать 1 (полный масштаб), 0.4 — сколько нужно оставить, чтобы крылья не схлопнулись.
Как-то так :)
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Делаем поздравительную открытку к 8 марта на HTML5 и EaselJS