PYWaveViewTemp

О пользовательском волновом эффекте представления, который можно использовать в качестве индикатора выполнения. По умолчанию доступны два варианта: линейный и круговой. Можно настроить форму.

[Рисунок: волна.gif]

Введение: В процессе работы возникла необходимость в создании эффекта волны. После изучения множества материалов был разработан инструмент.

Часть 1. Реализация идеи

1. Для расчёта точек на волне используется синусоидальная функция, а UIBezierPath используется для соединения точек с помощью moveToPoint и addLineToPoint.

2. В качестве источника движения используется таймер DisplayLink.
3. Чтобы остановить волну, необходимо остановить таймер и присвоить ему значение nil.
4. Чтобы запустить волну, нужно создать новый таймер и вызвать setNeedsDisplay.

Часть 2. Подробный код 1. Создание

1. Предоставленный конструктор автоматически запускает волну без необходимости ручного вызова функции запуска.

/**
 * Конструктор класса волнового представления
 * @param colorMutableArray массив цветов
 * @param progress высота или прогресс, выраженный в процентах от self.frame.size.height
 */
+(instancetype)waveViewWithFrame:(CGRect)frame andColorSet: (NSMutableArray <UIColor *>*)colorMutableArray andProgress: (CGFloat)progress;
/**
 * Конструктор класса волнового представления
 * @param colorMutableArray массив цветов
 * @param progress высота или прогресс, выраженный в процентах от self.frame.size.height
 */
-(instancetype)initWithFrame:(CGRect)frame andColorSet: (NSMutableArray <UIColor *>*)colorMutableArray andProgress: (CGFloat)progress;

2. Необходимо вручную запускать волну с помощью конструктора по умолчанию.

2. Запуск и остановка волны

Флаг запуска волны (устанавливается в YES для запуска волны, устанавливается в NO для остановки волны. По умолчанию — NO).

@property (nonatomic,assign) BOOL isWaveStart;

3. Расширенные возможности

1. Цвет

///Массив цветов, которые необходимо отобразить. Можно добавлять в любое время. При рисовании массив будет пройден.

@property (nonatomic,strong) NSMutableArray<UIColor *> *colorMutableArray;

2. Высота морской воды (может использоваться как индикатор загрузки)

Высота или прогресс, выраженные в процентах от self.frame.size.height.

@property (nonatomic,assign) CGFloat progress;

3. Параметры волны

1. Амплитуда (амплитуда волны)

@property (nonatomic, assign) CGFloat amplitude;

2. Период волны

@property (nonatomic, assign) CGFloat cycle;

3. Расстояние смещения между двумя горизонтальными волнами

@property (nonatomic, assign) CGFloat distanceH;

4. Вертикальное смещение между двумя волнами

@property (nonatomic, assign) CGFloat distanceV;

5. Скорость волны (по умолчанию 0,1)

@property (nonatomic, assign) CGFloat waveScale;

4. Расширение формы

1. Пользовательская форма

@property (nonatomic, strong) UIBezierPath *bazierPath;

2. Тип формы, по умолчанию — круг (есть два типа форм: прямоугольник и круг. Если установлено свойство bazierPath, форма будет взята из пути bazierPath).

@property (nonatomic,assign) PYWaveViewPathType pathType;

3. Перечисление типов форм

typedef enum : NSUInteger {
    PYWaveViewPathType_CIRCULAR = 0,//круг
    PYWaveViewPathType_RECT = 1,//прямоугольник
} PYWaveViewPathType;

Без лишних слов, исходный код можно найти здесь