Blog. Just Blog

Создание анимированной иконки приложения

Версия для печати Добавить в Избранное Отправить на E-Mail 24.04.2010 | Категория: Образ мышления: Assembler | Автор: ManHunter
Очередная милая рюшечка для украшения программ - анимированная иконка. Она может быть как в заголовке окна, так и в системном трее. Кроме чисто декоративной функции анимация часто используется и в полезных целях, например, почтовая программа TheBat! таким способом оповещает, что пришло новое письмо, качалка Download Master показывает свою активность при загрузке файлов, антивирусы обозначают процесс сканирования файлов, ICQ крутит "цветочек" при подключении, ну и так далее. Реальных примеров на самом деле много.

Для всех вариантов анимации сперва надо подготовить исходный материал. Это должны быть иконки одинакового размера, представляющие собой отдельные кадры анимации. У меня это будет вращающийся смайлик. Художник из меня никудышный, поэтому я просто взял и повернул готовый смайлик нужное количество раз на 45 градусов по часовой стрелке.

Кадры для анимации
Кадры для анимации

В ресурсах иконки лучше всего описывать номерными индексами. Обратите внимание, что индексы иконок идут по порядку, так будет гораздо легче работать с ними:
Code (Assembler) : Убрать нумерацию
  1. resource group_icons,\
  2.            1,LANG_NEUTRAL,animate1,\
  3.            2,LANG_NEUTRAL,animate2,\
  4.            3,LANG_NEUTRAL,animate3,\
  5.            4,LANG_NEUTRAL,animate4,\
  6.            5,LANG_NEUTRAL,animate5,\
  7.            6,LANG_NEUTRAL,animate6,\
  8.            7,LANG_NEUTRAL,animate7,\
  9.            8,LANG_NEUTRAL,animate8
  10.  
  11. resource icons,\
  12.            1,LANG_NEUTRAL,icon_data1,\
  13.            2,LANG_NEUTRAL,icon_data2,\
  14.            3,LANG_NEUTRAL,icon_data3,\
  15.            4,LANG_NEUTRAL,icon_data4,\
  16.            5,LANG_NEUTRAL,icon_data5,\
  17.            6,LANG_NEUTRAL,icon_data6,\
  18.            7,LANG_NEUTRAL,icon_data7,\
  19.            8,LANG_NEUTRAL,icon_data8
  20.  
  21. icon animate1,icon_data1,'icon1.ico'
  22. icon animate2,icon_data2,'icon2.ico'
  23. icon animate3,icon_data3,'icon3.ico'
  24. icon animate4,icon_data4,'icon4.ico'
  25. icon animate5,icon_data5,'icon5.ico'
  26. icon animate6,icon_data6,'icon6.ico'
  27. icon animate7,icon_data7,'icon7.ico'
  28. icon animate8,icon_data8,'icon8.ico'
Теперь рассмотрим оба варианта анимированных иконок.

Первый вариант - анимация иконки в заголовке окна. Иконка в заголовок окна устанавливается и изменяется при помощи функции LoadIcon и сообщения WM_SETICON, отправляемого окну. А для смены кадров установим таймер, интервал определяется опытным путем. В моем примере установка первого кадра анимации и запуск таймера происходит на этапе инициализации окна:
Code (Assembler) : Убрать нумерацию
  1.         ; Загрузить иконку с первым кадром
  2.         invoke  LoadIcon,[hInstance],1
  3.         ; Установить иконку окна
  4.         invoke  SendMessage,[hwnddlg],WM_SETICON,ICON_BIG,eax
  5.         ; Установить таймер обновления иконки
  6.         invoke  SetTimer,[hwnddlg],1,100,NULL
  7.         ; Текущий первый кадр
  8.         mov     [nIcon],1
В вашем случае это может быть какое-нибудь другое событие, предусмотренное программой. Обработчик сообщения от таймера выглядит так:
Code (Assembler) : Убрать нумерацию
  1.         ; Увеличить номер текущего кадра
  2.         inc     [nIcon]
  3.         ; Обработали полный цикл? (в нашем случае это 8 кадров)
  4.         cmp     [nIcon],8
  5.         jbe     @f
  6.         ; Перейти к первому кадру
  7.         mov     [nIcon],1
  8.   @@:
  9.         ; Загрузить следующую иконку
  10.         invoke  LoadIcon,[hInstance],[nIcon]
  11.         ; Обновить иконку окна
  12.         invoke  SendMessage,[hwnddlg],WM_SETICON,ICON_BIG,eax
Второй вариант - анимация иконки в системном трее. Ресурсы для этого примера остаются прежними, в код инициализации добавляется создание иконки в трее:
Code (Assembler) : Убрать нумерацию
  1.         ; Загрузить иконку
  2.         invoke  LoadIcon,[hInstance],1
  3.         ; Установить иконку окна
  4.         invoke  SendMessage,[hwnddlg],WM_SETICON,ICON_BIG,eax
  5.  
  6.         ; Заполнить структуру иконки в трее
  7.         mov     [node.cbSize],sizeof.NOTIFYICONDATA
  8.         mov     eax,[hwnddlg]
  9.         mov     [node.hWnd],eax
  10.         mov     [node.uID],NULL
  11.         mov     [node.uFlags],NIF_ICON
  12.         mov     [node.uCallbackMessage],NULL
  13.         ; Загрузить первый кадр
  14.         invoke  LoadIcon, [hInstance], 1
  15.         mov     [node.hIcon],eax
  16.         ; Показать иконку в трее
  17.         invoke  Shell_NotifyIcon, NIM_ADD,node
  18.  
  19.         ; Установить таймер обновления иконки
  20.         invoke  SetTimer,[hwnddlg],1,100,NULL
  21.         ; Текущий первый кадр
  22.         mov     [nIcon],1
Подразумевается, что структура node описана в сегменте данных как NOTIFYICONDATA. Таймер остается без изменений, меняется только обработчик сообщения от него.
Code (Assembler) : Убрать нумерацию
  1.         ; Увеличить номер текущего кадра
  2.         inc     [nIcon]
  3.         ; Обработали полный цикл? (в нашем случае это 8 кадров)
  4.         cmp     [nIcon],8
  5.         jbe     @f
  6.         ; Перейти к первому кадру
  7.         mov     [nIcon],1
  8.   @@:
  9.         ; Загрузить следующую иконку
  10.         invoke  LoadIcon, [hInstance], [nIcon]
  11.         mov     [node.hIcon],eax
  12.         ; Обновить иконку в трее
  13.         invoke  Shell_NotifyIcon,NIM_MODIFY,node
Как видите, ничего сложного в анимации иконок нет, но как и в любом другом деле, здесь главное знать меру. Ничего не раздражает больше, чем программа, в которой блестит и моргает все, что только можно и нельзя. А вот красивая анимация, примененная в нужной ситуации, добавит вашим программам привлекательности.

В приложении примеры программ с исходными текстами, демонстрирующие анимированные иконки в заголовке окна и в системном трее.

Примеры программ с исходными текстами (FASM)Примеры программ с исходными текстами (FASM)

Icon.Animation.Demo.zip (21,633 bytes)


Поделиться ссылкой ВКонтакте
Просмотров: 10343 | Комментариев: 14

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Андрей (05.09.2020 в 23:50):
Ага, понял. Спасибо. Заточка кода под универсальность.
ManHunter (05.09.2020 в 23:43):
Потому что получится очень частный случай, пусть и красиво реализованный. А если иконок будет не 8, а 5 или 19?
Андрей (05.09.2020 в 23:38):
Доброго дня.
Вопрос. Почему бы цикл

        inc     [nIcon]         ; Увеличить номер текущего кадра
        cmp     [nIcon],8       ; Обработали полный цикл?
        jbe     @f              ; Перейти к первому кадру
        mov     [nIcon],1
  @@:

Не заменить на

and [nIcon],7 ; от 0 до 7
inc [nIcon]   ; +1
Михаил (26.12.2011 в 22:03):
ну спасибо тогда хоть за пример и за внимание )))
ManHunter (26.12.2011 в 21:35):
Идешь на сайт людей, которые пишут на masm и задаешь подобные вопросы там. Я на masm не пишу и разбираться с ним не собираюсь.
Михаил (26.12.2011 в 21:09):
Здравствуйте,чуток не туда написал ))) , вопросик таков , написал программу по Вашему примеру , откомпилировал в FASM работает нормально , попытался в Masm'е  не работает , я понимаю что синтаксис разный я его изменил то , но в масме нету библиотеки win32a.inc , не подскажите как решить проблему ? собственно нужно в масме создать подобную программу , которая одновременно выполняет анимацию иконки и в оглавлении программы и в панели задач и в трее.

и существует ли какойто конвертер синтаксиса fasm2masm? или можно допустим имея exe исполяемый файл  декомпилировать его  в исходный код на масме?
ManHunter (21.10.2011 в 21:14):
На сайте есть отдельная статья про иконки разных размеров
Глеб (21.10.2011 в 20:04):
Здравствуйте, вопрос немного не по теме, но всё же:
Как назначить приложению группу иконок,
что бы активная зависела от вида в проводнике
(таблица/список-16х16(ico1), значки-32х32(ico2)... ),
а то у меня одна иконка на все виды.
semiono (02.10.2010 в 22:05):
Замечал, что в приложениях ресурсы расположенны примерно так
1=ico_64x64, 2=ico_48x48, 3=ico_32x32, 4=ico_16x16.
У меня же изначально сложилась привычка разполагать в обратном порядке.
Хочу спросить, есть ли правила, или это вообще не имеет значения?
ManHunter (27.08.2010 в 00:20):
Можно наложить на иконки в проводнике свои иконки (например, так Tortoise SVN помечает файлы в проекте). Наверное, если это делать в цикле, то можно добиться некоего подобия анимации. Но для этого контролирующая программа должна постоянно висеть в памяти.
semiono (27.08.2010 в 00:14):
Возможно глупый вопрос, а возможно зделать анимацию в проводнике?
Или это уже зависит от самого explorer и прога тут нипричём?
semiono (17.08.2010 в 17:28):
24 бита помоему не поддерживаются, я как-то уже имел дело...
ManHunter (26.04.2010 в 17:49):
Ну не обязательно же делать в анимации все 8 кадров, можно поменьше. Да и цветность можно выбрать другую, не 32 бита. Так что пути сокращения размера всегда есть :)
Zummenix (26.04.2010 в 17:46):
Иконки места много занимают :), а так прикольно, пригодится.

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (30), AJAX (5), Assembler (362), COM (41), CSS (41), Exif (15), FASM (8), Firefox (7), HDD (17), Hello Teddy (9), HTML (51), iconBIT (4), JavaScript (73), MySQL (13), Nikon (19), PDF (10), PHP (122), Samsung (6), SEO (12), Sublime Text (9), TintonLife (4), UGREEN (4), Windows 7 (66), аккумуляторы (23), аксессуары (12), анализаторы файлов (8), архиваторы (6), аттракционы (7), безопасность (55), браузеры (16), бытовая техника (19), варенье (19), ВВЦ (9), ВДНХ (14), видео (20), Воробьевы горы (9), вторые блюда (125), выпечка (28), выставки (119), генератор ПСЧ (10), графика (120), десерты (31), Египет (8), заготовки на зиму (47), закуска (22), закуска к пиву (24), зарядные устройства (24), защита (15), зоопарки (10), игры (36), иконки (22), интерфейс (26), исследование защиты (316), каша (4), клавиатура (7), Коломенское (37), консоль (7), концерты (52), Кузьминки (4), куклы (27), ледяные скульптуры (6), мои программы (69), мониторы (6), музеи (78), мультимедиа (76), мясо (62), напитки (14), ноутбуки (8), обфускация (7), окна (69), оформление сайта (49), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (130), полезные функции (42), прохождения (4), процессы (25), птица (20), путешествия (25), распаковка (22), реверсинг (52), рыба (35), салаты (19), сброс триала (4), сеть (36), система (178), Сокольники (8), соусы (14), супы (14), телефоны (10), Тунис (6), умный дом (13), файлы справки (6), фаст-фуд (18), фестиваль цветов (5), флешки (5), фото (23), хеши (16), числа (8), юмор (12), яйца (19), Яндекс (11)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 35,172 раза
<< 2024 - СЕНТЯБРЬ >>
Пн Вт Ср Чт Пт Сб Вс
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            
День федерального государственного санитарно-эпидемиологического надзора
День работников леса
День свободных денег
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 360
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

   
-
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2024
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0048 сек.) / Память: 4.5 Mb
Наверх