{
    "version": "https:\/\/jsonfeed.org\/version\/1.1",
    "title": "Блог Ильи Бирмана: заметки с тегом анимация",
    "_rss_description": "Блог Ильи Бирмана о дизайне, городах, музыке и жизни.",
    "_rss_language": "ru",
    "_itunes_email": "ilyabirman@ilyabirman.ru",
    "_itunes_categories_xml": "<itunes:category text=\"Arts\"><itunes:category text=\"Design\" \/><\/itunes:category>\r\n<itunes:category text=\"Society &amp; Culture\"><itunes:category text=\"Personal Journals\" \/><\/itunes:category>\r\n<itunes:category text=\"Technology\" \/>\r\n",
    "_itunes_image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic-square@2x.jpg?1573933764",
    "_itunes_explicit": "no",
    "home_page_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/animaciya\/",
    "feed_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/animaciya\/json\/",
    "icon": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764",
    "authors": [
        {
            "name": "Илья Бирман",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/",
            "avatar": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764"
        }
    ],
    "items": [
        {
            "id": "6603",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/spring-animations\/",
            "title": "Пружинистые анимации",
            "content_html": "<p>Если у вас в интерфейсе что-то выезжает, то хорошо, чтобы оно не просто ехало-ехало, а потом вдруг остановилось, а как-то постепенно и плавно приехало в финальную точку. Это ощущение определяется характером анимации. Вместо линейной анимации, лучше выбрать анимацию с плавным замедлением, то есть ease out. Можно даже понастраивать, каким именно будет замедление.<\/p>\n<p>Иногда встречаются анимации, когда что-то не просто плавно замедляяесь подъезжает к финальной точке, а как-то ещё колеблется вокруг неё:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/easings@2x.png\" width=\"400\" height=\"83\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Примеры с сайта <a href=\"https:\/\/easings.net\/\">easings.net<\/a><\/div>\n<\/div>\n<p>Оно может просто уехать дальше, чем надо, и потом вернуться, а может вообще долго колебаться вокруг финальной точки.<\/p>\n<p>Когда я впервые такие эффекты стал замечать, иногда они приносили радость, потому ощущались живыми и естественными, но иногда раздражали назойливостью и избыточностью.<\/p>\n<p>Однажды Эплы на ВВДЦ сформулировали простой принцип: анимация должна плавно замедляться ровно к нужной точке, если её инициировал компьютер, но может пружинить, если её инициировал человек! То есть если я сам пальцем швыряю панельку, она может уехать чуть дальше, чем надо, и потом вернуться. Это логично: я ж не рассчитывал силы как в бильярде, чтобы попасть ровно — просто толкнул, как вышло. Но если панелька выехала сама и пружинит, то это воспринимается как баг. Типа, чё она сразу-то не приехала куда надо? Почему программа не смогла рассчитать нужную скорость? Когда я услышал этот эпловский принцип, я почувствовал себя глупым, потому что это очень простое объяснение, но сам я его сформулировать не мог.<\/p>\n<p>В Ай-ОСе 26, когда появляется уведомление, оно всё время выезжает дальше чем надо, а потом возвращается назад. Тупое, несуразное уведомление, которое само не знает, куда ему надо! Понятно, что дизайнеры Ай-ОСа 26 сами не читали собственные принципы, и поэтому не знают этого, а чувство прекрасного у них отбито многолетней работой с Аланом Даем.<\/p>\n<p>Но зато теперь хотя бы вы знаете и не будете делать такое говно в своих продуктах.<\/p>\n",
            "summary": "Если у вас в интерфейсе что-то выезжает, то хорошо, чтобы оно не просто ехало-ехало, а потом вдруг остановилось, а как-то постепенно и плавно приехало в финальную точку",
            "date_published": "2025-12-09T20:08:53+02:00",
            "date_modified": "2025-12-09T19:58:47+02:00",
            "tags": [
                "анимация",
                "пользовательский интерфейс",
                "Эпл"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/easings@2x.png",
            "_date_published_rfc2822": "Tue, 09 Dec 2025 20:08:53 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6603",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/easings@2x.png"
                ]
            }
        },
        {
            "id": "6308",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-145\/",
            "title": "На интерфейсном курсе: у Гугля плохой дизайн",
            "content_html": "<p>Отвечаю на вопрос участника курса о том, почему мне не нравятся гуглевские поля ввода, у который лейбл перепрыгивает изнутри поля в рамочку. 5 минут:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/WjX759lGaHI?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Это фрагмент № 145 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 20 октября 2023 года.<\/p>\n<p>До 19 июля идёт запись на курс, который пройдёт с 20 июля по 18 августа. Сейчас −20% из-за ранней записи.<\/p>\n<p><a href=\"http:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "Отвечаю на вопрос участника курса о том, почему мне не нравятся гуглевские поля ввода, у который лейбл перепрыгивает изнутри поля в рамочку",
            "date_published": "2024-06-22T15:40:56+02:00",
            "date_modified": "2024-06-22T15:40:42+02:00",
            "tags": [
                "анимация",
                "видео",
                "Гугль",
                "пользовательский интерфейс",
                "студентам",
                "фрагменты курса ПИ",
                "элементы интерфейса"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-WjX759lGaHI-cover.jpg",
            "_date_published_rfc2822": "Sat, 22 Jun 2024 15:40:56 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6308",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-WjX759lGaHI-cover.jpg"
                ]
            }
        },
        {
            "id": "6202",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/think-on-5\/",
            "title": "Думаем дальше № 5 — «Ты явно хочешь гуй» с Никитой Прокоповым",
            "content_html": "<p>Обсудили ещё деталей интерфейса текстового ввода, зачем люди пользуются терминалом и анимацию:<\/p>\n<ul>\n  <li><a href=\"https:\/\/t.me\/ilyabirman_channel\/9941\">в Телеграме<\/a>,<\/li>\n  <li><a href=\"https:\/\/thinkon.mave.digital\/ep-5\">в Мейве<\/a>.<\/li>\n<\/ul>\n<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"e2-text-table\">\n  <tr>\n    <td style=\"text-align: left\">0:00<\/td>\n    <td style=\"text-align: left\">Кросс-платформенность против качества нативных приложений<\/td>\n  <\/tr>\n  <tr>\n    <td style=\"text-align: left\">12:35<\/td>\n    <td style=\"text-align: left\">Поведение текстового поля: направление выделения<\/td>\n  <\/tr>\n  <tr>\n    <td style=\"text-align: left\">19:07<\/td>\n    <td style=\"text-align: left\">Поведение текстового поля: курсор с памятью стиля<\/td>\n  <\/tr>\n  <tr>\n    <td style=\"text-align: left\">22:05<\/td>\n    <td style=\"text-align: left\">Терминал против графического интерфейса. Никита толкает речь против терминала<\/td>\n  <\/tr>\n  <tr>\n    <td style=\"text-align: left\">28:41<\/td>\n    <td style=\"text-align: left\">Илья неожиданно толкает речь за<\/td>\n  <\/tr>\n  <tr>\n    <td style=\"text-align: left\">35:10<\/td>\n    <td style=\"text-align: left\">Но Никита имел в виду немножко другое, но Илья и про это тоже что-то там думает<\/td>\n  <\/tr>\n  <tr>\n    <td style=\"text-align: left\">40:35<\/td>\n    <td style=\"text-align: left\">Находим способ и тут вырулить на тему того, что софт тормозит без дела<\/td>\n  <\/tr>\n  <tr>\n    <td style=\"text-align: left\">47:43<\/td>\n    <td style=\"text-align: left\">Сложные клавиатурные действия с текстом в Виме и ВС Коде<\/td>\n  <\/tr>\n  <tr>\n    <td style=\"text-align: left\">52:02<\/td>\n    <td style=\"text-align: left\">Чатботы, дизайн взаимодействия через текстовые команды и тотальное скриптование всего<\/td>\n  <\/tr>\n  <tr>\n    <td style=\"text-align: left\">1:02:57<\/td>\n    <td style=\"text-align: left\">Делл анонсировал новый 40-дюймовый монитор, а у Ильи Хуавей<\/td>\n  <\/tr>\n  <tr>\n    <td style=\"text-align: left\">1:10:35<\/td>\n    <td style=\"text-align: left\">Никита спрашивает, зачем на сайте Ильи анимируется меню<\/td>\n  <\/tr>\n  <tr>\n    <td style=\"text-align: left\">1:14:04<\/td>\n    <td style=\"text-align: left\">Управляемая загрузка веб-страниц <a href=\"https:\/\/ilyabirman.ru\/emerge\/\">и Эмёрдж<\/a><\/td>\n  <\/tr>\n<\/table>\n<p><a href=\"https:\/\/thinkon.mave.digital\">Все выпуски<\/a> · <a href=\"https:\/\/cloud.mave.digital\/51724\">РСС для подкастного приложения<\/a><\/p>\n",
            "summary": "Обсудили ещё деталей интерфейса текстового ввода, зачем люди пользуются терминалом и анимацию...",
            "date_published": "2024-01-13T09:58:47+02:00",
            "date_modified": "2024-01-13T10:05:24+02:00",
            "tags": [
                "анимация",
                "Думаем дальше",
                "пользовательский интерфейс",
                "Эмёрдж"
            ],
            "_date_published_rfc2822": "Sat, 13 Jan 2024 09:58:47 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6202",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "6060",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-stability\/",
            "title": "Марко Армент про стабильность в интерфейсе",
            "content_html": "<p><a href=\"https:\/\/atp.fm\/439\">В 439-м выпуске АТП<\/a> Марко Армент произнёс хорошую речь о стабильности в интерфейсе, я даже не поленился записать. Начиная с 35:07:<\/p>\n<blockquote>\n<p>UIs so often lack stability. It is such a critical quality. You want the UI to be stable.<\/p>\n<p>Not every surface should be “live”... If you try to select some text on a website with a mouse on a desktop, you don’t want every single thing that you can click on or accidentally brush against with your finger on a phone to be something that is live, that does something. You want stability, you want things to feel solid, and predictable, and forgiving. And not being so susceptible to things like accidental input or imprecision in input... People are doing things unintentionally.<\/p>\n<p>You also don’t want the UI to be moving around when people are trying to use it. And I feel like a lot of the current Mac design language these days, where everything is being hidden behind hover states and then things animate somewhere out of the way and change where they are... this is all violations of UI stability. It makes everything a hot zone or a live zone. And things are jumping around, and it’s disorienting, and it’s inefficient, and it’s unintuitive as well, and undiscoverable and all sorts of other problems.<\/p>\n<p>Anything you can do to make a UI more stable in a sense that things don’t move around too much, there aren’t too many different modes where things come in and out or slide around, or pop in, or pop out, that makes it easier and better and more calm to use for more people. And it’s a better design.<\/p>\n<\/blockquote>\n",
            "summary": "В 439-м выпуске АТП Марко Армент произнёс хорошую речь о стабильности в интерфейсе, я даже не поленился записать",
            "date_published": "2023-08-08T21:23:08+02:00",
            "date_modified": "2023-08-08T21:30:03+02:00",
            "tags": [
                "анимация",
                "АТП",
                "пользовательский интерфейс",
                "цитаты"
            ],
            "_date_published_rfc2822": "Tue, 08 Aug 2023 21:23:08 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6060",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "5986",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/figma-micro-animations-video\/",
            "title": "Видео по вторникам: микроанимации в Фигме",
            "content_html": "<p>Небольшой видос про то, как сделать анимированное сердечко в Фигме:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/oOJ5StJr-pU?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Сама анимация простенькая, но во второй части идёт полезный разбор того почему она была сделана именно таким образом. В частности, о разнице между ховером и маусэнтером и о том, как избежать ховер-эффекта сразу после клика (ведь курсор в этот момент по-прежнему над иконкой). Это всё полезно учитывать и при разработке.<\/p>\n",
            "summary": "Небольшой видос про то, как сделать анимированное сердечко в Фигме...",
            "date_published": "2023-05-02T08:30:53+02:00",
            "date_modified": "2023-05-02T08:30:39+02:00",
            "tags": [
                "анимация",
                "видео",
                "пользовательский интерфейс",
                "студентам",
                "Фигма"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-oOJ5StJr-pU-cover.jpg",
            "_date_published_rfc2822": "Tue, 02 May 2023 08:30:53 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "5986",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-oOJ5StJr-pU-cover.jpg"
                ]
            }
        },
        {
            "id": "5744",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/barprephero-ui\/",
            "title": "Интерфейс «Барпрепхиро»",
            "content_html": "<p>Нарисовал <a href=\"https:\/\/ilyabirman.ru\/projects\/barprephero-ui\/\">новый интерфейс приложения «Барпрепхиро»<\/a>, чтобы не перепутали со всеми остальными юридическими программами на свете:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/ilyabirman.ru\/projects\/barprephero-ui\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/barprephero-ui.jpg\" width=\"920\" height=\"460\" alt=\"Интерфейс «Барпрепхиро»\" \/>\n<\/a><\/div>\n",
            "summary": "Нарисовал новый интерфейс приложения «Барпрепхиро», чтобы не перепутали со всеми остальными юридическими программами на свете",
            "date_published": "2021-10-18T14:45:11+02:00",
            "date_modified": "2021-10-18T14:47:05+02:00",
            "tags": [
                "анимация",
                "дизайн",
                "пользовательский интерфейс",
                "проекты",
                "работа"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/barprephero-ui.jpg",
            "_date_published_rfc2822": "Mon, 18 Oct 2021 14:45:11 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "5744",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/barprephero-ui.jpg"
                ]
            }
        },
        {
            "id": "5004",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/bureau-school-lecture-animation\/",
            "title": "В школы бюро добавилась лекция об анимации",
            "content_html": "<p>Это трейлер новой лекции об анимации для школ бюро:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/8yrzctK8ljs?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>В лекции речь о качествах хорошей анимации: ненавязчивости, естественности, согласованности и чистоте. В тизере некоторые мысли даже можно уловить целиком.<\/p>\n<p>Я начал переснимать лекции, чем очень доволен. Как-нибудь расскажу одну из заложенных в новых лекциях идей. Следующая запись в школу пока не скоро, но уже можно <a href=\"https:\/\/bureau.ru\/school\/prep\/\">записаться на подготовительные курсы<\/a> зато (там есть моя мощная лекция про Фотошоп).<\/p>\n",
            "summary": "В лекции речь о качествах хорошей анимации: ненавязчивости, естественности, согласованности и чистоте",
            "date_published": "2019-04-14T12:20:07+02:00",
            "date_modified": "2020-07-30T19:53:53+02:00",
            "tags": [
                "анимация",
                "видео",
                "обновление лекций в школах бюро",
                "пользовательский интерфейс",
                "студентам",
                "Школа бюро"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-8yrzctK8ljs-cover.jpg",
            "_date_published_rfc2822": "Sun, 14 Apr 2019 12:20:07 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "5004",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-8yrzctK8ljs-cover.jpg"
                ]
            }
        },
        {
            "id": "4283",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-animations-talk-ekb\/",
            "title": "Доклад об анимации в интерфейсе",
            "content_html": "<p>В сентябре рассказал в Екатеринбурге кое-что об анимации:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/6AmQcRI3yYY?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Фронттокс — конференция веб-разработчиков, поэтому я не рассказывал всю теорию анимации в интерфейсе, а сконцентрировался на нескольких аспектах, которые особенно важно понимать при разработке. Они про дизайн, но это то, что делают своими руками разработчики, поэтому они должны это знать.<\/p>\n<p>См. также <a href=\"https:\/\/events.yandex.ru\/lib\/talks\/3929\/\">страничку у Яндекса<\/a>.<\/p>\n",
            "summary": "В сентябре рассказал в Екатеринбурге кое-что об анимации",
            "date_published": "2016-12-20T12:01:18+02:00",
            "date_modified": "2016-12-27T15:00:04+02:00",
            "tags": [
                "анимация",
                "доклады",
                "Екатеринбург",
                "пользовательский интерфейс",
                "Яндекс"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-6AmQcRI3yYY-cover.jpg",
            "_date_published_rfc2822": "Tue, 20 Dec 2016 12:01:18 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "4283",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-6AmQcRI3yYY-cover.jpg"
                ]
            }
        },
        {
            "id": "4230",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/animaciya-v-povorotnike\/",
            "title": "Анимация в поворотнике",
            "content_html": "<p>Смотрите, как можно:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/tYJvf75-o_g?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n",
            "summary": "Смотрите, как можно",
            "date_published": "2016-10-12T09:09:28+02:00",
            "date_modified": "2016-10-11T19:10:36+02:00",
            "tags": [
                "автомобиль",
                "анимация",
                "видео",
                "дороги"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-tYJvf75-o_g-cover.jpg",
            "_date_published_rfc2822": "Wed, 12 Oct 2016 09:09:28 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "4230",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-tYJvf75-o_g-cover.jpg"
                ]
            }
        }
    ],
    "_e2_version": 4259,
    "_e2_ua_string": "Aegea 12.0a (v4259e)"
}