How to animate UIButton frame from left to right and reverse - ios

My current method is to add a view to the button as subview:
let button = UIButton(frame: CGRect(x: 0, y: 0, width: 0, height: 60))
button.setTitle("Add", for: .normal)
buttonView = UIView(frame: CGRect(x: 0, y: 0, width: 0, height: 60))
buttonView.backgroundColor = .black
button.addSubview(buttonView)
And then animate the width of the view:
UIView.animate(withDuration: 0.3, delay: 0.0, options: .curveEaseIn, animations: {
self.buttonView.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 60)
}, completion: nil)
What I don't like about this is that the button title remains static. I want it to be part of the animation.
I also try to animate the frame of the button instead, but it doesn't seem to work. Nothing happens.
My button is added to the UITextField inputAccessoryView so I am not sure if this is the problem.
Any suggestions how can I animate the button correctly ?

You don't need an additional subview for UIButton in order to animate it's frame.
Try to add layoutIfNeeded() before animation and inside animation closure:
let button = UIButton(frame: CGRect(x: 0, y: 0, width: 60, height: 60))
button.setTitle("Add", for: .normal)
button.setTitleColor(UIColor.green, for: .normal)
button.backgroundColor = UIColor.black
view.addSubview(button)
button.layoutIfNeeded()
UIView.animate(withDuration: 3, delay: 0.0, options: .curveEaseIn, animations: {
button.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 60)
button.layoutIfNeeded()
}, completion: nil)
Hope this helps.

Related

Why my UILabel doesn't conforms to the inital frame?

I'm trying to create a popup label over the imageview. But in my application it doesn't work. I've made a test application with the same screen: UIImageView and below a UIView with a UIButton on the view.
So, where are two questions.
What could be difference in a code for such a different behaviour?
Why in my application the UILabel doesn't conforms to the initial frame?
The code of the function inside my viewController is the same:
private func showBanner(startY: CGFloat, targetView: UIView) {
let height: CGFloat = 42
let finishY = startY - height
let bannerLabel = UILabel(frame: CGRect(x: 0, y: startY, width: self.view.frame.width, height: height))
bannerLabel.translatesAutoresizingMaskIntoConstraints = false
bannerLabel.font = UIFont.systemFont(ofSize: 13, weight: .regular)
bannerLabel.textColor = .lightGray
bannerLabel.backgroundColor = .black
bannerLabel.textAlignment = .center
bannerLabel.numberOfLines = 1
bannerLabel.text = "You've added the item to the favorites"
targetView.addSubview(bannerLabel)
UIView.animate(withDuration: 0.5, animations: {
bannerLabel.frame = CGRect(x: 0,
y: finishY,
width: self.view.frame.width,
height: height
)
}) {
_ in
UIView.animate(withDuration: 0.5, delay: 1.0, options: .curveLinear, animations: {
bannerLabel.frame = CGRect(x: 0,
y: startY,
width: self.view.frame.width,
height: height
)
}, completion: {
_ in
bannerLabel.removeFromSuperview()
})
}
}
The function is being called so:
showBanner(startY: itemsImageView.frame.maxY, targetView: itemsImageView)
The problem was in the line:
bannerLabel.translatesAutoresizingMaskIntoConstraints = false
As soon as this line was removed, the problem has dissapeared.

How to create Custom Toast UIView with Button using Swift?

In my case, I am trying to create toast message popup with custom UI design like below sample image. It should be common class with button actions and it should allow to call from other ViewControllers with some message and time interval passing parameters. I am looking some initiation codebase with .XIB. Please help me to achieve this.
Expected Toast UI
It is not tested but it might help you
func showToast(message : String) {
// add label
let toastLabel = UILabel(frame: CGRect(x: 30, y: self.view.frame.size.height-150, width: 330, height: 35))
toastLabel.text = message
toastLabel.alpha = 1.0
toastLabel.layer.cornerRadius = 10;
toastLabel.clipsToBounds = true
//add button
let button = UIButton.init(type: .custom)
button.frame = CGRect.init(x: toastLabel.frame.width - 50, y: toastLabel.frame.origin.y + 20, width: 40, height: 40)
self.view.addSubview(toastLabel)
self.view.addSubview(button)
UIView.animate(withDuration: 4.0, delay: 0.1, options: .curveEaseOut, animations: {
toastLabel.alpha = 0.0
}, completion: {(isCompleted) in
toastLabel.removeFromSuperview()
})
}

Moving UIImage Up and Down with Animation in Swift

I have just recently started with Xcode and Swift and I am trying to get my image to move up and down and have it switch directions when the user taps the screen. My image just will not move at all and the app will either crash or just freeze.
import UIKit
import SpriteKit
import Darwin
let startButton = UIButton(frame: CGRect(x: 200, y: 100, width: 100, height: 50))
let screenSize = UIScreen.main.bounds
let gameButton = UIButton(frame: CGRect(x: 0, y: 0, width: screenSize.width, height: screenSize.height))
var dot: UIImage = UIImage(named: "dot")!
var dotPic = UIImageView(image: dot)
public var goingUp = true
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = .white
startButton.addTarget(self, action: #selector(startButtonAction), for: .touchUpInside)
startButton.setImage(UIImage.init(named: "startButton"), for: .normal)
self.view.addSubview(startButton)
}
func startButtonAction(sender: UIButton!) {
print("button clicked")
startButton.isEnabled = false
startButton.setImage(UIImage.init(named: "nothing"), for: .normal)
self.view.backgroundColor = .gray
dotPic.frame = CGRect(x: 50, y: 300, width: 20, height: 20)
self.view.addSubview(dotPic)
self.view.addSubview(gameButton)
playGame()
}
func playGame(){
gameButton.addTarget(self, action: #selector(gameButtonAction), for: .touchUpInside)
gameButton.setImage(UIImage.init(named: "nothing"), for: .normal)
}
func gameButtonAction(sender: UIButton!) {
goingUp = !goingUp
print(goingUp)
print("clicked up/down")
func rep(){
repeat{
dotPic.frame = CGRect(x: 50, y: 300-1, width: 20, height: 20)
sleep(UInt32(0.3))
}while goingUp==true
repeat{
dotPic.frame = CGRect(x: 50, y: 300-1, width: 20, height: 20)
sleep(UInt32(0.3))
}while goingUp==false
}
rep()
}
}
I have tried using animateWithDuration() too but it has always frozen the app. What am I doing wrong?
Tried to use this code in swift...
self.hintImageView.frame = CGRect(x: x, y: 55, width: 200, height: 40)
UIView.animate(withDuration: 0.5, delay: 0, options: [.repeat, .autoreverse] , animations: {
self.hintImageView.frame = CGRect(x: x, y: 65, width: 200, height: 40);
}) { (completed) in
}
Here, Try this, instead of func rep() in your gameButtonAction :
[UIView animateWithDuration:duration delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
//code with animation
dotPic.frame = CGRect(x: 50, y: 300-1, width: 20, height: 20)
} completion:^(BOOL finished) {
//code for completion
dotPic.frame = CGRect(x: 50, y: 300, width: 20, height: 20)
}];
and avoid using nested function rep() in your target. Probably it is running continuously causing your application to hang.

Cannot animate UIImageview

My issue is that when I press the button that runs the dealToPlayer function(), everything acts as if a card has been dealt, updates total value of cards dealt, but it does not show any animation of the card being dealt or placed. Why might this be? I am not using auto layout for this scene at all.
func dealToPlayer() {
let index = Int(arc4random_uniform(UInt32(deckCards.count)))
let drawnCard = deckCards.remove(at: index)
randomCards.append(drawnCard)
randomCard = randomCards[3 + cardSelect]
image = UIImageView(frame: CGRect(x: self.deckLocation.x, y: self.deckLocation.y, width: self.width, height: self.height))
image.image = mapping[randomCard]
cardsOut = cardsOut + 1
print("cards out is currently: \(cardsOut)")
cardSelect = cardSelect + 1
UIView.animate(withDuration: 0.5, delay: 1.5, options: [], animations: {
self.image.frame = CGRect(x: self.cardTwoLocation.x - (self.cardsOut * self.thirdWidth), y: self.cardTwoLocation.y, width: self.width, height: self.height)
}, completion: nil)
checkPlayerValue()
}
First, make sure your image view is added to your view controller.
Second, make sure your animation is called by putting a break point.
Third, print out the location and make sure the new x and y are valid, and they are different than the previous x and y.
Here is a sample duplicate of your code an it works fine
image = UIImageView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
image.backgroundColor = .red
self.view.addSubview(image)
UIView.animate(withDuration: 0.5, delay: 1.5, options: [], animations: {
self.image.frame = CGRect(x: 200, y: 200, width: 100, height: 100)
}, completion: nil)

UIView.animateWithDuration swift loop animation

In ViewController.Swift I managed to make a box animate from one point to another. I thought it would be easy to loop this so the box will animate to one point and then animate back to its original position and then loop again. I have managed to move the object to a position and in "complete" move it back again, but that doesn't make i loop. How can this be achieved?
I thought maybe this could work but i honestly don't know:
let boxmoves = [CGRect(x: 120, y: 220, width: 100, height: 100), CGRect(x: 120, y: 120, width: 100, height: 100)]
for boxmove in boxmoves {
coloredSquare.frame = boxmove
}
How could I center it based on the device-width (I assume there are some math involved?)?
My code:
let coloredSquare = UIView()
coloredSquare.backgroundColor = UIColor.blueColor()
coloredSquare.frame = CGRect(x: 120, y: 120, width: 100, height: 100)
self.view.addSubview(coloredSquare)
// found repeate but this will not animate as I want.
//UIView.animateWithDuration(2.0, delay: 0.2, options: UIViewAnimationOptions.Repeat, animations: {
UIView.animateWithDuration(2.0, animations: {
coloredSquare.frame = CGRect(x: 120, y: 220, width: 100, height: 100)
}, completion: { finished in
UIView.animateWithDuration(2.0, animations: {
coloredSquare.frame = CGRect(x: 120, y: 120, width: 100, height: 100)
})
})
No need to do the completion block approach, just use the animation options argument:
updated for Swift 3.0
UIView.animate(withDuration: 2.0, delay: 0, options: [.repeat, .autoreverse], animations: {
coloredSquare.frame = CGRect(x: 120, y: 220, width: 100, height: 100)
}, completion: nil)
If for any reason you want to stop the animation later, just use:
coloredSquare.layer.removeAllAnimations()
UIView.animate(withDuration: 3.0,
delay: 0.0,
options: [.curveLinear, .repeat],
animations: { () -> Void in
coloredSquare.frame = CGRect(x: 120, y: 220, width: 100, height: 100)
}, completion: { (finished: Bool) -> Void in
})

Resources