I have an image of what symbolises a heartbeat
and I'm trying to loop it in my subview so it continuously appears on my view if you understand what i mean. So far I have got it to appear and move across infinitely on my subview however it isn't continuous as it only appears again from the left after it has completely gone out of the view on the right where as I want it to appear again as soon as it has completely entered the view so it symbolises an actual heartbeat. My code looks something like this on my viewDidLoad:
self.heartbeatLoading.frame.origin = CGPoint(x: 0 - heartbeatLoading.frame.size.width, y: 10)
let animation: UIViewAnimationOptions = [.repeat, .curveLinear]
UIView.animate(withDuration: 5.0, delay: 0, options: animation, animations: {
self.heartbeatLoading.frame = self.heartbeatLoading.frame.offsetBy(dx: self.view.frame.width + self.heartbeatLoading.frame.width, dy: 0.0)
}, completion: nil)
Take one UIView and set this class as a super view. Call start animation and stop the animation whenever required.
#IBDesignable class Pulse : UIView
{
var animatingView : UIView?
#IBInspectable var pulseImage: UIImage = UIImage(named: "defaultImage")!{
didSet {
animatingView = UIView(frame: self.bounds)
let imgView = UIImageView(frame : self.bounds)
animatingView?.clipsToBounds = true
animatingView?.addSubview(imgView)
self.addSubview(animatingView!)
}
}
func startAnimationWith(duration : Double = 0.5)
{
if animatingView != nil
{
animatingView?.frame = CGRect(x: 0, y: 0, width: 0, height: (animatingView?.frame.size.height)!)
UIView.animate(withDuration: duration, delay: 0, options: .repeat, animations: {
self.animatingView?.frame = CGRect(x: 0, y: 0, width: (self.animatingView?.frame.size.width)!, height: (self.animatingView?.frame.size.height)!)
}, completion: { (isDone) in
})
}
}
func stopAnimation()
{
if animatingView != nil
{
self.animatingView!.layer.removeAllAnimations()
}
}
override init(frame : CGRect) {
super.init(frame : frame)
}
convenience init() {
self.init(frame:CGRect.zero)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
}
Related
I have a custom UIView class that creates a square with a red background and I'm trying to get a green square slide on top of it from the left. I have a button from the main view that brings me to the screen above but the green screen doesn't animate over it. It just appears at the end result. I do know that I am creating these shapes when I change the initial width of the green square but no indication of an animation.
MainViewController.swift
private func configureAnimatedButton() {
//let sampleAnimatedButton
let sampleAnimatedButton = AnimatedButtonView()
sampleAnimatedButton.center = CGPoint(x: self.view.frame.size.width / 2,
y: self.view.frame.size.height / 2)
self.view.addSubview(sampleAnimatedButton)
sampleAnimatedButton.animateMiddleLayer()
}
AnimatedButton.swift
import Foundation
import UIKit
public class AnimatedButtonView: UIView {
//initWithFrame to init view from code
let movingLayer = UIView()
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
//initWithCode to init view from xib or storyboard
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupView()
}
//common func to init our view
private func setupView() {
//backgroundColor = .red
self.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
self.backgroundColor = .red
movingLayer.frame = CGRect(x: self.frame.maxX, y: self.frame.minY, width: 0, height: 300)
movingLayer.backgroundColor = .green
self.addSubview(movingLayer)
}
public func animateMiddleLayer() {
UIView.animate(withDuration: 10.0, delay: 1.2, options: .curveEaseOut, animations: {
self.layoutIfNeeded()
var grayLayerTopFrame = self.movingLayer.frame
grayLayerTopFrame.origin.x = 0
grayLayerTopFrame.size.width += 300
self.movingLayer.frame = grayLayerTopFrame
self.layoutIfNeeded()
}, completion: { finished in
print("animated")
})
}
}
You should move grayLayerTopFrame outside the UIView.animate(), before it starts. Also, you don't need layoutIfNeeded if you're just animating the frame (you use it when you have constraints).
var grayLayerTopFrame = self.movingLayer.frame
grayLayerTopFrame.origin.x = 0
grayLayerTopFrame.size.width += 300
UIView.animate(withDuration: 10.0, delay: 1.2, options: .curveEaseOut, animations: {
self.layoutIfNeeded()
self.movingLayer.frame = grayLayerTopFrame
self.layoutIfNeeded()
}, completion: { finished in
print("animated")
})
Also, make sure you don't call it in viewDidLoad() -- at that time, the views aren't laid out yet.
I am trying to make a custom activity view that spins and flips a logo. I am at the very early stages and building it in xcodes playground. I just want the logo to flip vertically, then horizontally, then vertically again and horizontally again so that the logo is how it began initially. The issue im having is that it is only performing the first flip and then nothing else but i cant see why?
This is what my code in the playground looks like at the moment:
import UIKit
import PlaygroundSupport
import QuartzCore
class LogoActivityView: UIView {
var animationLoopCount: Int = 0
var logoImageView = UIImageView()
var logoImage = UIImage()
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
setLogoImageView()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func setupView() {
self.backgroundColor = .clear
self.isHidden = true
}
func startAnimating() {
self.isHidden = false
animationLoopCount
while animationLoopCount < 2 {
UIView.animate(withDuration: 1.0, delay: 0.1, options: .curveEaseInOut, animations: {() -> Void in
self.logoImageView.layer.transform = CATransform3DMakeRotation(.pi, 1.0, 0.0, 0.0)
}, completion: {(_ finished: Bool) -> Void in
UIView.animate(withDuration: 1.0, delay: 0.0, options: .curveEaseInOut, animations: {
self.logoImageView.layer.transform = CATransform3DMakeRotation(.pi, 0.0, 1.0, 0.0)
}, completion: nil)
})
animationLoopCount += 1
}
}
func setLogoImageView() {
logoImageView = UIImageView(frame: self.frame)
logoImage = UIImage(named: "MemoryBoothLogo.png")!
logoImageView.image = logoImage
logoImageView.contentMode = .scaleAspectFit
logoImageView.backgroundColor = .clear
self.addSubview(logoImageView)
}
}
let containerView = LogoActivityView(frame: CGRect(x: 0, y: 0, width: 400, height: 400))
PlaygroundPage.current.liveView = containerView
PlaygroundPage.current.needsIndefiniteExecution = true
containerView.startAnimating()
Any help would be great thanks
I have a UIView subclass called View, in which I want a "ripple" to move outwards from wherever the user double clicks (as well as preforming other drawing functions). Here is the relevant part of my draw method, at present:
override func draw(_ rect: CGRect) {
for r in ripples {
r.paint()
}
}
This is how r.paint() is implemented, in class Ripple:
func paint() {
let c = UIColor(white: CGFloat(1.0 - (Float(iter))/100), alpha: CGFloat(1))
print(iter, " - ",Float(iter)/100)
c.setFill()
view.fillCircle(center: CGPoint(x:x,y:y), radius: CGFloat(iter))
}
iter is supposed to be incremented every 0.1 seconds by a Timer which is started in the constructor of Ripple:
Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true, block: move)
move is implemented as follows:
func move(_ timer: Timer) {
while (tier<100) {
iter += 1
DispatchQueue.main.async {
self.view.setNeedsDisplay()
}
}
timer.invalidate()
}
What is supposed to happen is that every 0.1 seconds when the timer fires, it will increment iter and tell the View to repaint, which it will then do using the Ripple.paint() method, which uses iter to determine the color and radius of the circle.
However, as revealed using print statements, what happens instead is that the Timer fires all 100 times before the redraw actually takes place. I have tried dealing with this by replacing DispatchQueue.main.async with DispatchQueue.main.sync, but this just made the app hang. What am I doing wrong? If this is just not the right way to approach the problem, how can I get a smooth ripple animation (which involves a circle which grows while changing colors) to take place while the app can still preform other functions such as spawning more ripples? (This means that multiple ripples need to be able to work at once.)
You can achieve what you want with CABasicAnimation and custom CALayer, like that:
class MyLayer : CALayer
{
var iter = 0
override class func needsDisplay(forKey key: String) -> Bool
{
let result = super.needsDisplay(forKey: key)
return result || key == "iter"
}
override func draw(in ctx: CGContext) {
UIGraphicsPushContext(ctx)
UIColor.red.setFill()
ctx.fill(self.bounds)
UIGraphicsPopContext()
NSLog("Drawing, \(iter)")
}
}
class MyView : UIView
{
override class var layerClass: Swift.AnyClass {
get {
return MyLayer.self
}
}
}
class ViewController: UIViewController {
let myview = MyView()
override func viewDidLoad() {
super.viewDidLoad()
myview.frame = self.view.bounds
self.view.addSubview(myview)
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
let animation = CABasicAnimation(keyPath: "iter")
animation.fromValue = 0
animation.toValue = 100
animation.duration = 10.0
myview.layer.add(animation, forKey: "MyIterAnimation")
(myview.layer as! MyLayer).iter = 100
}
}
Custom UIView like AlertView with Animation for Swift 3 and Swift 4
You can use a extension:
extension UIVIew{
func customAlertView(frame: CGRect, message: String, color: UIColor, startY: CGFloat, endY: CGFloat) -> UIVIew{
//Adding label to view
let label = UILabel()
label.frame = CGRect(x: 0, y: 0, width: frame.width, height:70)
label.textAlignment = .center
label.textColor = .white
label.numberOfLines = 0
label.text = message
self.addSubview(label)
self.backgroundColor = color
//Adding Animation to view
UIView.animate(withDuration:0.5, delay: 0, options:
[.curveEaseOut], animations:{
self.frame = CGRect(x: 0, y: startY, width: frame.width, height: 64)
}) { _ in
UIView.animate(withDuration: 0.5, delay: 4, options: [.curveEaseOut], animations: {
self.frame = CGRect(x: 0, y: endY, width: frame.width, height:64)
}, completion: {_ in
self.removeFromSuperview()
})
}
return self
}
And you can use it un your class. This example startY is when you have a navigationController:
class MyClassViewController: UIViewController{
override func viewDidLoad(){
super.viewDidLoad()
self.view.addSubView(UIView().addCustomAlert(frame: self.view.frame, message: "No internet connection", color: .red, startY:64, endY:-64))
}
}
I am trying my hand at creating a custom activity indicator view programatically. The problem is that it never starts animating. Here is the code for the spinner.swift class:
import UIKit
class spinner: UIActivityIndicatorView {
var flag = Bool()
override init(frame: CGRect) {
super.init(frame: frame)
self.flag = true
self.isHidden = false
}
required init(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func startAnimating() {
self.animate()
}
func animate()
{
if flag == true
{
UIView.animate(withDuration: 0.3, animations: {
self.layer.setAffineTransform(CGAffineTransform(scaleX: 0.5, y: 1))
}) { (success) in
if success == true
{
UIView.animate(withDuration: 0.3, animations: {
self.layer.setAffineTransform(CGAffineTransform.identity)
}, completion: { (success) in
if success == true
{
self.animate()
}
})
}
}
}
}
override func stopAnimating() {
self.flag = false
}
override func draw(_ rect: CGRect) {
let path = UIBezierPath(ovalIn: rect)
UIColor.cyan.setStroke()
path.stroke()
UIColor.red.setFill()
path.fill()
}
}
This is the code in viewDidLoad() where I've added the spinner:
let aiv = spinner(frame: CGRect(x: self.view.bounds.width/2-35, y: self.view.bounds.height/2-35, width: 70, height: 70))
aiv.hidesWhenStopped = true
self.view.addSubview(aiv)
aiv.startAnimating()
print(aiv.isAnimating)
print(air)
I don't see a spinner at all, and get the following message in the console:
false
<spinner.spinner: 0x7f82b3e08240; baseClass = UIActivityIndicatorView; frame = (170 298.5; 35 70); transform = [0.5, 0, 0, 1, 0, 0]; hidden = YES; animations = { transform=<CABasicAnimation: 0x6080000364a0>; }; layer = <CALayer: 0x608000035120>>
According to the logs, the spinner is hidden, which means it never started animating.
It would be great if anyone could point out where I'm going wrong, and suggest a possible fix.
Thanks!
Your problem appears because of the call:
aiv.hidesWhenStopped = true
And the property isAnimating returns false because you are overriding the animate method and not use the foundation one.
You should set this property in your custom class when you are starting and stopping your custom animation.
The same case is the hidesWhenStopped. This should be implemented by you in your class.
I would also recommend to use UIView as a subclass with a UIActivityIndicator inside because if you want to start the ActivityIndicator the AffineTransformation could disrupt each other.
I'd like to popup a view with a single label in it that disappears slowly within one second to inform the user about a choice he made, an update occurred or whatever.
I use animatewithduration, but because they may be many different alerts, I'd like to create a class to avoid creating view, label and func in any UIViewController that may display that kind of alert ... Kind of :
let doneAlert = PopUpAlert(parentView : self, textAlert : "You're done")
where parentView in the view where I want the textAlert to be displayed and then when needed:
doneAlert.display()
Here's the class I wrote :
class PopUpAlert: UIView {
convenience init(parentView : UIView,textAlert : String) {
self.init(frame: CGRect(x: 0, y: 0, width: 200, height: 150))
self.alpha = 0
self.center = parentView.center
let popUpLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 150))
popUpLabel.center = self.center
popUpLabel.text = textAlert
self.addSubview(popUpLabel)
parentView.addSubview(self)
}
func display() {
PopUpAlert.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseOut, animations: {
self.alpha = 1.0
}, completion: nil)
PopUpAlert.animateWithDuration(1.0, delay: 0.5, options: UIViewAnimationOptions.CurveEaseIn, animations: {
self.alpha = 0.0
}, completion: nil)
}
}
And here's the way I use it :
class CarteVC: UIViewController {
var daddy : RootViewController?
var goAlert : PopUpAlert?
#IBOutlet weak var mapView: MKMapView!
override func viewDidLoad() {
super.viewDidLoad()
goAlert = PopUpAlert(parentView: mapView, textAlert: "On the way ....")
}
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
let bb = UIBarButtonItem(title: "< List", style: .Plain, target: papa!, action: "pred")
bb.tintColor = UIColor.lightGrayColor()
daddy!.navigationItem.leftBarButtonItem = bb
daddy!.navigationItem.rightBarButtonItem = nil
goAlert!.display()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
// MARK: - Navigation
Nothing is displayed.
If you want to just alert user and disappear in one second than i would suggest you to use Toast Swift
https://github.com/scalessec/Toast-Swift
Here is how you make the toast
self.view.makeToast("Testing Toast")
// specific duration and position
self.view.makeToast("Testing Toast with duration and position", duration: 3.0, position: .Top)
// toast with image and all possible
self.view.makeToast("testing toast image and all possible ", duration: 2.0, position: CGPoint(x: 110.0, y: 110.0), title: "Toast Title", image: UIImage(named: "toast.png"), style:nil) { (didTap: Bool) -> Void in
if didTap {
print("with tap")
} else {
print("without tap")
}
}
The pb came from centering the label inside the view ... Here's the class and works perfectly fine !!! :
class PopUpAlert: UIView {
convenience init(parentView : UIView,textAlert : String) {
self.init(parentView: parentView,textAlert: textAlert,background: UIColor.darkGrayColor(),foreground: UIColor.whiteColor())
}
convenience init(parentView : UIView,textAlert : String, background : UIColor) {
self.init(parentView: parentView,textAlert: textAlert,background: background,foreground: UIColor.whiteColor())
}
convenience init(parentView : UIView,textAlert : String, foreground : UIColor) {
self.init(parentView: parentView,textAlert: textAlert,background: UIColor.darkGrayColor(),foreground: foreground)
}
convenience init(parentView : UIView,textAlert : String, background : UIColor, foreground : UIColor) {
self.init(frame: CGRect(x: 0, y: 0, width: 150, height: 40))
self.alpha = 0
self.backgroundColor = background
self.layer.cornerRadius = 5
self.layer.masksToBounds = true
self.center = (parentView.superview ?? parentView).center
let popUpLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 150, height: 40))
popUpLabel.textAlignment = .Center
popUpLabel.textColor = foreground
popUpLabel.text = textAlert
self.addSubview(popUpLabel)
parentView.addSubview(self)
}
deinit {
self.removeFromSuperview()
}
func display() {
PopUpAlert.animateWithDuration(0.5, delay: 0.0, options: UIViewAnimationOptions.CurveEaseOut, animations: {
self.alpha = 0.85
}, completion: nil)
PopUpAlert.animateWithDuration(1.0, delay: 0.7, options: UIViewAnimationOptions.CurveEaseIn, animations: {
self.alpha = 0.0
}, completion: nil)
}