iOS实现爆炸的粒子效果示例代码_IOS开发教程-查字典教程网
iOS实现爆炸的粒子效果示例代码
iOS实现爆炸的粒子效果示例代码
发布时间:2016-12-28 来源:查字典编辑
摘要:照例我们先看看效果图怎么样?效果很不错吧,下面来一起看看实现的过程和代码示例。实现原理从图中可以大致看出,爆炸点点都是取的某坐标的颜色值,然...

照例我们先看看效果图

怎么样?效果很不错吧,下面来一起看看实现的过程和代码示例。

实现原理

从图中可以大致看出,爆炸点点都是取的某坐标的颜色值,然后根据一些动画效果来完成的。

取色值

怎么取的view的某个点的颜色值呢?google一下,就可以找到很多答案。就不具体说了。创建1*1的位图,然后渲染到屏幕上,然后得到RGBA。我这里写的是UIView的extension。

extension UIView { public func colorOfPoint(point:CGPoint) -> UIColor { var pixel:[CUnsignedChar] = [0,0,0,0] let colorSpace = CGColorSpaceCreateDeviceRGB() let bitmapInfo = CGBitmapInfo(rawValue: CGImageAlphaInfo.PremultipliedLast.rawValue) let context = CGBitmapContextCreate(&pixel, 1, 1, 8, 4, colorSpace, bitmapInfo.rawValue) CGContextTranslateCTM(context, -point.x, -point.y) self.layer.renderInContext(context!) let red: CGFloat = CGFloat(pixel[0]) / 255.0 let green: CGFloat = CGFloat(pixel[1]) / 255.0 let blue: CGFloat = CGFloat(pixel[2]) / 255.0 let alpha: CGFloat = CGFloat(pixel[3]) / 255.0 return UIColor(red:red, green: green, blue:blue, alpha:alpha) } }

粒子的生成

这里我写的比较简单,就是固定每个粒子大小,根据View的宽高算出横向,纵向的粒子数,取该点的色值,设置粒子背景色,然后生成即可。

主要代码如下:

frameDict是我预先计算好的坐标表,colorDict是颜色表。以"i-j"为key

class func createExplosionPoints(containerLayer: ExplosionLayer, targetView: UIView, animationType: ExplosionAnimationType) { let hCount = self.caculatePointHCount(containerLayer.targetSize.width) let vCount = self.caculatePointVCount(containerLayer.targetSize.height) for i in 0..<hCount { for j in 0..<vCount { let key = String(format: "%d-%d", i, j) if let rect = containerLayer.frameDict[key], color = containerLayer.colorDict[key] { let layer = createExplosionPointLayer(rect, bgColor: color, targetViewSize: containerLayer.targetSize) // animation layer.explosionAnimation = self.createAnimationWithType(animationType, position: layer.position, targetViewSize: containerLayer.targetSize) containerLayer.addSublayer(layer) layer.beginAnimation() } } } }

动画效果

每个粒子都有一个CAAnimation动画,数据由调用者提供,灵活点。

这里定义了一个protocol:ExplosionAnimationProtocol ,可以自定义实现了该protocol的动画对象,提供动画效果。

protocol ExplosionAnimationProtocol { // 粒子初始位置 var oldPosition: CGPoint { set get } // 粒子最终位置 var newPosition: CGPoint { set get } // 缩放 var scale: CGFloat { set get } // 动画时长 var duration: CFTimeInterval { set get } // 动画重复次数 var repeatCount: Float { set get } // 生成动画 func animation() -> CAAnimation // 设置动画完之后的属性 func resetLayerProperty(layer: CALayer) }

要发生爆炸view的动画效果

这个比较简单,就是上下左右震动下。具体代码就不贴出来了。

let shakeAnimation = CAKeyframeAnimation(keyPath: "position") ...

代码结构

大致思路就是这样。代码结构如下:

ExplosionLayer是粒子的父容器,

ExplosionPointLayer是粒子本身

ExplosionHelper是个辅助类,用于计算粒子位置,颜色值。

FallAnimation,UpAnimation是实现了ExplosionAnimationProtocol的动画,分别提供向下落,向上的效果。

碰到的问题

刚开始我是在边计算颜色值,边绘制粒子,发现会卡一下才会有爆炸效果出来,分析可能是在计算颜色值在主线程,时间较长,所以卡住了。

后来想到放到后台线程中去做,但是在主线程中取色值的时候,后台必须执行完,所以用了信号量来进行同步。

// 震动效果 private func shake() { self.createSemaphore() // 计算位置,色值 self.caculate() let shakeAnimation = CAKeyframeAnimation(keyPath: "position") shakeAnimation.values = [NSValue.init(CGPoint: self.position), NSValue.init(CGPoint: CGPointMake(self.position.x, self.position.y + 1)), NSValue.init(CGPoint: CGPointMake(self.position.x + 1, self.position.y - 1)), NSValue.init(CGPoint: CGPointMake(self.position.x - 1, self.position.y + 1))] shakeAnimation.duration = 0.2 shakeAnimation.repeatCount = 15 shakeAnimation.delegate = self shakeAnimation.removedOnCompletion = true self.targetView?.layer.addAnimation(shakeAnimation, forKey: "shake") }

当要爆炸的view开始震动时,就开始在后台计算。震动动画结束后,等待计算完成。

override func animationDidStop(anim: CAAnimation, finished flag: Bool) { // wait for caculate dispatch_semaphore_wait(self.semaphore!, DISPATCH_TIME_FOREVER) print("shake animation stop") // begin explode if let targetView = self.targetView { self.parentLayer?.addSublayer(self) ExplosionHelper.createExplosionPoints(self, targetView: targetView, animationType: self.animationType) self.targetView?.hidden = true } }

在后续的创建粒子时,就直接从缓存中取就行了。

总结

好了,以上就是iOS实现爆炸效果的全部内容了,实现后的效果是不是非常的炫酷?感兴趣的朋友们快快实践起来吧,只有自己操作了才能真正的理解,希望这篇文章对大家的学习或者工作能带来一定的帮助。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新IOS开发学习
    热门IOS开发学习
    编程开发子分类