I'm trying to add a scale-up animation to the marker using UIView.animate() but it doesn't seem to work. Here's what I did...
class BubbleMarkerView: MarkerView {
#IBOutlet weak var gradeLabel: UILabel!
#IBOutlet weak var bubbleView: UIView!
override open func awakeFromNib() {
self.offset.x = -self.frame.size.width / 2.0
self.offset.y = -self.frame.size.height + 1.0
}
override func layoutIfNeeded() {
super.layoutIfNeeded()
bubbleView.transform = CGAffineTransform(scaleX: 0, y: 0)
UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: [], animations: { [weak self] in
self?.bubbleView.transform = .identity
}, completion: nil)
}
override func refreshContent(entry: ChartDataEntry, highlight: Highlight) {
gradeLabel.text = "\(Int(entry.y))"
layoutIfNeeded()
}
}
also I'm loading this marker from a xib like this:
let marker = BubbleMarkerView.viewFromXib() as! BubbleMarkerView
marker.chartView = self
self.marker = marker
Also tried adding CABasicAnimation to bubbleView but no luck
Anyone else faced this issue? Please advice...
Related
I have created this animation for the first screen of the app(I'm not using Launchscreen) but when the animation ends I don't know how to pass to the next view controller. I've tired by segue but nothing :/
import UIKit
class ViewController: UIViewController {
#IBOutlet weak var logoLSMini: UIImageView!
#IBOutlet weak var logoLSMini2: UIImageView!
#IBOutlet weak var logoLS: UIImageView!
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
self.logoLSMini.alpha = 0.0
self.logoLSMini2.alpha = 0.0
self.logoLS.alpha = 0.0
self.logoLS.frame.origin.y = +100
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
UIView.animate(withDuration: 5, delay: 0.0, options: .curveEaseOut , animations: {
//FIRST EFFECT
self.logoLSMini.alpha = 1.0
self.logoLSMini.transform = CGAffineTransform(rotationAngle: 360)
self.logoLSMini.transform = CGAffineTransform(scaleX: 100, y: 100)
self.logoLS.alpha = 1.0
}, completion: nil)
}
override func viewDidLoad() {
super.viewDidLoad()
}
}
You simply need to perform the segue in the completion of UIView.animate. Just make sure you substitute whatever identifier you added to your segue in Storyboard for yourSegue.
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
UIView.animate(withDuration: 5, delay: 0.0, options: .curveEaseOut , animations: {
//FIRST EFFECT
self.logoLSMini.alpha = 1.0
self.logoLSMini.transform = CGAffineTransform(rotationAngle: 360)
self.logoLSMini.transform = CGAffineTransform(scaleX: 100, y: 100)
self.logoLS.alpha = 1.0
}, completion: { _ in
self.performSegue(withIdentifier: "yourSegue", sender: nil)
})
}
Try to put the code of moving viewController in the completionHandler
UIView.animate(withDuration: 5, delay: 0.0, options: .curveEaseOut, animations: {
.....
}, completion: { (finished) in
if finished {
//Move to your next controller
DispatchQueue.main.async {
//Your code
}
}
})
I have UIImageView with moon image.
And moonImageContainerView is a superView for UIImageView
And I added swipe gesture to moonImageContainerView.
If swipe to up,
self.titleLabel.isHidden = false
UIView.animate(withDuration: 0.3, delay: 0.0, options: .curveEaseIn, animations: {
self.moonImageContainerView.transform = CGAffineTransform(scaleX: 0.5, y: 0.5)
self.moonImageContainerView.center.y = self.view.center.y
}, completion: nil)
you can see the result with gif
https://imgur.com/a/ftShkpO
And now, If I add just self.titleLabel.text = "MY TOPIA"
My animation is break.
self.titleLabel.text = "MY TOPIA" // Just added this line.
self.titleLabel.isHidden = false
UIView.animate(withDuration: 0.3, delay: 0.0, options: .curveEaseIn, animations: {
self.moonImageContainerView.transform = CGAffineTransform(scaleX: 0.5, y: 0.5)
self.moonImageContainerView.center.y = self.view.center.y
}, completion: nil)
You can see the result with gif
https://imgur.com/a/y57fPlA
Why does the moonImageContainerView disappear to the bottom?
How can I fix it?
Well, I use the rest setting and did not see your case.
import UIKit
class ImageViewController: UIViewController {
#IBOutlet var moonImageContainerView: UIView!
#IBOutlet var titleLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
let pan = UISwipeGestureRecognizer.init(target: self, action: #selector(pp(_:)))
pan.direction = .up
moonImageContainerView.addGestureRecognizer(pan)
}
#objc func pp(_ pan: UISwipeGestureRecognizer){
self.titleLabel.text = "MY TOPIA"
self.titleLabel.isHidden = false
UIView.animate(withDuration: 0.3, delay: 0.0, options: .curveEaseIn, animations: {
self.moonImageContainerView.transform = CGAffineTransform(scaleX: 0.5, y: 0.5)
self.moonImageContainerView.center.y = self.view.center.y
}, completion: nil)
}
}
I have set up 2 text by autolayouts and constraints. Now i would like to move text 1 to the right and text 2 to the left but it didnt work. Both the text should end on the center of the view (horizontally)
#IBOutlet weak var Text1: UILabel!
#IBOutlet weak var Text2: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
UIView.animate(withDuration: 5, delay: 0, options: [.beginFromCurrentState],
animations: {
self.Text1.frame.origin.x += 300
self.Text2.frame.origin.x -= 300
self.view.layoutIfNeeded()
}, completion: nil)
// Do any additional setup after loading the view.
}
Did i did anything wrong in the code?
You can use CGAffineTransform(translationX: y:) to achieve something like that:
UIView.animate(withDuration: 1.0, delay: 0.0, options: .curveEaseInOut, animations: {
self.breathingStatusLabel.transform = CGAffineTransform(translationX: self.breathingStatusLabel.bounds.origin.x + 300, y: self.breathingStatusLabel.bounds.origin.y)
}, completion: nil)
To move it back to it's originial place add this in another animation block:
self.breathingStatusLabel.transform = .identity
Note: CGAffineTransform(translationX: y:) translates the view to a provided location but it doesn't change the frame of that. So be careful about that while using this, to just animate labels you can use it.
But for example you want to move UITextFields when keyboard appears, you should change the constraints if its autolayout or change its frame. If you use CGAffineTransform(translationX: y:) you will notice that it will move the UITextField but when you tap on it nothing will work coz its frame didn't change, just the location changed.
You need to play with constraints of labels.
UIView.animate(withDuration: 5, delay: 0, options: [.beginFromCurrentState],
animations: {
//here modify constraints constant or may need to add some new constraints dynamically.
// self.Text1.frame.origin.x += 300
// self.Text2.frame.origin.x -= 300
// self.view.layoutIfNeeded()
}, completion: nil)
#IBOutlet weak var Text1: UILabel!
#IBOutlet var Text1LeftConstrin:NSLayoutConstraint!
// (Connect this with your Text1 label left constrain)
#IBOutlet weak var Text2: UILabel!
#IBOutlet var Text1LeftConstrin:NSLayoutConstraint!
//(Connect this with your Text1 label left constrain)
override func viewDidLoad() {
super.viewDidLoad()
UIView.animate(withDuration: 5, delay: 0, options: [.beginFromCurrentState],
animations: {
Text1.constant += 300
Text2.constant -= 300
self.view.layoutIfNeeded()
}, completion: nil)
// Do any additional setup after loading the view.
}
UIView.transition(with:self.yourLabel,
duration: 5.0,
options: [.autoreverse,.repeat],
animations: {
self.yourLabel.transform = CGAffineTransform(translationX: (-1 * (self.view.frame.size.width / 2) + 20), y:0)
self.yourLabel.transform = CGAffineTransform(translationX: ((self.view.frame.size.width / 2) - 20), y:0)
},
completion: nil)
Inside a UIViewController, I call a .xib file and present it over the current UIView.
// initiate the pop up ad view and display it
let popUpAdView = PopUpAdViewController(nibName: "PopUpAdView", bundle: nil)
popUpAdView.displayIntoSuperView(view)
There is a button inside that .xib file that should remove itself from the screen when it's touched. However it doesn't perform so.
What exactly am I missing?
class PopUpAdViewController: UIViewController {
#IBOutlet weak var popUpAdView: UIView!
#IBOutlet weak var closeButton: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
// adjust the view size from the device's screen size
let screenSize = UIScreen.mainScreen().bounds
view.frame = CGRectMake(0, 64, screenSize.width, screenSize.height-64)
// cosmetically adjust the view itself
view.backgroundColor = UIColor.blackColor().colorWithAlphaComponent(0.6)
view.userInteractionEnabled = true
closeButton.userInteractionEnabled = true
// style the pop up ad view
popUpAdView.layer.cornerRadius = 5
popUpAdView.layer.shadowOpacity = 0.8
popUpAdView.layer.shadowOffset = CGSizeMake(0.0, 0.0)
closeButton.addTarget(self, action: #selector(removeOutOfSuperView), forControlEvents: .TouchUpInside)
}
func displayIntoSuperView(superView: UIView!) {
superView.addSubview(self.view)
// define the initial cosmetical values of the items
popUpAdView.transform = CGAffineTransformMakeScale(0.3, 0.3)
popUpAdView.alpha = 0.0
closeButton.alpha = 0.0
// animate...
UIView.animateWithDuration(0.8, delay: 0.0, options: .CurveEaseIn, animations: {
self.popUpAdView.alpha = 1.0
self.popUpAdView.transform = CGAffineTransformMakeScale(1.0, 1.0)
}) { (Bool) in
UIView.animateWithDuration(0.6, delay: 1.5, options: .CurveEaseIn, animations: {
self.closeButton.alpha = 1.0
}, completion: { (Bool) in
})
}
}
func removeOutOfSuperView() {
UIView.animateWithDuration(0.5, delay: 0.0, options: .CurveEaseIn, animations: {
self.closeButton.alpha = 0.0
self.popUpAdView.transform = CGAffineTransformMakeScale(0.1, 0.1)
}) { (finished) in
UIView.animateWithDuration(0.8, delay: 0.0, options: .CurveEaseIn, animations: {
self.view.alpha = 0.0
self.view.removeFromSuperview()
}, completion: nil)
}
}
#IBAction func closePopUpAdView(sender: AnyObject) {
print("Closing the pop up ad...")
removeOutOfSuperView()
}
}
Update
.xib structureL:
I've had this problem before, but couldn't figure out what it is.
If I'm animating a view "standalone" in the Playground, this sort of thing looks fine, but now it just looks like in the provided GIF.
Animate it in look fine, but when I want to animate it out (scale) it just gets maxed-out size then disappears.
Here's the code that animates it:
self.circleView.transform = CGAffineTransformIdentity
UIView.animateWithDuration(0.5, delay: 0, options: [], animations: {
self.circleView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.001, 0.001);
}, completion: {
finished in
if finished {
self.resetStyle()
self.circleView.hidden = true
self.circleView.transform = CGAffineTransformIdentity
}
})
func resetStyle() {
self.circleView.transform = CGAffineTransformIdentity
self.circleView.backgroundColor = nil
self.textLabel.textColor = UIColor.blackColor()
}
Try this:
#IBOutlet weak var circleView: UIView!
#IBAction func leftAction(sender: AnyObject) {
self.circleView.layer.transform = CATransform3DMakeScale(0.001, 0.001, 1)
UIView.animateWithDuration(0.5) {
self.circleView.layer.transform = CATransform3DIdentity
}
}
#IBAction func rightAction(sender: AnyObject) {
circleView.layer.transform = CATransform3DIdentity
UIView.animateWithDuration(0.5) {
self.circleView.layer.transform = CATransform3DMakeScale(0.001, 0.001, 1)
}
}
override func viewDidLoad() {
super.viewDidLoad()
circleView.backgroundColor = .blueColor()
circleView.layer.cornerRadius = CGRectGetMidY(circleView.bounds)
}