Timing parameter for render a new color set

[JLightMedia]

Hi. Is there any way to change timing parameter for render a new color set? Now it's executed with lite fade, but sometimes I need to change color immediately. For example in viewDidAppear method, for prepare UI.

[fxm90]

Hey @JLightMedia, the animation might be introduced by the default implicit animation duration of CALayer.

Can you please try wrapping the call for changing the colors inside a CATransaction? E.g. something like this:

        CATransaction.begin()
        CATransaction.setAnimationDuration(0)

        gradientProgressBar.gradientColors = [...]

        CATransaction.commit()

[JLightMedia]

Wow! It works! Thanks! But I've noticed one bad feature. When I change of color quantity for gradient, it renders without any fade, even I use 3 seconds for transition. If prevues color set have the same number of colours transition work fine. Do you know why is that? And is there any way to fix that?

[fxm90]

@JLightMedia Can you please provide some example code? :)

[JLightMedia]

let solidColorElements: [Color] = [Color(name: "Red", color: [.red, .red], id: 0),
                                 Color(name: "Green", color:[.green, .green], id: 1),
                                 Color(name: "Blue", color: [.blue, .blue], id: 2),
                                 Color(name: "Yellow", color: [.yellow, .yellow], id: 3),
                                 Color(name: "Turquoise", color: [UIColor(red: 0, green: 1, blue: 0.8, alpha: 1), UIColor(red: 0, green: 1, blue: 0.8, alpha: 1)], id: 4),
                                 Color(name: "Violet", color: [.purple, .purple], id: 5),
                                 Color(name: "Orange", color: [.systemOrange, .systemOrange], id: 6),
                                 Color(name: "Cyan", color: [.cyan, .cyan], id: 7),
                                 Color(name: "Pink", color: [.systemPink, .systemPink], id: 8),
                                 Color(name: "White", color: [.white, .white], id: 9),
                                 Color(name: "Warm White", color: [UIColor(red: 1, green: 0.8, blue: 0.6, alpha: 1), UIColor(red: 1, green: 0.8, blue: 0.6, alpha: 1)], id: 10),
                                 Color(name: "Blue Red", color: [.blue, .red], id: 11),
                                 Color(name: "Red Green", color: [.red, .green], id: 12),
                                 Color(name: "Violet Orange", color: [.purple, .systemOrange], id: 13),
                                 Color(name: "Green Pink", color: [.green, .systemPink], id: 14),
                                 Color(name: "Green Yellow", color: [.green, .yellow], id: 15),
                                 Color(name: "Blue Green", color: [.blue, .green], id: 16),
                                 Color(name: "Pink Orange", color: [.systemPink, .systemOrange], id: 17),
                                 Color(name: "Blue Pink", color: [.blue, .systemPink], id: 18),
                                 Color(name: "Lumind", color: [UIColor(red: 0, green: 1, blue: 0.8, alpha: 1), .systemOrange], id: 19),
                                 Color(name: "Violet Turquoise", color: [.purple, UIColor(red: 0, green: 1, blue: 0.8, alpha: 1)], id: 20),
                                 Color(name: "Red Yellow", color: [.red, .yellow], id: 21),
                                 Color(name: "Blue Green", color: [.blue, .green], id: 22),
                                 Color(name: "Red White", color: [.red, .white], id: 23),
                                 Color(name: "Green White", color: [.green, .white], id: 24),
                                 Color(name: "Blue White", color: [.blue, .white], id: 25),
                                 Color(name: "Cyan White", color: [.cyan, .white], id: 26),
                                 Color(name: "Pink White", color: [.systemPink, .white], id: 27),
                                 Color(name: "Yellow White", color: [.yellow, .white], id: 28),
                                 Color(name: "Orange Pink Blue", color: [ .systemOrange, .systemPink, .blue], id: 29),
                                 Color(name: "Yellow Pink Cyan", color: [.yellow, .systemPink, .cyan], id: 30),
                                 Color(name: "Red Green Yellow", color: [.red, .green, .yellow], id: 31),
                                 Color(name: "Pink Yellow Green", color: [.systemPink, .yellow, .green], id: 32),
                                 Color(name: "White Green Blue", color: [ .white, .green, .blue], id: 33),
                                 Color(name: "Green Blue Violet", color: [ .green, .blue, .purple], id: 34),
                                 Color(name: "Pink Blue Green", color: [.systemPink, .blue, .green], id: 35),
                                 Color(name: "Orange Turquoise Violet", color: [.systemOrange, UIColor(red: 0, green: 1, blue: 0.8, alpha: 1), .purple], id: 36),
                                 Color(name: "White Yellow Red", color: [ .white, .yellow, .red,], id: 37),
                                 Color(name: "Yellow Blue Red", color: [  .yellow, .blue, .red], id: 38),
                                 Color(name: "White Cyan Blue", color: [ .white, .cyan, .blue], id: 39),
                                 Color(name: "White Blue Red", color: [ .white, .blue, .red], id: 40),
                                 Color(name: "Rainbowl", color: [.red, .purple, .blue, .cyan, .green, .yellow, .red], id: 41)]

let colorBase = solidColorElements

func setProgressBarColor (color:[UIColor], fade: Bool){

      var fadeTime = 1.0
      if !fade {
          fadeTime = 0.0
      }
          CATransaction.begin()
          CATransaction.setAnimationDuration(fadeTime)
          progressView.gradientColorList = color
          CATransaction.commit()
  }

   func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
      
      let row = indexPath.row
      print(row)

      setProgressBarColor(color: colorBase[row].color, fade: true)        
  }

Video

Gradient progress bar is behind translucent UINavigation Bar

[fxm90]

Okay, I've been able to reproduce the issue but unfortunately I did not find a solution :/

I tried to animate changing the colors of a basic CAGradientLayer using CAAnimation, but still the animation only works for the same amount of colors. From reading the docs I assume Core Animation always interpolates between different colors and this is not possible in case you have a different amount of colors.

Not sure if this is a good work-around, but maybe you can try to always have the same amount of colors, e.g. instead of having

fromValue = [UIColor.black, UIColor.white]
fromValue = [UIColor.red, UIColor.yellow,  UIColor.yellow]

use

fromValue = [UIColor.black, UIColor.gray, UIColor.white]
fromValue = [UIColor.red, UIColor.yellow,  UIColor.yellow]

[JLightMedia]

Thank you! Yeah I see that is the most right solution. But it doesn't look good for memory optimisation. Anyway I'll try that.