1

enter image description here

I want to align an image in another (horizontally and vertically) to create an animation. The animation is simple: the heart will "vibrate" inside the Angry Bedou's logo, but he must be "centered" in that image.

I was trying the following: 

    func animate() {
    heartImg.frame = CGRectMake(angryBedousImg.frame.size.width / 2, angryBedousImg.frame.size.height / 2, heartImg.frame.size.width, heartImg.frame.size.height)

    let heartAnimation = CABasicAnimation(keyPath: "position")
    heartAnimation.duration = 0.09
    heartAnimation.repeatCount = .infinity
    heartAnimation.autoreverses = true
    heartAnimation.fromValue = NSValue(CGPoint: CGPointMake(heartImg.center.x - 1, heartImg.center.y))
    heartAnimation.toValue = NSValue(CGPoint: CGPointMake(heartImg.center.x + 1, heartImg.center.y))
    heartImg.layer.addAnimation(heartAnimation, forKey: "position")
        }

But it wont centralizes when i build the app. The animation works, but not the alignment. I want the alignment work in every device in portrait mode.

enter image description here

I look at the storyboard, and the images are fine. What i'm doing wrong?

rmaddy
  • 314,917
  • 42
  • 532
  • 579
Zé Moreira
  • 125
  • 1
  • 2
  • 9

2 Answers2

1

Try this :

This will make your heartImage centre to the background Image. 

    let yourImage = UIImage(named: "YourImageName")
    let heartImg = UIImageView()
    heartImg.image = yourImage
    heartImg.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(heartImg)
    self.view.addConstraint(NSLayoutConstraint(item: heartImg, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: self.yourLogoImage, attribute: NSLayoutAttribute.centerX, multiplier: 1.0, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: heartImg, attribute: NSLayoutAttribute.centerY, relatedBy: NSLayoutRelation.equal, toItem: self.yourLogoImage, attribute: NSLayoutAttribute.centerY, multiplier: 1.0, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: heartImg, attribute: NSLayoutAttribute.height, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1.0, constant: 40))
    self.view.addConstraint(NSLayoutConstraint(item: heartImg, attribute: NSLayoutAttribute.width, relatedBy: NSLayoutRelation.equal, toItem: nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier: 1.0, constant: 40))
iOS Developer
  • 85
  • 10
0

You have to use your screen midX and midY properties and subtract the image's half width and half height:

if let imageURL = NSURL(string:"https://i.stack.imgur.com/Xs4RX.jpg"), data = NSData(contentsOfURL: imageURL), image = UIImage(data: data), image2URL = NSURL(string:"https://graph.facebook.com/10203430834250391/picture?type=large"), data2 = NSData(contentsOfURL: image2URL), image2 = UIImage(data: data2) {

    let imageView = UIImageView(frame: UIScreen.mainScreen().bounds)
    imageView.image = image
    imageView.contentMode = UIViewContentMode.ScaleAspectFit

    let image2View = UIImageView(frame: CGRect(x: UIScreen.mainScreen().bounds.midX-100, y: UIScreen.mainScreen().bounds.midY-100, width: 200, height: 200))
    image2View.image = image2
    image2View.contentMode = UIViewContentMode.Center
    imageView.addSubview(image2View)
    imageView
}

If your image it is not the same size of your device screen you have to use the larger image frame midX minus the smaller image frame midX and do the same for the height:

 heartImg.frame = CGRectMake(angryBedousImg.frame.size.width / 2, angryBedousImg.frame.size.height / 2, heartImg.frame.size.width, heartImg.frame.size.height)

To

heartImg.frame = CGRectMake(angryBedousImg.frame.midX - heartImg.frame.midX, angryBedousImg.frame.midY - heartImg.frame.midY, heartImg.frame.size.width, heartImg.frame.size.height)
Leo Dabus
  • 229,809
  • 59
  • 489
  • 571
  • It didn't work. The heart image don't center in the angry bedou's image. =/ – Zé Moreira Jan 02 '16 at 03:47
  • @ZéMoreira I can't guess what you are doing wrong you need to show your code. forget about animating it now – Leo Dabus Jan 02 '16 at 03:48
  • What have i done wrong in the code that i posted first in this topic? I think this is the best answer i can get – Zé Moreira Jan 02 '16 at 03:51
  • thats not how SO works. I won't do your whole homework. Ask one question at a time. You don't even know how to position your Image in the center and you are already asking how to animate it – Leo Dabus Jan 02 '16 at 03:55
  • I'm not asking how to animate it, i already done that. In the code you can see it. My doubt is: Why the heart image don't align in the Angry image. I want to know what i did wrong in my code, because for me, it's all right. I take the heart position and make it: "heartImg.frame = CGRect(x: angryBedousImg.frame.size.width / 2, y: angryBedousImg.frame.size.height / 2, width: heartImg.frame.size.width, height: heartImg.frame.size.height) " But i don't know why, it dont align. It keeps getting a little over the center of the image – Zé Moreira Jan 02 '16 at 03:58
  • It is clear if you look at my answer the difference. Position it at the screen midX minus half width and midY - half height – Leo Dabus Jan 02 '16 at 03:59
  • i don't understand you answer. that's the problem. I'm new in Swift, i don't get the download data from the web for the example. – Zé Moreira Jan 02 '16 at 04:01
  • You can copy paste my code in a playground and use it with any two images – Leo Dabus Jan 02 '16 at 04:01
  • If your view it is not the same size of the screen, use the large image frame instead of the screen bounds – Leo Dabus Jan 02 '16 at 04:09
  • it worked in the y axis, but not in the x axis. in the x axis, i still have different positions for different devices. Another thing: when i input the UIViewContentMode.Center in the heartImg, the img expands in the run time, and take almost the entire screen – Zé Moreira Jan 02 '16 at 04:18
  • I don't think that the device would be a problem – Leo Dabus Jan 02 '16 at 04:20
  • @ZéMoreira check my last edit. You were using the wrong image frame. – Leo Dabus Jan 02 '16 at 16:45
  • Ow man, it didn't work. I was using the protocol instead. The heart keep going away from the center of the angry image. – Zé Moreira Jan 02 '16 at 17:32
  • I find this solution using protocol: func animate() { UIView.animateWithDuration(0.09, delay:0, options: [.Repeat, .Autoreverse], animations: { self.heartImg.center.x = self.heartImg.center.x - 1 }) { (completed) -> Void in UIView.animateWithDuration(0.09, delay: 0, options: .Repeat, animations: { () -> Void in self.heartImg.center.x = self.heartImg.center.x + 1 }, completion: nil) } } But i don't like. I prefer using CABasicAnimation – Zé Moreira Jan 02 '16 at 17:34
  • i think the problem is in the constraints. i'm searching for a solution in that – Zé Moreira Jan 02 '16 at 17:46
  • http://stackoverflow.com/questions/27153181/how-do-you-make-a-background-image-scale-to-screen-size-in-swift/27220627#27220627 – Leo Dabus Jan 02 '16 at 17:52
  • i manage to make the heart image works right in the y axis in every device: heartImg.frame.origin.y = angryBedousImg.bounds.midY + heartImg.bounds.height / 2 But i can't find a solution to make the x axis works – Zé Moreira Jan 02 '16 at 18:37
  • Create a new project with those 2 images I can fix it for you – Leo Dabus Jan 02 '16 at 18:39