Sparkle effect iOS

Question

Я хочу создать эффект искривления над изображением, как показано на видео Sparkle Effect Единственный способ, которым я мог думать о том, чтобы сделать это анимацию каждой частицы отдельно, используя основную анимацию, но это было бы неэффективным, а также трудоемким. Есть ли другой способ, я могу сделать то же самое?

Answer 1

Вот решение из книги повара Эрика Сьюзан. Смотрите, это работает для вас.

Вы можете добавить визуальный интерес к своим интерфейсам, используя излучатели в тандеме с пользовательскими касаниями. Следующий класс демонстрирует, как следить за своей жизнью, добавляя немного блеска туда, где пользователь прикасается к экрану.

Класс начинается, как только пользователь прикасается к экрану, создавая слой эмиттера и отдельную ячейку-эмиттер. Клетка определяет частицы - их цвет, рождаемость, продолжительность жизни, скорость и т. Д.

По достижении касания пользователя этот класс обновляет местоположение излучателя, удаляя излучатель, когда сенсор удаляется с экрана. Хотя этот пример написан для взаимодействия с одним касанием, вы можете легко обновить код, чтобы добавить массив эмиттеров (а не один экземпляр) для взаимодействия с несколькими контактами.

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

@interface SparkleTouchView : UIView { 
    CAEmitterLayer *emitter; 
} 

@end 

@implementation SparkleTouchView 

- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { 
    float multiplier = 0.25f; 

    CGPoint pt = [[touches anyObject] locationInView:self]; 

    //Create the emitter layer 
    emitter = [CAEmitterLayer layer]; 
    emitter.emitterPosition = pt; 
    emitter.emitterMode = kCAEmitterLayerOutline; 
    emitter.emitterShape = kCAEmitterLayerCircle; 
    emitter.renderMode = kCAEmitterLayerAdditive; 
    emitter.emitterSize = CGSizeMake(100 * multiplier, 0); 

    //Create the emitter cell 
    CAEmitterCell* particle = [CAEmitterCell emitterCell]; 
    particle.emissionLongitude = M_PI; 
    particle.birthRate = multiplier * 1000.0; 
    particle.lifetime = multiplier; 
    particle.lifetimeRange = multiplier * 0.35; 
    particle.velocity = 180; 
    particle.velocityRange = 130; 
    particle.emissionRange = 1.1; 
    particle.scaleSpeed = 1.0; // was 0.3 
    particle.color = [[COOKBOOK_PURPLE_COLOR colorWithAlphaComponent:0.5f] CGColor]; 
    particle.contents = (__bridge id)([UIImage imageNamed:@"spark.png"].CGImage); 
    particle.name = @"particle"; 

    emitter.emitterCells = [NSArray arrayWithObject:particle]; 
    [self.layer addSublayer:emitter]; 
} 

- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { 
    CGPoint pt = [[touches anyObject] locationInView:self]; 

    // Disable implicit animations 
    [CATransaction begin]; 
    [CATransaction setValue:(id)kCFBooleanTrue forKey:kCATransactionDisableActions]; 
    emitter.emitterPosition = pt;  
    [CATransaction commit];  
} 

- (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { 
    [emitter removeFromSuperlayer]; 
    emitter = nil; 
} 

- (void) touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event { 
    [self touchesEnded:touches withEvent:event]; 
} 

@end 

Не забудьте создать файл с именем PNG spark.png для создания анимации.

Answer 2

Пожалуйста, проверьте это решение.

https://github.com/GabriellaQiong/CIS581-Project2-Image-Morphing

CIwarpKernel кетов вы деформировать изображение в соответствии с ориентирами. Это именно то, что вы хотите сделать, чтобы иметь морфинг изображения.