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)
Related
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.
This is a simple function I am using for animating a view from top to bottom and vice versa (if is top to bottom animation and else is bottom to top animation) :
#objc func openMenu(sender: UIButton) {
if sender.tag == 1 {
self.buttonView.tag = 2
self.moduleView = ModulesCollectionView(frame: CGRect(x: 0, y: self.frame.origin.y + self.frame.size.height + 20, width: UIScreen.main.bounds.size.width, height: 0), collectionViewLayout: UICollectionViewLayout())
self.window?.addSubview(self.moduleView)
UIView.animate(withDuration: 0.7, animations: {
self.moduleView.frame = CGRect(x: 0, y: self.frame.origin.y + self.frame.size.height + 20, width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.height - self.frame.size.height - 22)
}, completion: { _ in
})
} else {
self.buttonView.tag = 1
UIView.animate(withDuration: 3, animations: {
self.moduleView.frame = CGRect(x: 0, y: self.frame.origin.y + self.frame.size.height + 20, width: UIScreen.main.bounds.size.width, height: 0)
}, completion: { _ in
self.moduleView.removeFromSuperview()
})
}
}
Top animation works fine and the view is animated from top to bottom pleasantly in 0.7 seconds. However, bottom to top animation does not happen. The view is removed instantly. This is the result I am getting :
But I want the animation to be clean while going from bottom to top as well. Just like here.
Secondary : What I finally plan to achieve is PullUpController with the exact reverse animation. So if anyone knows a similar library (pull down drag) can share there inputs.
Update : The issue is coming only with UICollectionView. I replaced collectionView with a simple UIView and it worked perfect.
You should try to use layoutSubViews() method after at the end of animation block. Change the animation block like this.
For if block:
self.moduleView.frame = CGRect(x: 0, y: self.frame.origin.y + self.frame.size.height + 20, width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.height - self.frame.size.height - 22)
self.moduleView.layoutSubviews()
For else block:
self.moduleView.frame = CGRect(x: 0, y: self.frame.origin.y + self.frame.size.height + 20, width: UIScreen.main.bounds.size.width, height: 0)
self.moduleView.layoutSubviews()
Here is example code, hope it will help.
Show view:
self.containerView = ModulesCollectionView(frame: UIScreen.main.bounds)
self.containerView.center = CGPoint(x: self.view.center.x,
y: self.view.center.y + self.view.frame.size.height)
self.window?.addSubview(self.moduleView)
self.window?.bringSubview(toFront: self.moduleView)
self.window?.endEditing(true)
UIView.animate(withDuration: 0.3, delay: 0.0,
usingSpringWithDamping: 0.7, initialSpringVelocity: 3.0,
options: .allowAnimatedContent, animations: {
self.moduleView.center = self.view.center
}) { (isFinished) in
self.view.layoutIfNeeded()
}
hide view:
UIView.animate(withDuration: 0.7, delay: 0.0,
usingSpringWithDamping: 1, initialSpringVelocity: 1.0,
options: .allowAnimatedContent, animations: {
self.moduleView.center = CGPoint(x: self.view.center.x,
y: self.view.center.y + self.view.frame.size.height)
}) { (isFinished) in
self.moduleView.removeFromSuperview
}
I'm trying to make a cool launch screen but it's a little bit hard. I would like to make my image appear the way this appears:
what I would like
But for the moment the only animation I succeeded to do is this:
what I've made
The image I use is a PNG with transparent border and the yellow drawing.
The code I use to have the animation I have
( "yellowSide" is actually the name of the outlet from the imageView that hold my image with the yellow drawing):
func animation() {
yellowSide.frame = CGRect(x: yellowSide.frame.origin.x, y: yellowSide.frame.origin.y, width: 0, height: 47)
yellowSide.alpha = 0
UIView.animate(withDuration: 0.5, delay: 2.0, options: .curveEaseIn, animations: {
var yellowSideFrame = self.yellowSide.frame
self.yellowSide.frame = CGRect(x: yellowSideFrame.origin.x, y: yellowSideFrame.origin.y, width: 243, height: 47)
self.yellowSide.alpha = 1
}, completion: nil)
}
As you guess the width / value I enter are the value that I need to have so the image looks the way I want when it's fully appeared.
You are changing the frame but you are not clipping out of frame image . you need to do like below .
// in ViewDidLoad method
yellowSide.clipsToBounds=true
func animation() {
yellowSide.frame = CGRect(x: yellowSide.frame.origin.x, y: yellowSide.frame.origin.y, width: 0, height: 47)
yellowSide.alpha = 0
UIView.animate(withDuration: 0.5, delay: 2.0, options: .curveEaseIn, animations: {
var yellowSideFrame = self.yellowSide.frame
self.yellowSide.frame = CGRect(x: yellowSideFrame.origin.x, y: yellowSideFrame.origin.y, width: 243, height: 47)
self.yellowSide.alpha = 1
}, completion: nil)
}
I want an imageView in my viewController to "pulsate", that means become bigger and then tinier again and repeat that until the "start"-button was pressed. The problem is, that every time I call that function in the viewDidLoad() with a repeat-while-loop, it has got a breakpoint for whatever reason.
That's the part of my viewDidLoad():
repeat {
pulsate()
} while hasStarted == false
When I press the start button, hasStarted becomes true and it should stop pulsating. But it doesn't even start the function, it immediately calls an error. Where's the problem?
Here's my pulsate()-function
func pulsate()
{
frameOR = imageView.frame
frameNext = CGRect(x: imageView.frame.midX - 35, y: imageView.frame.midY - 35, width: 80, height: 80)
let frameVDL = CGRect(x: imageView.frame.midX - 150, y: imageView.frame.midY - 150, width: 300, height: 300)
if start == false
{
UIView.animate(withDuration: 2, animations: {
self.imageView.frame = frameVDL
}) { (finished) in
UIView.animate(withDuration: 2, animations: {
self.imageView.frame = self.frameOR
}, completion: nil)
}
}
}
Thank your for your help! Have a great day!
You can use UIView.animate's built-in options to really simplify what you're trying to do, and avoid locking up the thread.
Give this a try:
let frameOR = imageView.frame
let frameVDL = CGRect(x: imageView.frame.midX - 150, y: imageView.frame.midY - 150, width: 300, height: 300)
UIView.animate(withDuration: 2.0,
delay: 0.0,
options: [UIViewAnimationOptions.autoreverse, UIViewAnimationOptions.repeat],
animations: {
imageView.frame = frameVDL
},
completion: nil)
Your imageView should now be in a full "pulsing" loop, without needing any additional code. When you're ready to stop the animation, just call:
imageView.layer.removeAllAnimations()
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
})