Question

我想为图片创建闪光效果，如视频Sparkle Effect所示我能想到的唯一方法是使用核心动画分别为每个粒子制作动画，但这样既低效又耗时。有没有其他方法可以做同样的事情？

Answer 1

以下是Erica Susan的烹饪书中的解决方案。看到这个适合你。

您可以使用发射器与用户触摸相结合，为界面添加视觉兴趣。下面的课程演示如何在其生命周期内进行触摸，为用户触摸屏幕的位置添加一点点闪光。

一旦用户触摸屏幕，该类就会开始，创建一个发射器层和一个发射器单元。细胞定义了粒子 - 它们的颜色，出生率，寿命，速度等等。

随着用户触摸的进行，此类更新发射器的位置，一旦触摸从屏幕上移除，就会移除发射器。虽然此示例是针对单点触摸交互编写的，但您可以轻松更新代码以添加一组发射器（而不是单个实例）以进行多点触摸交互。

发射器很容易添加到您的项目中，并且运行效率很高。虽然过多的动画从来都不是一个好的设计理念，但明智地使用一点点闪光会增加生命和动作。

@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

不要忘记创建一个名为spark.png的png文件来创建动画。

Answer 2

/*Tested in swift 5.1*/    

Import UIKit

enum Images {
static let box = UIImage(named: "Box")!
static let triangle = UIImage(named: "Triangle")!
static let circle = UIImage(named: "Circle")!
static let swirl = UIImage(named: "Spiral")!
}

class ActivationRequiredViewController: UIViewController {

var emitter = CAEmitterLayer()

var colors:[UIColor] = [
    Colors.red,
    Colors.blue,
    Colors.green,
    Colors.yellow
]

var images:[UIImage] = [
    Images.box,
    Images.triangle,
    Images.circle,
    Images.swirl
]

var velocities:[Int] = [
    100,
    90,
    150,
    200
]

  override func viewDidLoad() {
    super.viewDidLoad()
   startSparkle()
}

func startSparkle() {
    emitter.emitterPosition = CGPoint(x: self.view.frame.size.width / 2, y:   -10)
    emitter.emitterShape = CAEmitterLayerEmitterShape.line
    emitter.emitterSize = CGSize(width: self.view.frame.size.width, height: 2.0)
    emitter.emitterCells = generateEmitterCells()
    self.view.layer.addSublayer(emitter)
}

private func generateEmitterCells() -> [CAEmitterCell] {
    var cells:[CAEmitterCell] = [CAEmitterCell]()
    for index in 0..<16 {
        
        let cell = CAEmitterCell()
        
        cell.birthRate = 4.0
        cell.lifetime = 14.0
        cell.lifetimeRange = 0
        cell.velocity = CGFloat(getRandomVelocity())
        cell.velocityRange = 0
        cell.emissionLongitude = CGFloat(Double.pi)
        cell.emissionRange = 0.5
        cell.spin = 3.5
        cell.spinRange = 0
        cell.color = getNextColor(i: index)
        cell.contents = getNextImage(i: index)
        cell.scaleRange = 0.25
        cell.scale = 0.1
        
        cells.append(cell)
    }
    return cells
}

private func getRandomVelocity() -> Int {
    return velocities[getRandomNumber()]
}

private func getRandomNumber() -> Int {
    return Int(arc4random_uniform(4))
}

private func getNextColor(i:Int) -> CGColor {
    if i <= 4 {
        return colors[0].cgColor
    } else if i <= 8 {
        return colors[1].cgColor
    } else if i <= 12 {
        return colors[2].cgColor
    } else {
        return colors[3].cgColor
    }
}

private func getNextImage(i:Int) -> CGImage {
    return images[i % 4].cgImage!
}

}

Answer 3

请检查此解决方案。

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

CIwarpKernel允许您根据参考点扭曲图像。这正是您想要进行图像变形的目的。

闪耀效果iOS

3 个答案: