swiftxcodeglow

How do you do successive animations?


enter image description here

I’m wanting to do successive animations, like one after another instead of on a loop or one at a time. What does it look like when coding that?

Example: fade in @ 100% opacity, then fade out @ 20% opacity, then fade in 80%, then fade out 10%... so like a pulsing then at 0% change the label text and do the inverse (basically the same as the picture only every time I try and make it progressively fade out- it disrupts the whole animation)

The gif shows it's current state, not what I've tried thus far that didnt work.

import UIKit

    class Belief2ViewController: UIViewController {
        @IBOutlet var negBeliefLabelGlower: UILabel!
        @IBOutlet var posBeliefLabelGlower: UILabel!
        @IBOutlet var labelNegBeliefFinal: UILabel!
        @IBOutlet var startButton: UIButton!
    
    
    
    
    
    
    
    //PASSING INFO
       var negBeliefLabelGlowerText = String()
    var posBeliefLabelGlowerText = String()
        
        

        override func viewDidLoad() {
            super.viewDidLoad()
            
            
    //PASSING INFO
           negBeliefLabelGlower.text = negBeliefLabelGlowerText
            posBeliefLabelGlower.text = posBeliefLabelGlowerText
        
            
            
            //PASSING INFO
                    
                    labelNegBeliefFinal.text = negBeliefLabelGlowerText
            //GLOW
                 labelNegBeliefFinal.UILableTextShadow(color: UIColor.systemTeal)
                
                
            //AniamtionOpacityLOOP
            labelNegBeliefFinal.alpha = 0.3
    //                            UIView.animate(withDuration: 5, animations: {self.labelNegBeliefFinal.alpha = 100}, completion: { _ in self.labelNegBeliefFinal.alpha = 90;})
                UIView.animate(withDuration: 6, delay: 0, options: [.autoreverse, .repeat], animations: { self.labelNegBeliefFinal.alpha = 100 })
                
            
            
             //AnimationBreathSizeLOOP
            UIView.animate(withDuration: 6, delay: 0, options: [.autoreverse, .repeat], animations: { self.labelNegBeliefFinal.transform = CGAffineTransform(scaleX: 1.3, y: 1.3) })
            
        }
    
    
    @IBAction func startButtonPress(_ sender: Any) {
        
        //self.labelNegBeliefFinal.text = self.posBeliefLabelGlowerText
//        UIView.animate(withDuration: 10, animations: {self.labelNegBeliefFinal.alpha = 0}, completion: { _ in self.labelNegBeliefFinal.text = self.posBeliefLabelGlowerText;})
        UIView.animate(withDuration: 10, delay: 0, animations: {self.labelNegBeliefFinal.alpha = 0}, completion: { _ in
                        self.labelNegBeliefFinal.text = self.posBeliefLabelGlowerText ;})
        //
        
    
    }
    
    
}
//GLOW
extension UILabel {
   func UILableTextShadow1(color: UIColor){
    textColor = UIColor.systemTeal
   layer.shadowColor = UIColor.systemTeal.cgColor
      layer.masksToBounds = false
    layer.shadowOffset = .zero
    layer.shouldRasterize = true
     layer.rasterizationScale = UIScreen.main.scale
      layer.shadowRadius = 5.0
      layer.shadowOpacity = 5.0
    }
    
}

EDIT

Okay so using the keyframes as suggest was a perfect suggestion but I am running into a bit of an issue. I cannot key in the label text to change

UIView.animateKeyframes(withDuration: 15.0,
                                    delay: 0.0,
                                            options: [],
                                            animations: {
                                                
                                                UIView.addKeyframe(withRelativeStartTime: 1,
                                    relativeDuration: 0.0,
                                    animations: { self.labelNegBeliefFinal.text = self.posBeliefLabelGlowerText })
                    },
                                            completion: nil)

Solution

  • So I wasn't able to incorporate the label into the keyframe animation so I just set a delay to the bale changing and it took a little tweaking but here is what I came up with

    //CHANGE LABEL ON TIMER
    DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 13.5) 
    { [self] in
    self.labelNegBeliefFinal.text = self.posBeliefLabelGlowerText
    }
                   
                
            
            
            
            
            
            
    

    Here is the glow loop and size loop as before, unrelated to the tween

    //AniamtionGlowLOOP
           
    UIView.animate(withDuration: 6, delay: 0, options: [.autoreverse, .repeat], 
    animations: { self.labelNegBeliefFinal.layer.shadowOpacity = 5.0 })
    
            
            
    //AnimationBreathSizeLOOP
    UIView.animate(withDuration: 6, delay: 0, options: [.autoreverse, .repeat], 
    animations: { self.labelNegBeliefFinal.transform = CGAffineTransform(scaleX: 
    1.3, y: 1.3) })
            
    // }
    

    Here is the tween code I came up with thanks to Matt for the point in the right direction. Had no idea you could tween in SwiftUI. One thing that threw me off is that if the duration is 30sec, relative duration being set to 0.5 is equal to 15 seconds as it's 0.5 of 30 seconds. Some of my tweens didn't seem to work because I didn't realize that.

    UIView.animateKeyframes(withDuration: 30.0,
                                    delay: 0,
                                    options: [ ],
                                    animations: {
    
                                    
                                        UIView.addKeyframe(withRelativeStartTime: 
    0,
                       relativeDuration: 0.5,
                       animations: { self.labelNegBeliefFinal.alpha = 0 })
                                        
                                        
                                        UIView.addKeyframe(withRelativeStartTime: 
    0.5,
                       relativeDuration: 0.5,
                       animations: { self.labelNegBeliefFinal.alpha = 1 })
                                        
    
            },
                                    completion: nil)
        
            
        
    
        }
    
    
    }
    

    Glow style I got from a different post

    //GLOW
    extension UILabel {
    func UILableTextShadow1(color: UIColor){
    textColor = UIColor.systemTeal
    layer.shadowColor = UIColor.systemTeal.cgColor
    layer.masksToBounds = false
    layer.shadowOffset = .zero
    layer.shouldRasterize = true
    layer.rasterizationScale = UIScreen.main.scale
    layer.shadowRadius = 5.0
    layer.shadowOpacity = 00.7
        }
    
    
    
    
    
    }