Хардуерно ускорена CSS анимация. Градиент при задържане на курсора върху стека. Ако картината след промяната е станала някак лошо показана анимация, тогава можете да опитате да зададете различен размер

Всяка операционна система, дори и най-умната, има свои собствени, понякога значителни недостатъци. Ако те са доста критични за потребителя, можете да опитате да ги премахнете с помощта на джейлбрейк или просто да промените платформата. Но често недостатъците на операционната система се коригират чрез промяна на настройките, задаване на правилните параметри. Тук ще бъде разгледан въпросът: как да ускорите анимацията на iPhone / iPad?

Като се има предвид факта, че скоростта на анимацията се е увеличила в iOS 8, тя все още изглежда недостатъчна. За да ускорите цялата анимация и да увеличите (поне леко) скоростта на мобилна притурка, трябва да следвате тези стъпки.

Отидете на Настройки, след това на Общи, след това на Универсален достъп и след това на Намаляване на движението. Тук трябва да преместите плъзгача в активен режим.

Тези промени ще засегнат анимацията при отваряне и затваряне на приложения. Освен това те ще повлияят на отварянето на многозадачния панел. Ако по някаква причина не ви харесва новата анимация, можете да върнете старите настройки по същия начин, като преместите плъзгача в предишната му позиция.

Твърдо рестартиране

Ако забавянето на притурката не е много забележимо или се появява само периодично, трудно рестартиране на устройството ще реши проблема. Струва си да се отбележи, че подобен метод може да се използва на модели iPad, iPod touch и iPhone, които след надграждане до iOS 8 никога не са се рестартирали по този начин.

Едновременно задържаме бутоните Начало и изключване и ги задържаме, докато иконата на Apple се появи на екрана на устройството. След началото на твърдото нулиране логото ще се появи след 10-15 секунди и бутоните трябва да бъдат освободени незабавно.

Нулиране на данни и настройки

Ако забавянето все още се усеща, тогава трябва да нулирате настройките на операционната система. Това е добър ефективен начин за решаване на проблема. Въпреки това, първо трябва да направите резервно копие в iTunes или iCloud. След това настройките могат да бъдат нулирани до фабричните настройки.

1. Създаване на резервно копие.
2. Отидете в "Настройки", след това в "Общи" и изберете "Нулиране";
3. Избираме "Изтриване на настройки и съдържание".
4. Потвърждаваме действията.
5. Когато регистрирате устройство, изберете "Възстановяване от копие".

След като изпълните тези стъпки, устройството ще може да работи нормално, без да замръзва.

Здравейте, днес бих искал да разгледам анимацията в операционната система OS X. Разбира се, тя прави много приятно впечатление на всички, но когато прекарвате по-голямата част от времето пред компютъра, внушителното сгъване, отваряне става досадно.

Ще разгледаме начини да направим интерфейса възможно най-отзивчив. Някъде ще го почистим, но някъде просто ще го ускорим. Ще разгледаме и функции, които ще ви помогнат да спестите много време, без да прибягвате до ненужни действия и щраквания, за да завършите задачата.

Бих искал да отбележа веднага, не бързайте към всичко наведнъж, не се стремете да деактивирате и ускорите всичко и всички. Изберете само най-необходимото, което наистина може да помогне.

Това ще направи работата на компютъра много по-приятна и продуктивна.

Анимация на интерфейса

Анимиране на нов прозорец

Приберете:

по подразбиране пише NSGlobalDomain NSAutomaticWindowAnimationsEnabled -bool НЕ

ускоряване:

по подразбиране пише NSGlobalDomain NSAutomaticWindowAnimationsEnabled -float 0.1

Отмяна на промените:

по подразбиране пише NSGlobalDomain NSAutomaticWindowAnimationsEnabled -bool ДА

Ускорете анимацията за контрол на мисията

Приберете:

по подразбиране напишете com.apple.dock expose-animation-duration -int 0; killall док

ускоряване:

по подразбиране пише com.apple.dock expose-animation-duration -float 0.05; killall док

Отмяна на промените:

по подразбиране delete com.apple.dock expose-animation-duration; killall док

Ускорете анимацията на LaunchPad

ускоряване:

по подразбиране напишете com.apple.dock springboard-show-duration -float 0.1; killall док
по подразбиране напишете com.apple.dock springboard-hide-duration -float 0.1; killall док
по подразбиране напишете com.apple.dock springboard-page-duration -float 0,25; killall док

Приберете:

по подразбиране напишете com.apple.dock springboard-show-duration -int 0
по подразбиране напишете com.apple.dock springboard-hide-duration -int 0
по подразбиране напишете com.apple.dock трамплин-продължителност на страницата -int 0

Отмяна на промените:

по подразбиране изтрийте com.apple.dock springboard-show-duration
по подразбиране delete com.apple.dock springboard-hide-duration

Деактивирайте анимацията при отваряне и затваряне на прозорци

по подразбиране пише NSGlobalDomain NSAutomaticWindowAnimationsEnabled -bool false

Деактивирайте анимацията за отваряне на панела за бърз преглед

по подразбиране write -g QLPanelAnimationDuration -float 0

Премахване на забавяния при възпроизвеждане при преоразмеряване на прозорците на плейъра

по подразбиране пише NSGlobalDomain NSWindowResizeTime -float 0.001

Деактивирайте анимацията за отваряне на прозореца с информация в Finder

по подразбиране пише com.apple.finder DisableAllAnimations -bool true

Деактивирайте анимацията при отваряне на приложения от докинг станцията

по подразбиране напишете com.apple.dock launchanim -bool false

Ускорете анимациите за контрол на мисията

по подразбиране пише com.apple.dock expose-animation-duration -float 0.1

Премахване на закъснението при отваряне на докинг станцията

по подразбиране пише com.apple.Dock autohide-delay -float 0

поща

Деактивирайте анимацията за изпращане на имейли и отговори

по подразбиране пише com.apple.mail DisableReplyAnimations -bool true
по подразбиране напишете com.apple.mail DisableSendAnimations -bool true

сафари

Деактивирайте забавянето на изобразяването на страницата

по подразбиране пише com.apple.Safari WebKitInitialTimedLayoutDelay 0.25

Ускорете бързите клавиши

по подразбиране пишат NSGlobalDomain KeyRepeat -int 0

Продължаваме да разглеждаме полезни функции, скрити от потребителите ...

Finder

Промяна на заглавията в страничното меню

cp /System/Library/CoreServices/Finder.app/Contents/Resources/English.lproj/LocalizableCore.strings ~
Отворете файла LocalizableCore.strings и намерете SD5. Променете редовете както желаете и не забравяйте да запазите промените си. След това въведете командата:

sudo cp ~ / LocalizableCore.strings /System/Library/CoreServices/Finder.app/Contents/Resources/English.lproj/; killall търсач

Анимация Finder

Разрешаване: по подразбиране пише com.apple.finder DisableAllAnimations -bool ДА; killall търсач
Деактивиране: по подразбиране изтриване на com.apple.finder DisableAllAnimations; killall търсач

Елемент Finder

Разрешаване: по подразбиране напишете com.apple.finder QuitMenuItem -bool ДА; killall търсач
Деактивиране: по подразбиране изтриване на com.apple.finder QuitMenuItem; killall търсач

Finder Grid Snap анимация

Активиране: по подразбиране изтриване com.apple.Finder AnimateSnapToGrid; killall търсач
Деактивиране: по подразбиране пише com.apple.Finder AnimateSnapToGrid -bool NO; killall търсач

Добавяне на командата Изрязване към контекстното меню на Finder

Разрешаване: по подразбиране пише com.apple.finder AllowCutForItems 1; killall търсач

Показване на скрити файлове и папки

Активиране: по подразбиране напишете com.apple.Finder AppleShowAllFiles 1 && killall Finder
Деактивиране: по подразбиране пише com.apple.Finder AppleShowAllFiles 0 && killall Finder

Промяна на показването на папки в Quick Look (показване на съдържанието на папка)

Активиране: killall finder; по подразбиране напишете com.apple.finder QLEnableXRayFolders 1
Деактивиране: killall finder; по подразбиране напишете com.apple.finder QLEnableXRayFolders 0

Бутони за превъртане на прозореца

И двете вляво: по подразбиране пише -g AppleScrollBarVariant -string DoubleMin; killall търсач
И двете отдясно: по подразбиране пише -g AppleScrollBarVariant -string DoubleMax; killall търсач
И двете от всяка страна: по подразбиране пише -g AppleScrollBarVariant -string DoubleBoth; killall търсач
По един от всяка страна: по подразбиране пише -g AppleScrollBarVariant -string Single; killall търсач

Скриване на всички файлове в определена папка

Активиране: chflags hidden ~ / Desktop / *
Деактивиране: chflags nohidden ~ / Desktop / *
Вместо Desktop може да се използва всяка папка.

Докинг

Градиент при задържане на курсора върху стека

Разрешаване: по подразбиране пише com.apple.dock mouse-over-hilte-stack -boolean ДА; killall док
Деактивиране: по подразбиране пише com.apple.dock mouse-over-hilte-stack -boolean NO; killall док
P.S. Препоръчвам, страхотно! 😮

2D док

Активиране: по подразбиране напишете com.apple.dock no-glass -boolean ДА; killall док

3D докинг

Разрешаване: по подразбиране пише com.apple.dock no-glass -boolean NO; killall док

Стек с последните стартирани приложения

Включва: по подразбиране пише com.apple.dock persistent-others -array-add ‘(“ tile-data ”= (“ list-type ”= 1;);“ tile-type ”=“ recents-tile ”;)’; killall док

Ефекти при минимизиране на прозорци в Dock

Gene: по подразбиране пише com.apple.Dock mineffect genie; killall док
Мащабиране: по подразбиране напишете com.apple.Dock скала на минеффекта; killall док
Всмукване: по подразбиране напишете com.apple.Dock минефект смучене; killall док
Стандартен ефект: по подразбиране изтриване на минефект com.apple.Dock; killall док

Подравняване на дока

Отляво: по подразбиране пише com.apple.dock закрепване -string start; killall док
Вдясно: по подразбиране пише com.apple.dock pinning -string end; killall док
Средно (по подразбиране): по подразбиране изтриване на com.apple.dock закрепване; killall док

Докинг кошчето

Показване на празна количка: по подразбиране напишете com.apple.dock trash-full -bool NO; killall док
Показване на пълната кошница: по подразбиране напишете com.apple.dock trash-full -bool ДА; killall док

Добавяне на Spacer към Dock

Активиране: по подразбиране пише com.apple.dock persistent-apps -array-add ‘(“ tile-type ”=“ spacer-tile ”;)’; killall док
Деактивиране: изхвърлете го от Dock с мишката 🙂

Променете показването на стекове в Dock (сплитер)

Разрешаване: по подразбиране напишете com.apple.dock use-new-list-stack -bool ДА; killall док
Деактивиране: по подразбиране пише com.apple.dock use-new-list-stack -bool NO; killall док

сафари

Favicons в отметките на Safari

Включете: копирайте оригиналния файл WebpageIcons.db в ~ ▸ Библиотеки ▸ Safari
Изключете: killall Safari; cd ~ / Библиотека / Safari rm WebpageIcons.db ln -s / dev / null WebpageIcons.db

Автоматично отваряне на изтегляния в Safari

Активиране: по подразбиране напишете com.apple.Safari AutoOpenSafeDownloads -bool НЕ
Деактивиране: по подразбиране пише com.apple.Safari AutoOpenSafeDownloads -bool ДА
По подразбиране: по подразбиране изтриване на com.apple.Safari AutoOpenSafeDownloads

Панел с раздели в Safari

Винаги показвай: по подразбиране пише com.apple.Safari AlwaysShowTabBar -bool ДА
Скриване: по подразбиране напишете com.apple.Safari AlwaysShowTabBar -bool НЕ
По подразбиране: по подразбиране изтриване на com.apple.Safari AlwaysShowTabBar
P.S. Рестартирайте Safari, за да видите ефекта.

Изглаждане на шрифтове в Safari

Силно: по подразбиране пише com.apple.Safari AppleAntiAliasingThreshold -int 8 по подразбиране пише com.apple.Safari AppleSmoothFontsSizeThreshold -int 8
Слаб: по подразбиране пише com.apple.Safari AppleAntiAliasingThreshold -int 2 по подразбиране пише com.apple.Safari AppleSmoothFontsSizeThreshold -int 2
По подразбиране: изтриване на com.apple.Safari AppleAntiAliasingThreshold по подразбиране изтриване на com.apple.Safari AppleSmoothFontsSizeThreshold

Увеличете скоростта на зареждане на страницата в Safari

Активиране: по подразбиране пише com.apple.Safari WebKitInitialTimedLayoutDelay -float 0.25
Деактивиране: по подразбиране пише com.apple.Safari WebKitInitialTimedLayoutDelay -float 1

Отваряне на връзки в раздели:

Активиране: по подразбиране пише com.apple.Safari TargetedClicksCreateTabs -bool true
Деактивиране: по подразбиране пише com.apple.Safari TargetedClicksCreateTabs -bool false

работен плот

Скрийнсейвър като фон на работния плот:

Включете: /System/Library/Frameworks/ScreenSaver.framework/Resources/ScreenSaverEngine.app/Contents/MacOS/ScreenSaverEngine -background &
Деактивиране: След като активирате това, идентификаторът на процеса ще се появи в терминала. Например 872, тук 872 е идентификационният номер на процеса. За да изключите, въведете, като замените своя идентификатор на процеса: убийте PID 872

Премахнете иконите от работния плот:

Активиране: по подразбиране напишете com.apple.finder CreateDesktop -bool false; killall търсач
Деактивиране: по подразбиране пише com.apple.finder CreateDesktop -bool true; killall търсач

Уиджети на работния плот:

Активиране: по подразбиране напишете com.apple.dashboard devmode ДА; killall док
Деактивиране: по подразбиране пише com.apple.dashboard devmode НЕ; killall док

iTunes

Разрешаване: по подразбиране напишете com.apple.iTunes позволете-половин звезди -bool true
Деактивиране: по подразбиране напишете com.apple.iTunes позволете-половин звезди -bool false

Премахнете стрелките от iTunes плейлиста:

Активиране: по подразбиране пише com.apple.iTunes show-store-arrow-links -bool false
Деактивиране: по подразбиране пише com.apple.iTunes show-store-arrow-links -bool true

Екранна снимка

Сянка около екранната снимка:

Активиране: по подразбиране пише com.apple.screencapture disable-shadow -bool true
Деактивиране: по подразбиране пише com.apple.screencapture disable-shadow -bool false

Тип файл за екранна снимка:

Въведете: по подразбиране напишете com.apple.screencapture тип png; killall SystemUIServer
P.S. Вместо png можете да използвате: bmp, gif, jpeg, pdf, pict, psd, tga, tiff, sgi.

Местоположение на екранна снимка

Въведете: по подразбиране напишете com.apple.screencapture местоположение ~ / Снимки; killall SystemUIServer
P.S. Вместо Картини може да се използва всяка папка.

Exposé

Бутон за активиране на Exposé:

Разрешаване: по подразбиране напишете com.apple.dock wvous-floater -bool ДА; killall док
Деактивиране: по подразбиране пише com.apple.dock wvous-floater -bool НЕ; killall док
P.S. В горния десен ъгъл на екрана ще се покаже кръгъл син бутон. Щракването върху бутона има същия ефект като F10 (показване на прозорците на активната програма). ⌥ + щракване има същия ефект като F9 (показване на всички прозорци).

Exposé бутон за изключване

Активиране: по подразбиране напишете com.appe.dock wvous-showcorners -bool ДА; killall док
Деактивиране: по подразбиране напишете com.appe.dock wvous-showcorners -bool NO; killall док
P.S. В горния ляв ъгъл на екрана се показва полукръг прозрачен бутон. Щракването върху него изключва текущото работещо Exposé. Нищо не се случва, ако Exposé не работи.

Други ощипвания

⌥ + щракнете, за да преместите курсора в терминала

Активиране: по подразбиране напишете com.apple.Terminal OptionClickToMoveCursor -bool ДА
Деактивиране: по подразбиране изтрийте com.apple.Terminal OptionClickToMoveCursor

Меню за отстраняване на грешки в адресната книга

Активиране: по подразбиране напишете com.apple.addressbook ABShowDebugMenu -bool ДА
Деактивиране: по подразбиране изтриване на com.apple.addressbook ABShowDebugMenu

Доклади за грешки

Активиране: по подразбиране записва com.apple.CrashReporter DialogType доклад за срив
Деактивиране: по подразбиране пише com.apple.CrashReporter DialogType няма

Лента с менюта

Бяло непрозрачно: sudo по подразбиране пише /System/Library/LaunchDaemons/com.apple.WindowServer ‘EnvironmentVariables’ -dict ‘CI_NO_BACKGROUND_IMAGE’ 1
Сиво: sudo по подразбиране пише /System/Library/LaunchDaemons/com.apple.WindowServer ‘EnvironmentVariables’ -dict ‘CI_NO_BACKGROUND_IMAGE’ 0
Полупрозрачен: sudo по подразбиране изтриване /System/Library/LaunchDaemons/com.apple.WindowServer 'EnvironmentVariables'

Ако не сте намерили това, което търсите, можете да разгледате нашата статия.

Включване и изключване на скритите настройки с TinkerTool

Сега нека разгледаме как промените, които могат да бъдат активирани с помощта на терминала, но с помощта на програмата TinkerTool... Безплатно сваляне TinkerToolот официалния сайт можете. Нека разгледаме по-отблизо възможностите на TinkerTool:

Настройване на скрити функции в Finder:

• Показване на скрити и системни файлове (помага при намирането на необходимите файлове и в папката S / L / E)
• Деактивирайте звуковите ефекти (деактивира звуковите ефекти при копиране и изтриване на файлове)
• Деактивирайте свойствата на работния плот
• Добавете командата "Finish" към менюто Finder (добавянето на линия Finish е удобно, но използвам клавишната комбинация "CMD + W")
• Покажете избрания път в заглавието на прозореца (удобно, когато трябва постоянно да работите с огромен брой прозорци на Finder едновременно)
• Анимационни ефекти (деактивирането на анимационните ефекти ще помогне за ускоряване на производителността на Mac OS X)
• Достъп до мрежата (позволява ви да забраните създаването на .DS_Store, полезно, ако свързвате мрежови устройства от Windows, тъй като няма да създаваме боклуци под формата на .DS_Store файлове)
• Забрани на Finder (помага ви да премахнете ненужните елементи от менюто Finder, за да изглежда по-лесно)

За да кандидатствате, щракнете върху бутона „Рестартиране на Finder“.

Конфигуриране на скрити функции в Dock:

• Избледнели икони - за скрити приложения (Ускорява работата, помага за по-малко разсейване от ненужни приложения и програми)
• Деактивирайте анимацията при показване или скриване на Dock (ускорява Mac OS X и намалява натоварването на GPU и CPU)
• Деактивирайте забавянето при показване на скрит Dock (ускорява Mac OS X и намалява натоварването на GPU и CPU)
• Не позволявайте ръчно преоразмеряване
• Не позволявайте промяна на съдържанието (не позволява добавяне на ненужни програми)
• Купчини (включете и изключете осветлението, добавете купчини от скорошни елементи)
• Режим на единична програма (премахва ненужните прозорци от програмите)
• Launchpad Деактивирайте ефекта при отваряне и затваряне (ускорява Mac OS X и намалява натоварването на GPU и CPU)
• Launchpad Деактивирайте анимацията при превключване между страници (ускорява Mac OS X и намалява натоварването на GPU и CPU)

За да приложите, натиснете бутона "Рестартиране на Dock".

Конфигуриране на скрити функции като цяло:

• Поддържа автоматично възпроизвеждане
• Задръжте натиснат клавиша, за да изберете диакритични знаци (например, ако задържите бутона "E", можете да получите буквата "E", много често започвайки да използвате Mac OS X, те питат как да получите буквата E, така че сега ще разбереш отговора на въпроса си)
• Настройки за превъртане (колело на мишката или таблети), възможно е да деактивирате инерцията на превъртане
• Бутон за захранване (режим на работа на този бутон)
• Форматът на екранните снимки и техните точни настройки, както и местоположението за запис (включване и изключване на сянката, включване или изключване на времето за снимане, посочете папката за запазване на екранни снимки (екранни снимки)
• Настройки на документа (ускоряване на анимацията и възможност за активиране на разширен изглед на прозореца за запазване при работа с нови програми)
• Настройки на прозореца (включване и изключване на анимациите, увеличаване на зоната за увеличение около ъглите.
• Задаване на елементи в менюто Последни
• Настройка за плъзгане и пускане на текст в програми за какао (родна обектно-ориентирана програмна среда в Mac OS X)
• Задаване на закъснение преди показване на помощни тагове
• Настройки на честотата на мигане на входния курсор

Конфигуриране на скрити функции на работния плот:

• Външен вид (добавя възможност за създаване на тъмна тема за лентата с менюта и Dock с помощта на клавишна комбинация)
• Фон (показване на пътя до изображението, което в момента се използва за фона на работния плот)
• Помощен център
• Ако програмата се срине (конфигурирайте действието, ако програмата се срине, например, ако програмите постоянно се сриват (срива), тогава можете да отмените Не показвай нищо)
• Изключения
• Табло за управление (опция за деактивиране на таблото)

Конфигуриране на скрити функции във вградени програми:

• Контакти (активиране на деактивиране на диагностичното меню)
• Терминал (автоматично активиране на прозорци при задържане на курсора)
• App Store (активиране, деактивиране на менюто за отстраняване на грешки)
• Настройка на контрола на мисията
• Предотвратете автоматичното прекратяване на неактивни програми на OS X

За да приложите настройките, трябва да рестартирате компютъра.

Настройване на скрити функции в шрифтове:

• Размер на шрифта на програмите в Mac OS X
• Системни размери на шрифта в Mac OS X
• Размер на шрифта на съобщенията в Mac OS X
• Размер на шрифта на етикетите в Mac OS X
• Размер на шрифта за помощни маркери в Mac OS X
• Размери на шрифта на заглавието на прозореца в Mac OS X
• Размерът на шрифта на заглавията на прозореца на помощната програма в Mac OS X

Възможно е да видите визуализацията и да възстановите стойностите по подразбиране.

За да приложите настройките, трябва да рестартирате програмите, засегнати от настройките.

Настройване на скрити функции в Safari:

Настройка на скрити функции в iTunes:

Трябва да рестартирате iTunes, за да приложите настройките.

Настройка на скрити функции в QuickTime X:

Възможност за активиране на автоматично възпроизвеждане при отваряне на файл в QuickTime X.

Трябва да рестартирате QuickTime X, за да приложите настройките.

Има и нулиране на настройките до състоянието преди използването на TinkerTool или нулиране на стойностите по подразбиране.

Не трябва да се опитвате да изключите всичко - това няма да донесе никакво удовлетворение. Деактивирайте и ускорете само най-важното. Не докосвайте функциите, които рядко използвате.

При създаването на статията са използвани следните материали:lifehacker.ru, www.cmd-help.ru, macdays.ru

От автора:През последните няколко години чухме много за хардуерното ускорение и как можем да го използваме за подобряване на анимацията на уеб страниците. С помощта на ускорение анимацията става гладка дори в мобилни браузъри. Но мисля, че има много неопитни разработчици, които не разбират как работи хардуерното ускорение и как можем да го използваме, за да накараме нашите анимации да блестят.

Самият термин звучи като нещо изключително сложно, близко до висшата математика. В тази статия ще хвърля малко светлина върху тази тема и ще демонстрирам как да приложите тази техника във вашите front-end проекти.

Защо трябва да ми пука?

Нека разгледаме прост пример за анимация на няколко топки, разположени една върху друга (ост Z, за нас те изглеждат като една топка). От нас се изисква да накараме тази група топки да се движи. Най-лесният начин е да промените стойностите на левите и горните свойства. Това може да стане чрез JS, но ще използваме CSS3 анимации. Моля, имайте предвид, че аз не пиша префикси на доставчик за себе си, но ще трябва да използвате нещо като Autoprefixer за пълна поддръжка:

Бягане с топка (анимация: обикаляне 4s безкрайно;) @keyframes бягане (0%: (отгоре: 0; отляво: 0;) 25% (отгоре: 0; отляво: 200px;) 50% (отгоре: 200px ; вляво: 200px;) 75% (отгоре: 200px; вляво: 0;))

По-долу е демонстрация, анимацията се задейства от бутон чрез JS:

Ако щракнете върху бутона "Стартиране на анимацията", ще забележите, че анимацията не е толкова гладка, дори и в настолен браузър. И ако отворите демонстрацията в мобилен браузър, анимацията ще бъде далеч от 60 кадъра в секунда. За да коригираме това, ще използваме CSS трансформации и по-специално функцията translate (). Нека заменим горната и лявата анимация с тази функция.

Бягане с топка (анимация: обикаляне 4s безкрайно;) @keyframes обикаляне (0%: (трансформиране: превеждане (0, 0);) 25% (трансформиране: превеждане (200px, 0);) 50% (трансформиране : превод (200px, 200px);) 75% (трансформиране: превод (0, 200px);))

Демо за кода по-горе:

Сега анимацията изглежда гладка. Глоба! И така, каква е разликата, защо този начин е толкова по-добър? Това е така, защото CSS трансформациите не преначертават обекта, за разлика от анимирането на левите и горните свойства. Нека стартираме Chrome и отидем в раздела Timeline в панела за програмисти. Нека разгледаме графиката, докато анимацията работи:

Когато анимирате левите и горните свойства, виждаме зелени ленти в цялата анимация. Прерисуването е доста трудоемка операция. Честотата на кадрите е под 60 кадъра в секунда, което е точно това, към което се стремим. Сега нека да разгледаме раздела Timeline, когато анимирате с CSS трансформации:

Както можете да видите, изобщо няма зелени колони. Има и друг начин да проследите процеса на преначертаване в панела за разработчици на Chrome, като използвате опцията „Активиране на мигането на боя“. За да активирате тази опция, отворете панела за разработчици, натиснете клавиша ESC, отидете на раздела „Изобразяване“. Ако тази опция е активирана, тогава при преначертаване на обекта над него ще се появи зелен правоъгълник. В примера с горния и ляво, зелен правоъгълник ще се появи в цялата анимация:

И в случай на CSS трансформации, зеленият правоъгълник се появява само на първия и последния кадър. И така, как примерът за CSS трансформация премества обекта, без да го прерисува? CSS трансформациите работят директно с паметта на GPU, която използва хардуерно ускорение, като същевременно избягва софтуерно изобразяване. Нека разгледаме по-отблизо процеса.

Как работи хардуерното ускорение

Когато браузърът получи маркирането за страницата, той я анализира, за да изгради DOM. DOM и CSS позволяват на браузъра да изгради дърво за изобразяване. Това дърво се състои от обекти за изобразяване - елементи, които се виждат на страницата. Всеки обект е присвоен на графичен слой и всеки слой се зарежда в графичния процесор като текстура. Както в случая с 3D графиката, графичният слой в графичния процесор може да бъде трансформиран. Всички трансформации се извършват с помощта на отделен слой composer. За повече информация относно състава на слоевете в Chrome вижте връзката.

Нашият пример за CSS трансформация създава отделен композитен слой, който може да бъде модифициран директно в графичния процесор. Като активирате опцията „Показване на границите на слоя“ в панела за разработчици на Chrome, можете да видите съставните слоеве. Всеки композитен слой е маркиран с оранжева рамка. В нашия пример за CSS трансформация, всяко движение на топката е отделен композитен слой:

Сега може би се питате: Кога браузърът създава тези отделни съставни слоеве? Това се прави в следните случаи:

3D или перспективни трансформации (както в нашия пример)

Когато използвате маркери за видео и платно

Когато използвате CSS филтри

Ако елемент се припокрива с друг, поставен върху композитния слой (т.е. z-индекс)

Можете да кажете „Спри, това е 2D трансформация, а не 3D трансформация“. И ще бъдеш прав. Ето защо в нашия пример има два момента на пребоядисване на обекта, в началото и в края на анимацията.

Разликата между 3D и 2D трансформациите е, че по време на 3D анимация браузърът трябва да създаде съставни слоеве предварително, а с 2D трансформациите го прави в движение. В началото на анимацията се създава нов композитен слой и текстурата се зарежда в графичния процесор, което причинява преначертаване. След това самата анимация се извършва с помощта на композитора на слоя в графичния процесор. След завършване на анимацията допълнителният композитен слой се отстранява, което води до друга операция за преначертаване.

Поддържани свойства на графичния процесор

Не всички промени в свойствата на CSS могат да бъдат обработени директно през графичния процесор. Поддържани свойства:

За да осигурите гладко и най-добро качество на анимацията, трябва да опитате да използвате тези удобни за GPU свойства.

Принудително изобразяване на елементи в графичния процесор

В някои случаи може да се наложи да изобразите елементи в графичния процесор дори преди да започне анимацията. Този подход ще помогне да се избегне първото преначертаване при създаване на нов композитен слой. В такива случаи може да ни помогне така нареченият „трансформен хак“.

Пример1 (трансформиране: преобразуванеZ (0);) .пример2 (трансформиране: завъртане Z (360 градуса);)

Този код казва на браузъра, че искаме да извършим 3D трансформация. Браузърът създава композитен слой предварително и го премества в графичния процесор, като по този начин задейства хардуерно ускорение.

Този метод може да бъде полезен, ако изобразяването на обект е твърде скъпо, защото зад него има друг обект. Нека се върнем към първия пример и да го променим малко. Нека премахнем допълнителните топки и оставим само една, добавете контейнер. Нека дадем на контейнера фоново изображение, замъглено с помощта на CSS филтри. Топката все още е анимирана с лявата и горната част.

И отново топката се движи на прекъсвания. Поради замъглен фон, всяка операция на преначертаване намалява производителността. Сега нека добавим хак за трансформиране към контейнера.

Резултатът вече е по-добър, анимацията е доста гладка. Защо? Работата е там, че замъгленият "тежък" фон е хвърлен в отделен композитен слой, сега преначертаването на топката на всеки кадър не натоварва паметта толкова много.

Прилагайте хардуерно ускорение внимателно

Безплатно сирене само в капан за мишки. Има няколко проблема, свързани с хардуерното ускорение.

Памет

Най-големият проблем е паметта. Зареждането на твърде много текстури може да причини проблеми с паметта. На мобилни устройства това е много критично и дори може да доведе до срив на мобилния браузър. Бъдете наясно с последствията и не прилагайте хардуерно ускорение към всички обекти на страницата.

Изобразяване на шрифтове

Изобразяването на графичния процесор засяга анти-алиасинга на шрифта. Това е така, защото GPU и CPU имат различни механизми за изобразяване. Тези. ако деактивирате хардуерното ускорение в края на анимацията, текстът ще бъде замъглен през цялата анимация. За по-задълбочен поглед върху проблемите с изобразяването на шрифта, вижте статията на Кийт Кларк.

Скоро

Създаването на отделни композитни слоеве с хака за трансформиране налага някои ограничения. Разбира се, браузърите трябва да могат да опростят този процес. Именно поради тази причина наскоро беше въведена спецификацията на собствеността за промяна на волята.

Трябва да разберете как да принудително изобразявате обект в графичния процесор, като използвате хака за трансформиране.

Ако сте използвали тези съвети преди или имате какво да кажете, пишете в коментарите.

Cheat Engineе програма, предназначена да "модифицира" игри и приложения, работещи под операционната система Windows. От името на тази програма става ясно, че тя е предназначена за писане на различни чит кодове. Програма Cheat Engineза дълго време се утвърди като добър инструмент за създаване на обучители, мами и хакове.

Можем да кажем, че на теория тази програма се използва само за игра за един играч, но на практика се оказва, че Cheat Engineможе да се използва за онлайн Flashигри, както и за програми под Windows OS. Между другото, тази програма стана известна от онлайн игрите. те са по-популярни от обикновените.

Функционалността на тази програма ви позволява да сканирате данните за играта/процеса в момента в RAM и да редактирате различни стойности.

В програмата има и функция Speed ​​Hack, което служи за ускоряване на работата на всеки отворен процес в момента. Това е точно функцията, от която се нуждаете, за да ускорите браузъра си.

В тази програма има и други функции. Например: дебъгер на игри, асемблер, дизассемблер, генератор за обучение, манипулатор Директно 3Dи т.н.

В тази статия ще разгледаме използването на функцията Speed ​​Hackза програми на трети страни, а именно браузъра.

В такъв случай Опера.

Инсталиране на програмата

И така, първо, нека изтеглим програмата Cheat Engineот официалния сайт, програмата е напълно безплатна.

За да изтеглите, кликнете върху надписа " Изтеглете Cheat Engine".

След като изтеглите програмата, деактивирайте антивирусна... Едва след това трябва да продължите с инсталацията Cheat Engine.

Ние избираме " приемам споразумението„където се съгласявате с лицензионното споразумение за софтуер.

Щракнете върху бутона " Следващия".

Изберете директорията за инсталиране на програмата, като щракнете върху " Прегледайте... ". И натиснете отново" Следващия".

Можете да поставите отметка в квадратчето " Не създавайте папка в менюто "Старт"."ако не искате тази програма да се показва в менюто "Старт" в списъка с инсталирани програми. Натиснете отново" Следващия".

В полето" Създай икона на десктопа„отметнете квадратчето, ако искате Пряк път на Cheat Engineсе показва на работния плот. щракнете върху " Следващия".

По време на инсталацията Cheat EngineОсвен това ще бъдете подканени да инсталирате редица други полезни програми - " Хамстер Безплатен Zip архиватор" и " TuneUp Utilities". Инсталирането им зависи от вас. След това щракнете" Инсталирай".

Използване на програмата Cheat Engine

Настройка на програмата

След инсталирането стартирайте програмата Cheat Engineи кликнете върху иконата с монитора, която се намира в горния десен ъгъл на прозореца на програмата. От списъка с процеси " Списък с процеси"в момента в RAM, изберете процеса с името на вашия браузър. В този случай браузърът Опера... Кликнете върху него 2 пъти или щракнете върху " Отвори".

Следващ в полето " Активирайте speedhack„поставете отметка в квадратчето. И по-долу с помощта на плъзгача регулираме скоростта, с която нашата браузъркакто и всички работещи в него приложения, например Flash.

Всичко е готово!

Скоростта ще бъде регулирана в почти всички Flashигри, работещи в този браузър чрез Cheat Engineс изключение на някои онлайн Flashигри, при които скоростта на играта се задава от сървъра.

Администриране на сайта сайтизказва благодарност за статията към автора Sharkyyy3.

Предлагам ви да използвате онлайн редактор, наречен " Ezgif.com", където можете не само да промените размера на анимираните изображения, но и да ги оптимизирате, т.е. да намалите теглото им.

Дори с помощта на този онлайн редактор можете да преправите много банери от интернет по ваша преценка и не е нужно да работите върху дизайна. Просто напишете своя текст и банерът е готов.

отиваме тук

Инструменти за онлайн редактор "Ezgif.com"

За бързо редактиране на GIF изображения е по-добре да използвате онлайн редактор, отколкото Photoshop. В крайна сметка много хора нямат представа как да работят с Photoshop, но тук можете да редактирате всяко GIF изображение за броени минути

Онлайн редакторът изглежда така:

Редактор "Ezgif.com" за редактиране на анимирани GIF снимки

Разбира се, той не достига до функционалността на Photoshop, но разполага с всички необходими инструменти за редактиране на GIF изображения.

Функции на онлайн редактора:

1. Изрязване на изображение

2. Промяна на размера

3. Оптимизация на изображението

4. Добавяне на ефекти

5. Промяна на скоростта на анимацията

6. Разглобяване на анимация на кадри (фрагменти)

7. Добавяне на текст

8. Наслоете друго изображение

Изглежда, че изглежда като обикновен редактор, но колко мощен.

Нека сега да разгледаме всички изброени инструменти поотделно.

Реколта:прост онлайн инструмент за изрязване на анимационни снимки.

Качете снимка и след това използвайте мишката, за да изберете желаната част от изображението, която искате да изрежете. Щракнете и след това " Изрежете го„И сте готови.

След като качите изображение, под това изображение се появява информация за него: размер в KB, размери на изображението и колко кадъра съдържа.

Когато изрязвате снимка, можете да зададете размера ръчно. За да направите това, под изображението, от което се нуждаете, в полетата " Наляво», « Горна част», « широчина" и " Височина»Въведете желаните стойности.

Преоразмеряване:с този инструмент можете да преоразмерите картината или да я изрежете. След като се намали, картината остава със същото качество и скоростта на анимацията не се променя.

В полетата" Нова ширина" и " Нова височина„Трябва да зададете нов размер на изображението или можете просто да посочите процента и след това щракнете върху“ Преоразмерете го!". Картината ще бъде намалена с процента, който сте посочили

С този инструмент можете бързо и лесно да преоразмерявате GIF изображения. Когато увеличите размера на картината, качеството ще се загуби.

Ако картината след промяната е станала някак лошо показана анимация, тогава можете да опитате да зададете различен размер

Оптимизиране:и с този инструмент можете да промените размера (теглото) на GIF файла. Теглото на картината става по-малко чрез намаляване на броя на цветовете във всеки кадър. Всяка GIF рамка съдържа до 256 уникални цвята, но ако намалите количеството цвят, можете да постигнете по-малък размер на файла.

Оптимизацията има много методи, но можете да изберете най-добрия вариант, за да запазите качеството на картината добро. Прочетете повече за оптимизацията на сайта.

Ефекти (ефекти, промяна на цвета на изображението):с този инструмент можете да обърнете изображението хоризонтално и вертикално.

Също така изображението може да се завърти под определен ъгъл, ако посочите степента в полето " Завъртете". Можете да зададете различен цвят на изображението, да го направите черно-бяло или да му придадете някакъв друг нюанс.

Скорост (променете скоростта на GIF анимацията):този инструмент е за промяна на скоростта на анимацията.

Ако искате да промените скоростта на анимацията пропорционално на текущата, тогава използвайте процента " % от текущата скорост", И за да зададете закъснението между кадрите, трябва да използвате" ". параметър " стотни от секундата между кадрите„Задава времето на забавяне между кадрите в стотни от секундите (1/100)

Разделяне (разбиране на GIF изображение в рамки): ehТози инструмент е предназначен да преобразува анимирани GIF изображения в отделни рамки, след което всеки кадър може да се редактира отделно.

Всички кадри на анимираната картина могат да бъдат изтеглени на компютър. За да направите това, щракнете с десния бутон върху рамката и след това изберете „ запазване на изображението като...". Също така, всички рамки могат да бъдат изтеглени в един zip-архив, като щракнете върху „ Изтеглете рамки като ZIP»

Напишете (добавете текст): ъъъТози инструмент ви позволява да добавяте текст към GIF анимация. Можете да добавите текст към цялото GIF изображение или към отделните му рамки. Текстът на снимката може да се мести с мишката.

Наслояване (наслагване на друго изображение):Този инструмент ви позволява да наслагвате друго изображение върху GIF изображение и е желателно то да е във формат PNG или GIF.