How to move vibrant text up in iOS?

Question

I want to make an app that says hello in the center of the view, waits a few seconds and animates to the top (kind of like a login view you'd see in many apps)

No matter what I try, I cannot keep the text centered in the x axis. Could you look into my code and tell what the mistake is?

Thank you

    // Blur Effect
    var blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Light)
    var blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = view.bounds
    view.addSubview(blurEffectView)

    // Vibrancy Effect
    var vibrancyEffect = UIVibrancyEffect(forBlurEffect: blurEffect)
    var vibrancyEffectView = UIVisualEffectView(effect: vibrancyEffect)
    vibrancyEffectView.frame = view.bounds

    // Add label to the vibrancy view

    vibrancyEffectView.contentView.addSubview(vibrantLabel)

    vibrantLabel.textAlignment = NSTextAlignment.Center


    // Add the vibrancy view to the blur view
    blurEffectView.contentView.addSubview(vibrancyEffectView)


    UIView.animateWithDuration(1, delay: 1, options: .CurveEaseIn, animations: {() -> Void in

        self.vibrantLabel.frame = CGRectMake(0, 100, self.vibrantLabel.frame.width, self.vibrantLabel.frame.height)
        }, completion: {(finished: Bool) -> Void in
            self.view.alpha = 1
    })

alternatively move the underlaying layer. set self.vibrantLabel.layer.anchorPoint to {0.5,0.5} then simply move the self..vibrantLabel.layer.position = {x,y} — Nicolas Manzini, Apr 12 '16 at 08:36

score 0 · Answer 1 · answered Apr 12 '16 at 08:32

0

To solve your issue, just keep the x origin of your label during the animation. Please try this line:

self.vibrantLabel.frame = CGRectMake(self.vibrantLabel.frame.origin.x, 100, self.vibrantLabel.frame.width, self.vibrantLabel.frame.height)

You were setting the origin on the x-axis to zero, so your label was animating left aligned to its parent view.

answered Apr 12 '16 at 08:32

Martino Lessio

775
1
9
17

Sorry, this didn't work. I think the problem is with vibrancyEffectView. When I don't add the label to the vibrancyEffectView as a subview, the label's position is correct; however, when I add it as a subview, it defaults the label to the left of the screen. – Kerem Yılmaz Apr 12 '16 at 14:03

score 0 · Answer 2 · answered Apr 12 '16 at 19:38

Found the solution. I needed to set the initial position in viewDidLayoutSubviews() and then animate in viewDidAppear()

@IBOutlet var vibrantLabel: UILabel!

override func viewDidLoad() {
    super.viewDidLoad()
    // Blur Effect

    var blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Light)
    var blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = view.bounds
    view.addSubview(blurEffectView)

    // self.vibrantLabel.layer.anchorPoint = (CGPointMake(-0.25, -2.65))

    // Vibrancy Effect
    var vibrancyEffect = UIVibrancyEffect(forBlurEffect: blurEffect)
    var vibrancyEffectView = UIVisualEffectView(effect: vibrancyEffect)
    vibrancyEffectView.frame = view.bounds

    // Add label to the vibrancy view

    view.addSubview(vibrantLabel)

    vibrantLabel.textAlignment = NSTextAlignment.Center

    // Add the vibrancy view to the blur view
    blurEffectView.contentView.addSubview(vibrancyEffectView)

}

override func viewDidLayoutSubviews() {


    vibrantLabel.center = CGPointMake(view.frame.midX, view.frame.midY)

}

override func viewDidAppear(animated: Bool) {

    UILabel.animateWithDuration(1.25, delay: 1, options: .CurveEaseInOut, animations: {

        self.vibrantLabel.center = CGPointMake(self.view.frame.midX, 100)

        }) { (Bool) in

            print("success")

    }


}

How to move vibrant text up in iOS?

2 Answers2