I'm trying to get a twinkling star background effect in all my app screens. I put this code in the initial view controller file:
for index in 1...50 {
var x = CGFloat(arc4random_uniform(400))
var y = CGFloat(arc4random_uniform(700))
// Set the Center of the Circle
// 1
var circleCenter = CGPointMake(x,y)
// Set a random Circle Radius
// 2
var circleWidth = CGFloat(arc4random_uniform(7) + 2)
var circleHeight = circleWidth
// Create a new CircleView
// 3
var circleView = circleview(frame: CGRectMake(circleCenter.x, circleCenter.y, circleWidth, circleHeight))
view.addSubview(circleView)
UIView.animateWithDuration(NSTimeInterval(1000 + arc4random_uniform(100)) / 1000, delay: NSTimeInterval(arc4random_uniform(100)) / 1000, options: .CurveEaseIn | .Repeat | .Autoreverse, animations: {circleView.alpha = 0
}, completion: { finished in
println("thing!") })
}
And I put the same code in each additional view controller file but the circles don't appear. If I click to go back to the initial screen, the circles again don't appear (even though they do the first time the app is loaded).
If something runs the first time a view appears, but doesn't when you navigate back, you probably set it up in viewdidload. Try viewwillappear. This gets fired each time the view is shown. Not only when the view is first loaded.
override func viewWillAppear(animated: Bool) {
super.viewWillAppear(animated)
// your code that needs to run each time a view appears
}
Related
I am making an app that walks the user through account creation in a series of steps. After each step is completed, the user is taken to the next view controller and a progress bar animates across the top of the screen to communicate how much of the account making process has been completed. Here is the end result:
This is accomplished by placing a navigation controller within a containing view. The progress bar is laid over the containing view and every time the navigation controller pushes a new view controller, it tells the containing view controller to animate the progress bar to a certain percentage of the superview's width. This is done through the following updateProgressBar function.
import UIKit
class ContainerVC: UIViewController {
var progressBar: CAShapeLayer!
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
progressBar = CAShapeLayer()
progressBar.bounds = CGRect(x: 0, y: 0, width: 0, height: view.safeAreaInsets.top)
progressBar.position = CGPoint(x: 0, y: 0)
progressBar.anchorPoint = CGPoint(x: 0, y: 0)
progressBar.backgroundColor = UIColor.secondaryColor.cgColor
view.layer.addSublayer(progressBar)
}
func updateProgressBar(to percentAsDecimal: CGFloat!) {
let newWidth = view.bounds.width * percentAsDecimal
CATransaction.begin()
CATransaction.setCompletionBlock({
self.progressBar.bounds.size.width = newWidth
})
CATransaction.commit()
let anim = CABasicAnimation(keyPath: "bounds")
anim.isRemovedOnCompletion = true
anim.duration = 0.25
anim.fromValue = NSValue(cgRect: CGRect(x: 0, y: 0, width: progressBar.bounds.width, height: view.safeAreaInsets.top))
anim.toValue = NSValue(cgRect: CGRect(x: 0, y: 0, width: newWidth, height: view.safeAreaInsets.top))
progressBar.add(anim, forKey: "anim")
}
}
The view controllers in the navigation controller's stack will call this updateProgressBar function when pushing the next VC. This is done like so:
class FourthViewController: UIViewController {
var containerVC: ContainerViewController!
...
#IBAction func nextButtonPressed(_ sender: Any) {
let storyboard = UIStoryboard(name: "Main", bundle: .main)
let fifthVC = storyboard.instantiateViewController(withIdentifier: "FifthVC") as! FifthViewController
fifthVC.containerVC = containerVC
navigationController!.pushViewController(fifthVC, animated: true)
//We pass 5/11 because the next step will be step 5 out of 11 total steps
self.containerVC.updateProgressBar(to: 5/11)
}
}
Similarly, when pressing the back button, we shrink the container VC's progress bar:
class FourthViewController: UIViewController {
var containerVC: ContainerViewController!
...
#IBAction func backButtonPressed(_ sender: Any) {
navigationController!.popViewController(animated: true)
//We pass 3/11 because the previous step is step 3 out of 11 total steps
containerVC.updateProgressBar(to: 3/11)
}
}
My problem is that this animation only sometimes works. The progress bar always works when moving forward in the process, but sometimes, when a user navigates back, the bar gets stuck and will no longer move in either direction until an unreached view controller is presented. See the video below:
Video of Bug (Bug begins around 0:23)
I have confirmed that the presentation of an Alert Controller is not the cause of the failure to animate, and have also made sure that the animation is occurring on the main thread. Any suggestions?
As very well explained in this answer here, viewDidLayoutSubviews() gets called more than once.
In your case, you're ending up instatiating a new CAShapeLayer every time you push or pop a view controller from the navigation stack.
Try using viewDidAppear() instead.
my ViewController is still sending an array update, even if I'm in another View, what can I do? Here is my code:
import UIKit
import CoreBluetooth
class ViewController: UIViewController {
var audioVibe : AudioVibes!
var superpowered:Superpowered!
var displayLink:CADisplayLink!
var layers:[CALayer]!
var magnitudeArray : [UInt16] = [0, 0, 0, 0, 0, 0, 0]
override func viewDidLoad() {
super.viewDidLoad()
// Setup 8 layers for frequency bars.
let color:CGColorRef = UIColor(red: 0, green: 0.6, blue: 0.8, alpha: 1).CGColor
layers = [CALayer(), CALayer(), CALayer(), CALayer(), CALayer(), CALayer(), CALayer(), CALayer()]
for n in 0...7 {
layers[n].backgroundColor = color
layers[n].frame = CGRectZero
self.view.layer.addSublayer(layers[n])
}
superpowered = Superpowered()
// A display link calls us on every frame (60 fps).
displayLink = CADisplayLink(target: self, selector: #selector(ViewController.onDisplayLink))
displayLink.frameInterval = 1
displayLink.addToRunLoop(NSRunLoop.currentRunLoop(), forMode: NSRunLoopCommonModes)
}
// Gets triggered when you leave the ViewController.
override func viewWillDisappear(animated: Bool) {
superpowered.togglePlayback();
superpowered.moritz();
//delete(superpowered);
}
func onDisplayLink() {
// Get the frequency values.
let magnitudes = UnsafeMutablePointer<Float>.alloc(8)
superpowered.getMagnitudes(magnitudes)
// Wrapping the UI changes in a CATransaction block like this prevents animation/smoothing.
CATransaction.begin()
CATransaction.setAnimationDuration(0)
CATransaction.setDisableActions(true)
// Set the dimension of every frequency bar.
let originY:CGFloat = self.view.frame.size.height - 20
let width:CGFloat = (self.view.frame.size.width - 47) / 5
var frame:CGRect = CGRectMake(20, 0, width, 0)
for n in 0...4 {
frame.size.height = CGFloat(magnitudes[n]) * 2000
frame.origin.y = originY - frame.size.height
layers[n].frame = frame
frame.origin.x += width + 1
}
// Set the magnitudes in the array.
for n in 0...6 {
magnitudeArray[n] = UInt16(magnitudes[n] * 32768)
}
// Update the array in the audioVibe class to trigger the sending command.
audioVibe.magnitudeArray = magnitudeArray
CATransaction.commit()
// Dealloc the magnitudes.
magnitudes.dealloc(8)
}
}
I want him to stop doing things like audioVibe.magnitudeArray = magnitudeArray while I'm not in his view, what can I do?
Thanks!
Looks like you display link isn't getting paused when you transition to different views.
You could pause your display link when transitioning away from this view and resume it when coming back to this view using the paused property on CADisplayLink. You would pause it in viewWillDisappear and resume in viewWillAppear.
In your viewDidLoad method you're creating a CADisplayLink and adding it to the run loop.
If you don't do anything, that display link will stay active when you push another view controller on top of it.
You should move the code that creates the display link and adds it to the run loop to your viewWillAppear method.
Then you need to add code in viewWillDisappear that removes the display link from the run loop, invalidates it, and nils it out.
That way, you'll start your display link code when the view appears, and stop it when the view disappears.
I am a beginner in swift. I am building a single view tip calculator app and i only want some animation to happen when the app loads for the first time. And not happen every time i edit something.
Here is my code:
I am hiding the container outside the view when the app loads
override func viewWillAppear(animated: Bool) {
super.viewWillAppear(animated)
billView.center.y -= (billView.frame.height)/2
}
And animating it to move down
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
UIView.animateWithDuration(0.8, delay: 0.0,
options: [.CurveEaseOut], animations: {
self.billView.center.y = 210 }, completion: nil)
print(billView.center.y)
}
This works fine when the app loads. Unfortunately this animation keeps happening again and again anytime I interact with the app.
Like this animation happens when this function is called (which is when any information is entered on the text field or the slider is moved)
let billAmount = NSString(string: billField.text!).doubleValue
var tipPercentages = [0.15, 0.18, 0.22]
let tipPercentage = tipPercentages[segTipControl.selectedSegmentIndex]
let percentLabel = round(tipPercentage * 100)
selectedbillPercentageLabel.text = "+\(percentLabel)%"
let tipAmount = billAmount * tipPercentage
let totalAmount = billAmount + tipAmount
let roundedTotalAmount = round(totalAmount * 100)/100
totalLabel.text = "$\(roundedTotalAmount)"
let splitSelected = Double(splitValueSlider.value)
let intsplitSelected = Int(splitSelected)
splitLabel.text = "\(intsplitSelected)"
let splitDollarAmount = roundedTotalAmount/splitSelected
let roundedSplitDollarAmount = round(splitDollarAmount * 100)/100
splitAmount.text = "$\(roundedSplitDollarAmount)"
Is there a way to avoid calling the method viewDidLayoutSubviews() when any data is entered in the app.
animated gif
Rather than avoiding calling viewDidLayourSubviews, you could add a simple boolean flip to show your animation only once. Add a boolean property that you initialize to false; show animation on condition of this property being false, and flip the boolean after the animation has been shown.
var animationHasBeenShown = false // class property
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
if !animationHasBeenShown {
UIView.animateWithDuration(0.8, delay: 0.0,
options: [.CurveEaseOut], animations: {
self.billView.center.y = 210 }, completion: nil)
print(billView.center.y)
animationHasBeenShown = true
}
}
Alternatively, consider placing your animation in another context; does it really need to be in viewDidLayoutSubviews() (depends on the context of your app, but possibly rather in viewDidAppear()?)
Im trying to make a small game. And there is some problem with the animation. Im new to Swift. So lets take a look. I create a UIImageView picture and want to do animation of this picture appear in a different places on a screen. I believe that the algorithm will look like this:
Infinite loop{
1-GetRandomPlace
2-change opacity from 0 to 1 and back(with smooth transition)
}
Looks simple, but I can't understand how to do it correctly in Xcode.
Here is my test code but it looks useless
Thank you for help and sorry if there was already this question, I can't find it.
class ViewController: UIViewController {
#IBOutlet weak var BackgroundMainMenu:UIImageView!
#IBOutlet weak var AnimationinMenu: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
// MoveBackgroundObject(AnimationinMenu)
// AnimationBackgroundDots(AnimationinMenu, delay: 0.0)
// self.AnimationinMenu.alpha = 0
//
// UIImageView.animateWithDuration(3.0,
// delay: 0.0,
// options: UIViewAnimationOptions([.Repeat, .CurveEaseInOut]),
// animations: {
// self.MoveBackgroundObject(self.AnimationinMenu)
// self.AnimationinMenu.alpha = 1
// self.AnimationinMenu.alpha = 0
// },
// completion: nil)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
override func viewWillAppear(animated: Bool) {
AnimationBackgroundDots(AnimationinMenu, delay: 0.0)
}
func ChangeOpacityto1(element: UIImageView){
element.alpha = 0
UIView.animateWithDuration(3.0) {
element.alpha = 1
}
}
func ChangeOpacityto0(element: UIImageView){
element.alpha = 1
UIView.animateWithDuration(3.0){
element.alpha = 0
}
}
func AnimationBackgroundDots(element: UIImageView, delay: Double){
element.alpha = 0
var z = 0
while (z<4){
MoveBackgroundObject(AnimationinMenu)
UIImageView.animateWithDuration(3.0,
animations: {
element.alpha = 0
element.alpha = 1
element.alpha = 0
},
completion: nil)
z++
}
}
func MoveBackgroundObject(element: UIImageView) {
// Find the button's width and height
let elementWidth = element.frame.width
let elementHeight = element.frame.height
// Find the width and height of the enclosing view
let viewWidth = BackgroundMainMenu.superview!.bounds.width
let viewHeight = BackgroundMainMenu.superview!.bounds.height
// Compute width and height of the area to contain the button's center
let xwidth = viewWidth - elementWidth
let yheight = viewHeight - elementHeight
// Generate a random x and y offset
let xoffset = CGFloat(arc4random_uniform(UInt32(xwidth)))
let yoffset = CGFloat(arc4random_uniform(UInt32(yheight)))
// Offset the button's center by the random offsets.
element.center.x = xoffset + elementWidth / 2
element.center.y = yoffset + elementHeight / 2
}
}
The problem is in AnimationBackgroundDots.
You are immediately creating 4 animations on the same view but only one can run at a time. What you need to do is wait until one animation is finished (fade in or fade out) before starting a new one.
Also, the animations closure is for setting the state you want your view to animate to. It looks at how your view is at the start, runs animations, then looks at the view again and figures out how to animate between the two. In your case, the alpha of the UIImageView starts at 0, then when animations runs, the alpha ends up being 0 so nothing would animate. You can't create all the steps an animation should take that way.
Want you need to do it move your view and start the fade in animation. The completion closure of fading in should start the fade out animation. The completion closure of the fading out should then start the process all over again. It could look something like this.
func AnimationBackgroundDots(element: UIImageView, times: Int) {
guard times > 0 else {
return
}
MoveBackgroundObject(element)
element.alpha = 1
// Fade in
UIView.animateWithDuration(3.0, animations: {
element.alpha = 1
}, completion: { finished in
// Fade Out
UIView.animateWithDuration(3.0, animations: {
element.alpha = 0
}, completion: { finished in
// Start over again
self.AnimationBackgroundDots(element, times: times-1)
})
})
}
You called also look at using keyframe animations but this case is simple enough that theres no benefit using them.
Also as a side note. The function naming convention in swift is to start with a lowercase letter, so AnimationBackgroundDots should be animationBackgroundDots.
I'm building a small app with Swift where I want to achieve following:
- MapView with several Annotations
- Click on one of the annotations shows some Details in an overlay that is moving in from the bottom and fill approx. half of the screen
- The upper half of the display still shows the MapView. A click on the map closes the details
Now I've read a lot about different possibilities. First I've tried using a ContainerView with something like this:
#IBOutlet weak var detailsContainerYPosition: NSLayoutConstraint!
func mapView(mapView: MKMapView!, didSelectAnnotationView view: MKAnnotationView!) {
UIView.animateWithDuration(0.3, delay: 0.0, options: UIViewAnimationOptions.CurveEaseOut, animations: {
self. detailsContainerYPosition.constant = 0
self.view.layoutIfNeeded()
}, completion: nil)
}
The problem with that was, that the viewDidLoad() method was only fired once and I wanted to use that to build up the Details page after passing some data to the controller class.
So next I've played around with a custom segue and cam up with this:
class DetailsSegue: UIStoryboardSegue {
override func perform() {
// Assign the source and destination views to local variables.
var mapView = self.sourceViewController.view as UIView!
var detailsView = self.destinationViewController.view as UIView!
// Get the screen width and height.
let screenWidth = UIScreen.mainScreen().bounds.size.width
let screenHeight = UIScreen.mainScreen().bounds.size.height
// Specify the initial position of the destination view.
detailsView.frame = CGRectMake(0.0, screenHeight, screenWidth, 140)
// Access the app's key window and insert the destination view above the current (source) one.
let window = UIApplication.sharedApplication().keyWindow
window?.insertSubview(detailsView, aboveSubview: mapView)
// Animate the transition.
UIView.animateWithDuration(0.4, animations: { () -> Void in
detailsView.frame = CGRectOffset(detailsView.frame, 0.0, -140)
}, completion: nil)
}
}
This seems to be the better solution because I could send some data to the new controller within the prepareForSegue() function AND the viewDidLoad() method is fired every time this segue is initiated but now I'm struggling:
- Everytime the annotation is clicked and the segue is called, a new View is inserted. But if ONE detail view is already visible, I would like to just update this one
- I can't find any way to unwind this segue when didDeselectAnnotationView is called from the MapView.
But perhaps anybody here has even a better way to achieve an UI like this.
I've finally managed to get what I wanted by manually adding a ViewController and a view like this:
let detailsWidth: CGFloat = view.bounds.width
let detailsHeight: CGFloat = 150
let detailsViewFrame: CGRect = CGRectMake(0, view.bounds.height, detailsWidth, detailsHeight)
detailsController = storyboard?.instantiateViewControllerWithIdentifier("details") as! DetailsViewController
detailsController.descriptionText = "I'm a text that was passed from the MainViewController"
self.addChildViewController(detailsController)
detailsController.view.frame = detailsViewFrame
view.addSubview(detailsController.view)
detailsController.didMoveToParentViewController(self)
And when dismissing the Details, I remove the Controller like this:
self.detailsController.removeFromParentViewController()
I created a small sample to demonstrate my solution:
https://github.com/flavordaaave/iOS-Container-View-Overlay