Skip to content

M
Material
Commit f5ceb503 by Daniel Dahan
Options

added focus animation to pulse

parent ff210ebf
Showing with 78 additions and 28 deletions
Examples/Programmatic/MaterialPulseView/MaterialPulseView/ViewController.swift
...@@ -59,6 +59,7 @@ class ViewController: UIViewController { ...@@ -59,6 +59,7 @@ class ViewController: UIViewController {
pulseView.shape = .Square pulseView.shape = .Square
pulseView.depth = .Depth1 pulseView.depth = .Depth1
pulseView.cornerRadiusPreset = .Radius3 pulseView.cornerRadiusPreset = .Radius3
pulseView.pulseFocus = true
// Add pulseView to UIViewController. // Add pulseView to UIViewController.
view.addSubview(pulseView) view.addSubview(pulseView)
......
Sources/MaterialPulseAnimation.swift
...@@ -33,56 +33,96 @@ import UIKit ...@@ -33,56 +33,96 @@ import UIKit
internal extension MaterialAnimation { internal extension MaterialAnimation {
/** /**
Triggers the pulse animation. Triggers the pulse animation.
- Parameter layer: Container CALayer.
- Parameter visualLayer: A CAShapeLayer for the pulseLayer.
- Parameter color: The UIColor for the pulse.
- Parameter point: A point to pulse from. - Parameter point: A point to pulse from.
- Returns: A Ooptional CFTimeInternal if the point exists within - Parameter width: Container width.
the view. The time internal represents the animation time. - Parameter height: Container height.
- Parameter duration: Animation duration.
- Parameter pulseLayer: An Optional pulseLayer to use in the animation.
*/ */
internal static func pulseAnimation(layer: CALayer, visualLayer: CALayer, color: UIColor, opacity: CGFloat, point: CGPoint, width: CGFloat, height: CGFloat, duration: NSTimeInterval) { internal static func pulseAnimation(layer: CALayer, visualLayer: CALayer, color: UIColor, point: CGPoint, width: CGFloat, height: CGFloat, duration: NSTimeInterval, var pulseLayer: CAShapeLayer? = nil) {
let r: CGFloat = (width < height ? height : width) / 2 let r: CGFloat = (width < height ? height : width) / 2
let f: CGFloat = 3 let f: CGFloat = 3
let v: CGFloat = r / f let v: CGFloat = r / f
let d: CGFloat = 2 * f let d: CGFloat = 2 * f
let pulseLayer: CAShapeLayer = CAShapeLayer() var b: Bool = false
pulseLayer.hidden = true if nil == pulseLayer {
pulseLayer.zPosition = 1 pulseLayer = CAShapeLayer()
pulseLayer.backgroundColor = color.colorWithAlphaComponent(opacity).CGColor b = true
visualLayer.addSublayer(pulseLayer) }
pulseLayer!.hidden = true
pulseLayer!.zPosition = 1
pulseLayer!.backgroundColor = color.CGColor
visualLayer.addSublayer(pulseLayer!)
MaterialAnimation.animationDisabled { MaterialAnimation.animationDisabled {
pulseLayer.bounds = CGRectMake(0, 0, v, v) pulseLayer!.bounds = CGRectMake(0, 0, v, v)
pulseLayer.position = point pulseLayer!.position = point
pulseLayer.cornerRadius = r / d pulseLayer!.cornerRadius = r / d
pulseLayer.hidden = false pulseLayer!.hidden = false
} }
pulseLayer.addAnimation(MaterialAnimation.scale(3 * d, duration: duration), forKey: nil) pulseLayer!.addAnimation(MaterialAnimation.scale(3 * d, duration: duration), forKey: nil)
MaterialAnimation.delay(duration) { if b {
MaterialAnimation.animateWithDuration(duration, animations: { MaterialAnimation.delay(duration) {
pulseLayer.hidden = true MaterialAnimation.animateWithDuration(duration, animations: {
}) { pulseLayer?.hidden = true
pulseLayer.removeFromSuperlayer() }) {
pulseLayer?.removeFromSuperlayer()
}
}
} else {
MaterialAnimation.delay(duration / 2) {
pulseLayer?.addAnimation(MaterialAnimation.scale(1.10 * d, duration: duration), forKey: nil)
} }
} }
} }
/**
Triggers the expanding animation.
- Parameter layer: Container CALayer.
- Parameter scale: The scale factor when expanding.
- Parameter duration: Animation duration.
*/
internal static func expandAnimation(layer: CALayer, scale: CGFloat, duration: NSTimeInterval) { internal static func expandAnimation(layer: CALayer, scale: CGFloat, duration: NSTimeInterval) {
layer.addAnimation(MaterialAnimation.scale(scale, duration: duration), forKey: nil) layer.addAnimation(MaterialAnimation.scale(scale, duration: duration), forKey: nil)
} }
internal static func shrinkAnimation(layer: CALayer, width: CGFloat, duration: NSTimeInterval) { /**
Triggers the shrinking animation.
- Parameter layer: Container CALayer.
- Parameter width: Container width.
- Parameter duration: Animation duration.
- Parameter pulseLayer: An Optional pulseLayer to use in the animation.
*/
internal static func shrinkAnimation(layer: CALayer, width: CGFloat, duration: NSTimeInterval, pulseLayer: CAShapeLayer? = nil) {
if let v: CAShapeLayer = pulseLayer {
MaterialAnimation.animateWithDuration(duration, animations: {
v.hidden = true
}) {
v.removeFromSuperlayer()
}
}
layer.addAnimation(MaterialAnimation.scale(1, duration: duration), forKey: nil) layer.addAnimation(MaterialAnimation.scale(1, duration: duration), forKey: nil)
} }
/**
Retrieves the animation duration time.
- Parameter width: Container width.
- Returns: An NSTimeInterval value that represents the animation time.
*/
internal static func pulseDuration(width: CGFloat) -> NSTimeInterval { internal static func pulseDuration(width: CGFloat) -> NSTimeInterval {
var t: CFTimeInterval = CFTimeInterval(1.5 * width / MaterialDevice.width) var t: CFTimeInterval = CFTimeInterval(1.5 * width / MaterialDevice.width)
if 0.55 < t || 0.25 > t { if 0.55 < t || 0.25 > t {
t = 0.55 t = 0.55
} }
t /= 1.3 return t / 1.3
return t
} }
} }
\ No newline at end of file
Sources/MaterialPulseView.swift
...@@ -31,6 +31,12 @@ ...@@ -31,6 +31,12 @@
import UIKit import UIKit
public class MaterialPulseView : MaterialView { public class MaterialPulseView : MaterialView {
/// To use a single pulse and have it focused when held.
public var pulseFocus: Bool = false
/// A pulse layer for focus handling.
public private(set) var pulseLayer: CAShapeLayer?
/// Sets whether the scaling animation should be used. /// Sets whether the scaling animation should be used.
public lazy var pulseScale: Bool = true public lazy var pulseScale: Bool = true
...@@ -53,7 +59,7 @@ public class MaterialPulseView : MaterialView { ...@@ -53,7 +59,7 @@ public class MaterialPulseView : MaterialView {
let duration: NSTimeInterval = MaterialAnimation.pulseDuration(width) let duration: NSTimeInterval = MaterialAnimation.pulseDuration(width)
if let v: UIColor = pulseColor { if let v: UIColor = pulseColor {
MaterialAnimation.pulseAnimation(layer, visualLayer: visualLayer, color: v, opacity: pulseColorOpacity, point: point!, width: width, height: height, duration: duration) MaterialAnimation.pulseAnimation(layer, visualLayer: visualLayer, color: v.colorWithAlphaComponent(pulseColorOpacity), point: point!, width: width, height: height, duration: duration)
} }
if pulseScale { if pulseScale {
...@@ -78,10 +84,14 @@ public class MaterialPulseView : MaterialView { ...@@ -78,10 +84,14 @@ public class MaterialPulseView : MaterialView {
super.touchesBegan(touches, withEvent: event) super.touchesBegan(touches, withEvent: event)
let duration: NSTimeInterval = MaterialAnimation.pulseDuration(width) let duration: NSTimeInterval = MaterialAnimation.pulseDuration(width)
if pulseFocus {
pulseLayer = CAShapeLayer()
}
if let v: UIColor = pulseColor { if let v: UIColor = pulseColor {
let point: CGPoint = layer.convertPoint(touches.first!.locationInView(self), fromLayer: layer) let point: CGPoint = layer.convertPoint(touches.first!.locationInView(self), fromLayer: layer)
MaterialAnimation.pulseAnimation(layer, visualLayer: visualLayer, color: v, opacity: pulseColorOpacity, point: point, width: width, height: height, duration: duration) MaterialAnimation.pulseAnimation(layer, visualLayer: visualLayer, color: v.colorWithAlphaComponent(pulseColorOpacity), point: point, width: width, height: height, duration: duration, pulseLayer: pulseLayer)
} }
if pulseScale { if pulseScale {
...@@ -97,8 +107,7 @@ public class MaterialPulseView : MaterialView { ...@@ -97,8 +107,7 @@ public class MaterialPulseView : MaterialView {
*/ */
public override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) { public override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {
super.touchesEnded(touches, withEvent: event) super.touchesEnded(touches, withEvent: event)
let duration: NSTimeInterval = MaterialAnimation.pulseDuration(width) MaterialAnimation.shrinkAnimation(layer, width: width, duration: MaterialAnimation.pulseDuration(width), pulseLayer: pulseLayer)
MaterialAnimation.shrinkAnimation(layer, width: width, duration: duration)
} }
/** /**
...@@ -109,8 +118,7 @@ public class MaterialPulseView : MaterialView { ...@@ -109,8 +118,7 @@ public class MaterialPulseView : MaterialView {
*/ */
public override func touchesCancelled(touches: Set<UITouch>?, withEvent event: UIEvent?) { public override func touchesCancelled(touches: Set<UITouch>?, withEvent event: UIEvent?) {
super.touchesCancelled(touches, withEvent: event) super.touchesCancelled(touches, withEvent: event)
let duration: NSTimeInterval = MaterialAnimation.pulseDuration(width) MaterialAnimation.shrinkAnimation(layer, width: width, duration: MaterialAnimation.pulseDuration(width), pulseLayer: pulseLayer)
MaterialAnimation.shrinkAnimation(layer, width: width, duration: duration)
} }
/** /**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment