В течение долгого времени, будь то веб-приложение или приложение для iOS или Android, различные технологии появлялись бесконечным потоком, чтобы улучшить воспринимаемый пользователем опыт ожидания загрузки приложения. Среди них наиболее заметными являются диаграмма хризантемы и производные от нее различные анимации загрузки.
Нам не нужно много говорить о хризантемой диаграмме. Теперь есть лучший способ для нагрузочного опыта дизайна, чем опыт загрузки хризантемы, то есть загрузка экрана скелета, которую каждый часто видит, который называется экраном скелета на китайском Отказ
Так называемая загрузка скелетного экрана означает, что до того, как страница будет полностью отрисована, пользователь увидит стиль заполнителя, описывающий общий фрейм текущей страницы.После завершения загрузки каждый заполнитель на финальном скелетном экране будет реальным. Замена данных. Во многих проектах есть связанные приложения, такие как версия Ele.me h5, Zhihu, facebook и другие веб-сайты. Эффект показан на следующем рисунке:
iOS
Существует множество сторонних библиотек для iOS для реализации эффектов скелета.Конечно, вы можете создать его самостоятельно.Основой скелетного экрана является анимация заполнителя и атрибутов. Что касается реализации, в этой статье представлены несколько основных методов реализации:
SkeletonView
Принцип реализации
Расширьте UIView и добавьте такие атрибуты, как каркасный и скелетный слой. Вызовите метод showSkeleton, перейдите к представлению, для которого атрибут каркасный имеет значение true, найдите его самое верхнее подпредставление со скелетонируемым, истинным, а затем создайте скелетный слой и добавьте его к нему, чтобы сформировать скелетную диаграмму Динамический эффект также находится в слое скелетного слоя. Когда вам нужно скрыть эффект, вызовите hideSkeleton, а также пройдитесь, чтобы удалить SkeletonLayer.
Проще говоря, при отображении заполнителя установите прокси tableView для передачи объекта, который создает ячейку в соответствии с идентификатором ячейки и добавляет отображение заполнителя. При закрытии заполнителя дисплея переключите прокси-сервер прокси-таблицы обратно на ViewController и отобразите его в обычном режиме.
Функции
- Необходимость вручную писать элемент управления-заполнитель, без обработки скруглений и других проблем, занимая тот же эффект с фактическим расположением элемента управления.
- Недостатком является то, что некоторые элементы управления имеют адаптивный размер.До получения данных положение элементов управления неверно, что приводит к проблемам с эффектом заполнителя.
Somo
То же самое касается расширения UIView и добавления атрибута somoContainer для представления представления контейнера представления заполнителя, где каждая область заполнителя является SomoView. Для представления, которое хочет отобразить эффект заполнителя, необходимо реализовать протокол и вернуть список SomoView в методе протокола. Добавьте эти SomoViews в somoContainer и отобразите их.
Функции
- Устраняет проблему неправильного размера, когда вышеуказанный адаптивный элемент управления не имеет данных.
- Каждый заполнитель необходимо указывать вручную, и каждый заполнитель относится к уровню UIView, а не CALayer.
TABAnimated
Кроме того, TABAnimated также часто используется, а TABAnimated также является расширенным UIView. Для интеграции TABAnimated в ios необходимо выполнить следующие шаги:
1. Установите
pod search TABAnimated
2, второй шаг (необязательно)
Вы можете установить глобальные свойства анимации в методе didFinishLaunchingWithOptions appDelegate со свойствами по умолчанию. Например:
// 设置TABAnimated相关属性
[[TABViewAnimated sharedAnimated]initWithAnimatedDuration:0.3 withColor:tab_kBackColor];
3, третий шаг, установите свойствоanimatedStyle
На представлении, которое необходимо анимировать, установите для свойстваanimatedStyle значение TABTableViewAnimationStart, а представлению, которому не нужна анимация, не нужно выполнять дополнительные операции.
// UIView和UICollectionView枚举
typedef NS_ENUM(NSInteger,TABViewAnimationStyle) {
TABViewAnimationDefault = 0, // 默认,没有动画
TABViewAnimationStart, // 开始动画
TABViewAnimationRuning, // 动画中
TABViewAnimationEnd, // 结束动画
TABCollectionViewAnimationStart, // CollectionView 开始动画
TABCollectionViewAnimationRunning, // CollectionView 动画中
TABCollectionViewAnimationEnd // CollectionView 结束动画
};
// UITableView枚举
typedef NS_ENUM(NSInteger,TABViewAnimationStyle) {
TABViewAnimationDefault = 0, // 没有动画，默认
TABViewAnimationStart, // 开始动画
TABViewAnimationEnd // 结束动画
};
// UITableView例子
- (UITableView *)mainTV {
if (!_mainTV) {
_mainTV = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight)];
_mainTV.animatedStyle = TABTableViewAnimationStart; // 开启动画
_mainTV.delegate = self;
_mainTV.dataSource = self;
_mainTV.rowHeight = 100;
_mainTV.backgroundColor = [UIColor whiteColor];
_mainTV.estimatedRowHeight = 0;
_mainTV.estimatedSectionFooterHeight = 0;
_mainTV.estimatedSectionHeaderHeight = 0;
_mainTV.separatorStyle = UITableViewCellSeparatorStyleNone;
}
return _mainTV;
}
// UIView例子
- (TestHeadView *)headView {
if (!_headView) {
_headView = [[TestHeadView alloc]initWithFrame:CGRectMake(0, 0, tab_kScreenWidth, 90)];
_headView.animatedStyle = TABViewAnimationStart; //开启动画
}
return _headView;
}
4, четвертый шаг
- Присвоить атрибуту loadStyle компонента, который необходимо перемещать, требуемый тип, а компоненту, который не нужно перемещать, не нужно выполнять дополнительные операции;
- (Необязательно) Добавьте свойство tabViewWidth, которое представляет собой ширину компонента при включенной анимации и имеет разумное значение по умолчанию;
typedef enum {
TABViewLoadAnimationDefault = 0, //默认没有动画
TABViewLoadAnimationShort, //动画先变短再变长
TABViewLoadAnimationLong //动画先变长再变短
}TABViewLoadAnimationStyle; //view动画类型枚举
{
UILabel *lab = [[UILabel alloc]init];
[lab setFont:tab_kFont(15)];
lab.loadStyle = TABViewLoadAnimationLong;
lab.tabViewWidth = 100;
[lab setTextColor:[UIColor blackColor]];
[lab setText:@""];
titleLab = lab;
[self.contentView addSubview:lab];
}
5, пятый шаг
После получения данных остановите анимацию.
//停止动画,并刷新数据
_mainTV.animatedStyle = TABTableViewAnimationEnd;
[_mainTV reloadData];
_headView.animatedStyle = TABViewAnimationEnd;
[_headView initWithData:headGame];
Пример ссылки на исходный код:Пример скелетного экрана iOS
Android
В Android за реализацией каркасного экрана также следуют многие сторонние фреймворки.Обычными являются следующие библиотеки:
ShimmerRecyclerView
ShimmerRecyclerView — это библиотека с эффектами вспышки и индикатора, которая работает следующим образом:
Адрес источника:GitHub.com/shari is/shi…
Skeleton
Skeleton также является более широко используемой библиотекой, теперь она использует оптимизированную для памяти версию флэш-анимации, поэтому она работает быстрее, и вы также можете анимировать большие макеты.
Исходный код проекта:GitHub.com/Итан Флауэр/SK…
spruce-android
Spruce — это легкая анимационная библиотека, которая помогает создавать анимации на экране, а также поддерживает iOS.
Адрес источника:GitHub.com/Ива А…
внешний интерфейс
Во внешнем интерфейсе используйте puppeteer для управления безголовым Chrome на стороне сервера, чтобы открыть разрабатываемую страницу, которая должна создать каркасный экран. После ожидания завершения загрузки и рендеринга страницы, при условии сохранения стиля макета страницы, удалять или добавлять элементы на странице, удаляя или добавляя элементы. , покрывать существующие элементы каскадными стилями, чтобы без изменения макета страницы скрывать изображения и тексты, и покрывать их стилями, чтобы они отображались как серые блоки. Затем извлеките измененные стили HTML и CSS, таким образом реализуя каркас экрана.
Для реализации и оптимизации скелетного экрана интерфейса читателям рекомендуется прочитать следующие статьи по ссылкам: