Pull to refresh
  • by relevance
  • by date
  • by rating

SVG анимация в новой сборке WebKit'а

Vector graphics *
В новой сборке WebKit'а, включающаего SquirrelFish Extreme, есть поддержка SVG анимации.
Демо:

при отрытии пузырьки должны перемещаться

SVG — формат векторной графики на основе семейства xml, позволяющий создавать масшабируемые изображения ( с градиентами, прозрачностью и эффектами вроде теней и размытия) и анимировать их.

Поддерживается в той или иной степени Оперой, Лисой и Сафари.

Что там насчёт замены флэша на Ифоне?
Total votes 37: ↑33 and ↓4 +29
Views 1.4K
Comments 60

UPS — виджет для рабочего стола

Lumber room
Очень понравился виджет, выпущенный компанией UPS, и предназначенный (в основном) для быстрого отслеживания package'ей прямо с рабочего стола. Вряд ли он пригодится всем (мне вот он совершенно не нужен), но кому-то, кто по долгу службы занимается отслеживанием почтовых отправок, наверняка придется ко двору.

Не суть. Очень понравился их ролик — точнее, даже анимированная презентация со странным, но милым мультяшным персонажем в главной роли. По-моему, отлично сделано!

Картинки по совершенно непонятным причинам вставляться не желают ни в какую, так что вот вам ссылка на картинку. Но лучше это смотреть в действии — уж очень он потешный! :-)
Total votes 1: ↑0 and ↓1 -1
Views 234
Comments 0

Интерактивные клипы для передачи настроения

Self Promo
imageНа сайте toolwi.com мы открыли новый сервис под названием Muzpic. Этот сервис позволяет сделать интерактивный клип из анимированного gif изображения и звукового файла.

Почему он интерактивный? Ответ прост, клип начинает играть, если навести на него мышкой. Примеры использования музпика можно посмотреть в вашем блоге. В основном его можно использовать, чтобы показать свое настроение, мнение относительно чего-либо, поделиться прикольным gif изображением с друзьями.
Читать дальше →
Total votes 3: ↑2 and ↓1 +1
Views 586
Comments 5

Пробуем Qt 4.6: Qt Animations и State Machine

Qt *
image
На днях вышло так называемое «технологическое превью» (technological preview) Qt 4.6, которое позволяет уже сейчас попробовать новые фичи, которые войдут в релиз 4.6 этого замечательного фреймворка. Перечислять новшества я не буду — они были достаточно хорошо освещены в этом топике, а подробнее остановлюсь на двух из них: State Machine и Qt Animation Framevork.

Итак, что же они из себя представляют?
Я хочу прочитать длинный пост и посмотреть 4 коротеньких видео
Total votes 54: ↑52 and ↓2 +50
Views 13K
Comments 56

Qt + Kinetic = Eye-candy за полчаса

Qt *
В процессе разработки новой версии QutIMа возникла потребность переписать систему уведомлений, так как старая имела множество недостатков.

Не слишком давно на Хабре появился топик, посвящённый новым возможностям, которые появились в Qt. В частности, в нём описывается новый фреймворк, призванный облегчить создание анимированного пользовательского интерфейса. Если дорогой читатель ещё не в курсе дела, то советую для начала ознакомиться с данной статьей.

Небольшое видео с демонстрацией возможностей:



неплохо, правда?
Total votes 36: ↑33 and ↓3 +30
Views 2.8K
Comments 41

Церебральный подход в управлении проектами

CineSoft corporate blog
Представляем Вам новый сервис по управлению медиа проектами — Cerebro

image

История


Уже в 2005 году, когда наш коллектив работал в компании Cinemateka, над «Турецким гамбитом» режиссера Джаника Файзиева, нам стала очевидна необходимость специальной системы управления.
Первым подопытным кроликом стал обычный форум (до него правда была еще wiki) c расширенный опциями назначения ответственного сотрудника и контроля/планирования сроков исполнения поставленных задач.
Далее последовали проекты «Монгол» режиссера Сергея Бодрова-старшего и «1612» Владимира Хотиненко. Полгода работы в новой системе выявили необходимость значительного упрощения работы с файлами в сравнении с FTP-обменом, также создания для пользователей возможности давать аудио и визуальные комментарии ко всем видам файлов, задействованных в рабочем процессе, от видеоролика до обычного офисного документа. Должны же были замученные FTP-обменами и Photoshop-комментариями пользователи когда-нибудь вздохнуть с облегчением :)

UPD: Регистрация в демо версии

Читать дальше →
Total votes 34: ↑32 and ↓2 +30
Views 10K
Comments 43

Не спешите Flash хоронить — краткий обзор сфер применений Flash-технологии

Lumber room
После презентации одного очень интересного девайса и «скандальных» заявлений Стива Джобса в сети и на Хабре в частности начало формироваться мнение, что мол, Флэш своё отживает и скоро его заменит крутая перспективная технология HTML5\CSS3. С точки зрения веб-разработчика ситуация действительно кажется такой, но я хочу напомнить, о других областях применения Флэш, тех, с которыми программисты обычно не соприкасаются ежедневно по роду занятий.

Веб


image

CSS3 и HTML5 несомненно мощная штука. Для представления и форматирования информации.
Шагающие роботы из «Звёздных Войн» несомненно красивая штука, но это скорее из области «смотрите как я клёво научился молотком шурупы забивать». Разработчики обычно не занимаются анимацией, а аниматоры не любят и не хотят писать кучу кода, когда всё можно сделать быстрее и наглядно.
Тут за примерами ходить далеко не нужно, достаточно взглянуть на The FWA: Favorite Website Awards. Пока возможности CSS\Silverlight\whatever не позволят рисовать мышкой или пером на планшете, Flash ещё долго будет жить на имиджевых сайтах, где в первую очередь требуется «Вау-эффект», а не бизнес-логика и дружелюбный, быстрый интерфейс.
Читать дальше →
Total votes 20: ↑13 and ↓7 +6
Views 456
Comments 20

Анимации в WPF

.NET *
Sandbox

Предисловие


Приветствую вас, дорогие хабраюзеры! Сегодня я хочу вам рассказать об анимации в WPF. О ней, конечно, писали ранее на хабре, однако я постараюсь рассказать подробнее. Мой пост будет скорее больше теоретический, однако, я надеюсь, вы извлечете из него выгоду.
Анимация в WPF отличается от всего, что вы видели раньше своей наглядностью и простотой. Раньше вам приходилось вручную перерисовывать сцену по таймеру, разумеется, написав довольно большой объем кода. Теперь вы можете создать анимацию в XAML файле, не написав ни единой строчки кода на C# (или любой другой .Net язык). Разумеется, осталась возможность создавать анимацию в коде, но об этом поговорим позднее. Анимация в WPF не перерисовывает элемент, а изменяет его свойства через определенные интервалы времени (по умолчанию около 60 раз в секунду, если вы не измените в Storyboard). Это позволяет ей оставаться самой собой, например, если анимировать кнопку, то во время анимации она будет оставаться «кнопкой», т.е. на неё можно будет нажать, и производить разнообразные манипуляции над ней.

Много кода, примеров и картинок под катом…
Читать дальше →
Total votes 15: ↑10 and ↓5 +5
Views 70K
Comments 1

Продвинутые анимации с requestAnimationFrame

JavaScript *
Translation
Если вы никогда не писали код для выполнения анимаций, то вы можете дальше не читать :)

Что такое requestAnimationFrame?


Во всех ваших функциях анимаций вы используете повторяющийся таймер для применения изменений каждый несколько миллисекунд. Хорошие новости: производители браузеров решили «почему бы нам не дать вам API для этого потому, что мы, возможно, сможем оптимизировать некоторые моменты для вас». Итак, это основное API для создания анимаций на основе изменения DOM стилей, перерисовки canvas или WebGL

Зачем я должен это использовать?


Браузеры могут оптимизировать анимации идущие одновременно, уменьшив число reflow и repaint до одного, что в свою очередь приведет к повышению точности анимации. Например анимации на JavaScript синхронизированные с CSS transitions или SVG SMIL. Плюс ко всему если выполняется анимация в табе, который невидим, браузеры не будут продолжать перерисовку, что приведет к меньшему использованию CPU, GPU, памяти и как следствие снизит расход батареи в мобильных устройствах.
Читать дальше →
Total votes 27: ↑25 and ↓2 +23
Views 63K
Comments 36

CSS3 Animation в несколько кликов

CSS *


Andy Clarke показал сообществу сайт-демонстрацию возможностей CSS3 Animation и анонсировал animatable.com с помощью которого демонстрация была сделана.

С помощью Animatable анимацию можно создавать в пару кликов. Интерфейс очень похож на видеоредактор. В данный момент проект в разработке.

Демонстрация Mad Animation работает на webkit-браузерах — Chrome, Safari, браузерах для мобильных платформ (Android, BlackBerry, Apple iOS, WebOS). Они увидят всю красоту CSS (нужно кликнуть по «watch»):



Читать дальше →
Total votes 56: ↑54 and ↓2 +52
Views 5.5K
Comments 40

Анимация и Canvas

Canvas *
Sandbox
Добрались руки мои до Canvas. Посматривал я на него давненько, очень уж он мне в качестве инструмента для графиков приглянулся. Да и неделя Canvas на Хабре поддержала интерес.

Но вместо скучных графиков стал я копать в сторону анимации. Получилось, что отрисовываем сцену каждый раз по-новой, соответственно всю информацию о текущих кадрах храним в JS. И решил я попробовать составить простой алгоритм, который позволял бы хранить анимации для объекта, их состояние и выбор по желанию пользователя.
Читать дальше →
Total votes 34: ↑28 and ↓6 +22
Views 47K
Comments 61

Спрайтовая анимация на CSS 3

CSS *
Спрайтовая анимация — одна из тех вещей, которые при всей своей примитивности успешно работают и применяются в компьютерной графике и играх уже больше четверти века. Даже в трехмерных играх есть спрайты — например, билборды взрывов. Во многих браузерных и флеш-играх применяют именно спрайтовую анимацию, так как она очень проста и не требует высокой производительности — просто переключай кадры и все! А с появлением анимации в CSS 3 стало возможным использовать спрайты на своих страницах без яваскриптов.
Подробнее об этом - под катом
Total votes 51: ↑50 and ↓1 +49
Views 15K
Comments 24

Анимация меню при помощи CSS3

CSS *
Translation


В данной статье я хотел бы показать вам некоторые приёмы создания эффектов при помощи CSS3 на примере меню. Идея заключается в простой композиции элементов: иконки, основного названия и вторичного названия, которое будет анимировано при наведении курсора, используя только CSS-переходы и CSS-анимацию. Мы рассмотрим несколько различных эффектов для элементов.
Читать дальше →
Total votes 195: ↑188 and ↓7 +181
Views 33K
Comments 49

Создаем анимированные кнопки при помощи CSS3

CSS *
Translation


В данной статье я хочу поделиться с вами некоторыми экспериментами по созданию анимированных кнопок при помощи CSS3. Идея заключается в создании анимированных ссылок с разными стилями, hover-эффектами и пр.

В данных примерах используются иконки с webiconset.com, а также шрифт от Just Be Nice.

Мы рассмотрим каждый пример и разберем как выглядит их HTML-структура и стили для разных состояний кнопок.

Обратите внимание, что анимация/переходы будут работать только в браузерах, которые поддерживают эти CSS3-свойства.

Чтобы не захламлять код в уроке я не буду использовать префиксы для различных браузеров. Их вы сможете увидеть в архиве с примерами.
Читать дальше →
Total votes 215: ↑207 and ↓8 +199
Views 43K
Comments 40

Mugeda, анимация на HTML5

HTML *
Привет %username%!
Хочу поделится замечательным сервисом для создания анимации на платформе HTML5 под названием Mugeda. Сразу оговорюсь, сервис не мой, но пройти мимо и тем более не рассказать о нем я не мог.



Подробнее
Total votes 58: ↑56 and ↓2 +54
Views 11K
Comments 25

ClojureScript — изменение кода на лету

Working with 3D-graphics *
Сегодня просматривая разные видео на просторах Интернета наткнулся вот на эту вещь: Он спроектировал умный инструмент для разработки видео игр: Брет Виктор
Видео было очень интересным, я подумал что он демонстрирует уже реально существующее приложение. Начал гуглить и пропал часа на 3… Оказалось, что Bret Victor — классный дизайнер и вобще «изобретает инструменты в помощь людям понимать и создавать. Он проектировал экспериментальные UI концепции в Apple, интерактивные графические данные для AI Gore и музыкальные инструменты в Alesis».

Видео с первой ссылки является частью целой конференции:



В его твиттере отписался Chris Granger, что таки создал подобный инструмент
Читать дальше →
Total votes 25: ↑22 and ↓3 +19
Views 20K
Comments 11

«Сделайте мне красиво!» Выпуск №39

Lumber room
Вашему вниманию очередной выпуск подкаста о веб-разработке «Сделайте мне красиво!»

Show notes:



Наши ссылки: RSS и лента на rpod.ru (лента прешоу)
Total votes 8: ↑6 and ↓2 +4
Views 820
Comments 0

Flipboard-анимация средствами CSS3 и JavaScript

Website development *
Sandbox
Добрый день. Наверняка многие видели приложение для iOS под названием Flipboard. При всех его достоинствах, лично меня оно в первую очередь порадовало своими забавными анимациями перелистывания. Родилась идея реализовать нечто подобное для своего сайта исключительно на Javascript и CSS3.

В данном случае я использовал CSS3 свойство transform: rotate3d(...), которое требует поддержки аппаратного ускорения графики и адекватно работает только в Chrome 16+, поэтому все нужные свойства я ограничил префиксами -webkit-. В продакшене для пользователей с неподходящим параметрами я заменял анимацию на более простую.

Вот так выглядит готовый результат:



Живое демо

Читать дальше →
Total votes 43: ↑36 and ↓7 +29
Views 4.1K
Comments 29

Машинки на чистом SVG

Firefox Opera Google Chrome
В последнее время для меня большим вдохновением является SVG-анимация. С её момощью можно делать из простых элементов впечатляющие вещи. Например, сегодня я закончил делать демку про машинки и с радостью написал об этом себе в блог.

Нарушать правила хабра мне бы не хотелось, поэтому напишу пару слов о процессе. В спецификации SVG есть раздел про анимацию, в котором здорово описано как должны клиенты (например, браузеры) выполнять анимацию. В теории получается очень красиво, но пока не попробуешь сделать что-то своими руками — не поймешь.

Update:
Прямые ссылки на машинки ралли, гонки, разгон и торможение, парковка, машинка с фарами.
Читать дальше →
Total votes 47: ↑39 and ↓8 +31
Views 7.7K
Comments 34