快速水平和垂直对齐图像

Question

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.

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

Answer 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))

Answer 2

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:"http://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)