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

Горячая летняя сборка Opera 12.50

Opera corporate blogOpera


Лето обычно довольно тихое время в офисах Opera Software, но глядя на последнюю сборку Opera 12.50 и не скажешь, что наши разработчики бывают в отпуске.

Некоторые фичи из огромного списка изменений заслуживают отдельного внимания:

Стабильные CSS-свойства без префиксов


Мудрый человек (наш уважаемый Брюс Лоусон) как-то сказал: «Самый простой способ не иметь проблем с префиксами — не использовать их». В этой сборке мы впервые удаляем префиксы для свойств: Transition, Animation и Transform.
Читать дальше →
Total votes 72: ↑62 and ↓10 +52
Views26.3K
Comments 164

CSS анимации на реальном проекте

Одноклассники corporate blogCSSHTML


Всё чаще среди веб-разработчиков поднимается тема возможностей CSS анимаций (transition/animation), практически на каждой конференции по клиентской разработке можно услышать о потрясающих преимуществах новой технологии.

Производительность и гибкость CSS анимаций позволяет творить удивительные вещи, но можно ли уже использовать эти новые возможности в силу их нестабильности и незрелости на реальных больших проектах?

В этом посте мы расскажем, почему так важно начинать использовать новые технологии клиентской разработки уже сегодня и о трудностях, которые могут ждать вас на пути.
Читать дальше →
Total votes 95: ↑87 and ↓8 +79
Views90K
Comments 66

Кроссбраузерная реверсивная анимация фона на CSS3

Website developmentCSS
Sandbox
Доброго времени суток уважаемые читатели Хабра. Существуют замечательные CSS свойства с помощью которых можно задать реверсивное движение анимации — animation-direction: alternate и animation-direction: alternate-reverse (не путать со свойством animation-direction: reverse, которое задает реверсивное направление), но на сегодняшний день их не поддерживает большинство современных браузеров. Я хочу рассказать о том как сделать кроссбраузерную реверсивную анимацию фона.

netcribe

Пример на Jsfiddle

Читать дальше →
Total votes 18: ↑14 and ↓4 +10
Views27.6K
Comments 5

Всем, всем, всем: время обновлять свой CSS3

CSSHTML
Translation
Tutorial
Если Вы используете экспериментальный CSS на своих сайтах, в демках, статьях или инструментах, то это требует определенного рода поддержки. В связи с некоторыми недавними изменениями в мире браузеров, настало время пересмотреть и обновить Ваш код. Эта статья поможет Вам понять, что же начать обновлять уже сейчас.

Читать дальше →
Total votes 77: ↑73 and ↓4 +69
Views40.3K
Comments 48

Добавление анимации в ListView

Development for Android
Приветствую Вас, коллеги,

сегодня я пожаловал к вам с коротенькой статьей на тему добавления анимаций в ListView при скроллинге. Не так давно мне захотелось добавить в мой список анимацию, аналогичную той, что можно увидеть в G+ клиенте, но немного другую.

А захотелось мне сделать так, чтобы новые элементы не просто появлялись внизу, а выплывали снизу и немного справа. В общем-то, это я сделал, но позже, я посмотрел доклада Романа Ги и Чета Хааса на Google IO 2013 и загорелся идеей добавить искажение при этом, чтобы добавить реалистичности. Это потребовало немного изменить подход, но, в целом концепция осталась прежней.

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

Чтобы было понятно, вообще, о чем я, ниже ссылка на ролик с конечной анимацией. Обратите внимание, как элементы деформируются при появлении. Поскольку видео записывалось с эмулятора, присутствуют небольшие дергания, на девайсе все идеально гладко. Так же для наглядности я увеличил продолжительность анимации до 900мс. Обычно вы хотите, чтобы она длилась 300 мс.



Читать дальше →
Total votes 49: ↑47 and ↓2 +45
Views18.6K
Comments 12

«Continuous page repainting и отладка перерисовки страницы» в Chrome Dev Tools

Website developmentCSSGoogle Chrome
Tutorial
image
Сегодня мы поговорим о том, как Chrome Dev Tools помогают нам бороться с лишней перерисовкой страницы.

Прошлые части:
«Workspace» и «Сниппеты»
«Поддержка Sass»

Читать дальше →
Total votes 61: ↑57 and ↓4 +53
Views10.9K
Comments 4

Custom layout. Выплывающая панель + параллаксный скроллинг

Development for Android
Привет, коллеги.

Сегодня я хотел рассказать, как можно создать нестандартный менеджер разметки (layout manager) и вдохнуть в него жизнь при помощи анимаций.
Нам в DataArt часто требуется реализовывать нестандартные компоненты для приложений заказчика, поэтому у меня накопился определенный опыт в этом деле, которым решил поделиться.
В качестве примера решил реализовать аналог часто встречающейся в социальных сетях выплывающей снизу панели. Обычно этот прием используется при необходимости показать контент, например, фото, и добавить возможность комментировать на дополнительной панельке, которую пользователь может вытянуть снизу. При этом основной контент обычно тоже уплывает наверх, но немного медленнее, чем основная панель. Это называется «параллаксный скроллинг».
Специально для этой статьи я решил с нуля реализовать подобный компонент. Сразу хочу заметить, что это не полноценный, стабильный и готовый для продакшен код, а всего лишь демонстрация, написанная за пару часов, чтобы показать основные приемы.

Читать дальше →
Total votes 36: ↑36 and ↓0 +36
Views18.3K
Comments 13

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №72 (24 — 31 августа 2013)

Zfort Group corporate blogWebsite development
Предлагаем вашему вниманию очередную подборку с ссылками на новости, интересные материалы и полезные ресурсы.


Читать дальше →
Total votes 58: ↑54 and ↓4 +50
Views30.6K
Comments 7

Unity3D + Kinect, или анимации на коленке

KamaGames Studio corporate blogGame developmentUnity3D
Вступление

Здравствуй, уважаемый читатель. Прежде чем начать, мне хотелось бы немного рассказать о цели и формате моей статьи. Обычно с такими заголовками статьи носят обозревательный характер, в них описываются технические стороны реализации того или иного решения или приводится инструкция по эксплуатации и т.д. Выводы же читатель делает самостоятельно. Прежде чем написать эту статью, я провел небольшую исследовательскую работу на предмет аналогов. И нашел несколько статей как на самом хабре, так и массу видео материалов на ютубе. Поэтому я решил не писать очередной обзор технологии, а поделиться впечатлениями, рассказать о граблях, на которые мы наступили, и привести немного “кухонной” аналитики.
Цель этой статьи – помочь вам определиться, использовать или нет данный метод. В первую очередь она рассчитана на технических специалистов, хотя и не пестрит техническими деталями. Но так же будет полезна и всем остальным – арт-специалистам, менеджерам проектов да и просто всем, кто, так или иначе, связан с разработкой игр. Возможно, ссылка на данную статью поможет выбить бюджет у начальства и ускорить разработку/повысить качество вашей будущей игры. Итак, приступим.
Читать дальше →
Total votes 16: ↑12 and ↓4 +8
Views25.9K
Comments 2

Веб анимации — element.animate() уже в Chrome 36

Website developmentJavaScriptProgramming
Translation
Анимация в вебе была одна из областей JavaScript, но сейчас, когда мир пересел на мобильные устройства, анимация переместилась на CSS. Это позволило нам использовать декларативный синтаксис при описании анимации, а браузеру производить оптимизацию. В погоне за 60fps (60 кадров в секунду) на мобильных устройствах, вам будет полезно знать все тонкости и нововведения, касающиеся механизмов эффективного отображения анимации в ваших браузерах.
Читать дальше →
Total votes 31: ↑28 and ↓3 +25
Views21.9K
Comments 9

Руководство по анимационному отображению представлений в таблице на Swift

Website developmentDevelopment for iOSSwift
Translation
Tutorial
Стандартный UITableView – мощный и в тоже время гибкий способ для представления данных в Ваших приложениях; есть вероятность, что большинство приложений, которые Вы создаёте, будут использовать табличное представление в той или иной форме. Тем не менее, есть недостаток в том, что без некоторого уровня настройки, приложения будут выглядеть бледно и сливаться с тысячами подобных. Во избежание “скучных” таблиц, Вы можете добавить несколько подходящих анимационных изображений, которые «оживлять» приложение. Возможно, Вы видели подобное в приложении Google+, где ячейки в таблице буквально летают по экрану вместе с классной анимацией. Если не обращали на это внимания, Вы можете скачать здесь (бесплатно)! Также может быть полезным и интересным ознакомление с руководством по дизайну (design guidelines), которое Google выпустило на конференции 2014 I/O. Оно содержит много советов и примеров, как эффективно и правильно использовать анимацию в своих приложениях.

Читать дальше →
Total votes 8: ↑6 and ↓2 +4
Views10.6K
Comments 3

RSConf: Обзор и видеоматериалы фронтенд-конференции в Минске

Website developmentJavaScript
Sandbox
image

The Rolling Scopes — минское сообщество фронтенд/javascript разработчиков. Мы занимаемся проведением митапов, воркшопов и Q&A сессий. А в этом году доросли до уровня, не побоюсь сказать этого слова, международной конференции. Наше 20-е мероприятие получилось помасштабнее остальных. В связи с этим непременно хочется поделиться деталями проведения, атмосферой и, конечно же, материалами.
Читать дальше →
Total votes 23: ↑21 and ↓2 +19
Views9.3K
Comments 5

Переходы при помощи CoreAnimation: анимируем появление изображения

Development for iOSDevelopment of mobile applicationsObjective C
Translation
Tutorial
Недавно я наткнулся на интересный концепт банковского приложения. Интересен он не только лишь тем, что выглядит значительно удобнее мобильного приложения любого банка, но и своими невероятными анимациями. Некоторые мне так понравились, что я решил незамедлительно их где-нибудь применить. В частности, мне показалась очень интересной анимация появления на экране фотографии пользователя и иконок управления его картой.
Читать дальше →
Total votes 13: ↑11 and ↓2 +9
Views11.4K
Comments 1

Обновление Windows 10 SDK — сборка 10586

Microsoft corporate blogDevelopment for Windows PhoneDevelopment for Windows
Translation

Shen Chauhan и Andy Wigley рассказывают об обновлении Windows и новом SDK

Пару недель назад мы выпустили новую версию Windows 10 SDK (можно ставить параллельно с предыдущей версией). SDK включает более 200 новых типов и дополнительных методов и свойств для существующих типов.

В этой статье мы расскажем подробнее о некоторых улучшениях в универсальной Windows-платформе (UWP), включенных в SDK:

  • Визуальная композиция, эффекты и анимация
  • SQLite
  • Работа с вводом и пером
  • Более эффективная и гибкая установка AppX
  • UI и обновления XAML
  • Bluetooth и работа по сети
  • Работа с сенсорами
  • Хранилище устройства
  • Windows App Certification Kit (Windows ACK)
  • Набор для дизайна (Photoshop)

Читать дальше →
Total votes 23: ↑19 and ↓4 +15
Views13.4K
Comments 0

Работа с анимацией. AnimatedVectorDrawableCompat

Development of mobile applicationsDevelopment for Android
В этой стате хотел бы всем рассказать и показать на практике, как можно делать анимацию в Android приложении при помощи AnimatedVectorDrawableCompat, например свои кастомные кнопки, ImageView, FloatingActionButton.

Читать дальше →
Total votes 3: ↑3 and ↓0 +3
Views5K
Comments 4

Анимации на GPU: делаем это правильно

Одноклассники corporate blogCSSClient optimization

Думаю, все уже знают, что современные браузеры умеют рисовать некоторые части страницы на GPU. Особенно это заметно на анимациях. Например, анимация, сделанная с помощью CSS-свойства transform выглядит гораздо приятнее и плавнее, чем анимация, сделанная через top/left. Однако на вопрос «как правильно делать анимации на GPU?» обычно отвечают что-то вроде «используй transform: translateZ(0) или will-change: transform». Эти свойства уже стали чем-то вроде zoom: 1 для IE6 (если вы понимаете, о чём я ;) для подготовки слоя для анимации на GPU или композиции (compositing), как это предпочитают называть разработчики браузеров.


Однако очень часто анимации, которые красиво и плавно работали на простых демках, вдруг неожиданно начинают тормозить на готовом сайте, вызывают различные визуальные артефакты или, того хуже, приводят к крэшу браузера. Почему так происходит? Как с этим бороться? Давайте попробуем разобраться в этой статье.

Читать дальше →
Total votes 78: ↑78 and ↓0 +78
Views45.6K
Comments 26

[ Микро-навигация (микро-подталкивание) ] — микро-анимация для изменения поведения пользователя

Web designDevelopment of mobile applicationsMobile applications designComputer AnimationDesign
Translation
Небольшая, но на мой взгляд очень полезная и интересная статья)

Некоторые делают это лучше чем другие, раскрывая психологию микро-анимации.



Микро-подталкивание — это своевременная небольшая анимация, которая побуждает пользователя выполнять «маленькую» задачу, которую они, возможно, забыли или не заметили.
Читать дальше →
Total votes 6: ↑6 and ↓0 +6
Views3.9K
Comments 0

Использование инспектора анимации в инструментах разработчика Chrome

Web designCSSGoogle ChromeHTMLComputer Animation
Translation
В следующий раз, когда вы создадите очередные анимации на основе CSS3, вам может быть полезно перейти в инструменты разработчика Chrome и воспользоваться преимуществами функций проверки и настройки анимации. В этой краткой статье мы расскажем вам о том, какие инструменты анимационной разработки доступны в Chrome, как получить к ним доступ и чем они могут вам помочь.

Если вы хотите протестировать ваши CSS3 анимации с помощью этих инструментов то можете воспользоваться готовым кодом из нашего курса: 10 Проектов CSS3: интерфейс и макет.


Вот полная версия страницы.
Читать дальше →
Total votes 6: ↑5 and ↓1 +4
Views3.9K
Comments 1

Flash-анимации в Unity3D своими руками. Часть первая, лирическая

Adobe FlashGame developmentUnity3D

В этой серии статей я расскажу о том, как и почему мы решили создать своё собственное решение для импорта flash-анимаций в Unity, об оптимизациях и внутренней кухне получившегося плагина. А также в программе: рассказ о внутренностях формата swf, особенностях расширения Unity-редактора и вообще об анимациях в целом. Прошу под кат!



Читать дальше →
Total votes 12: ↑11 and ↓1 +10
Views4.9K
Comments 9

Flash-animation in Unity3D from scratch. Part one, lyrical

Adobe FlashGame developmentUnity3D
Translation

In this article series, I will talk about how and why we decided to create our own solution for import of Flash animation to Unity, and about optimization techniques and internal workings of the plug-in. I also have lots of other fascinating stuff to tell about: internals of the SWF format, special features of the Unity editor extension and general matters of animation. You'll find all that inside!



Read more →
Total votes 10: ↑9 and ↓1 +8
Views2.5K
Comments 0
1