Recherche…


Syntaxe

  • CAGradientLayer () // Retourne un objet CALayer initialisé.
  • CAGradientLayer (layer: layer) // Remplace pour copier ou initialiser des champs personnalisés du calque spécifié.

Paramètres

Paramètre Détails
Couleur Un tableau d'objets CGColorRef définissant la couleur de chaque arrêt de dégradé. Animable
Emplacements Un tableau facultatif d'objets NSNumber définissant l'emplacement de chaque arrêt de dégradé. Animable
endPoint Le point final du dégradé lorsqu'il est dessiné dans l'espace de coordonnées du calque. Animable
point de départ Le point de départ du dégradé lorsqu'il est dessiné dans l'espace de coordonnées du calque. Animable
type Style de dégradé dessiné par le calque. La valeur par défaut est kCAGradientLayerAxial .

Remarques

  • Utilisez startPoint et endPoint pour modifier l'orientation de CAGradientLayer .
  • Utilisez les locations pour affecter la répartition / les positions des couleurs.

Créer un CAGradientLayer

// View to hold the CAGradientLayer.
let view: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 320))
    
// Initialize gradient layer.
let gradientLayer: CAGradientLayer = CAGradientLayer()
    
// Set frame of gradient layer.
gradientLayer.frame = view.bounds
   
// Color at the top of the gradient.
let topColor: CGColor = UIColor.red.cgColor
    
// Color at the bottom of the gradient.
let bottomColor: CGColor = UIColor.yellow.cgColor
    
// Set colors.
gradientLayer.colors = [topColor, bottomColor]
    
// Set locations of the colors.
gradientLayer.locations = [0.0, 1.0]
    
// Insert gradient layer into view's layer heirarchy.
view.layer.insertSublayer(gradientLayer, at: 0)

Résultat :

Simple CAGradientLayer.

Créer un CGGradientLayer avec plusieurs couleurs.

// View to hold the CAGradientLayer.
let view: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 320))
    
// Initialize gradient layer.
let gradientLayer: CAGradientLayer = CAGradientLayer()
    
// Set frame of gradient layer.
gradientLayer.frame = view.bounds
    
// Color at the top of the gradient.
let topColor: CGColor = UIColor.blue.cgColor
    
// Color at the middle of the gradient.
let middleColor: CGColor = UIColor.yellow.cgColor
    
// Color at the bottom of the gradient.
let bottomColor: CGColor = UIColor.green.cgColor
    
// Set colors.
gradientLayer.colors = [topColor, middleColor, bottomColor]
    
// Set locations of the colors.
gradientLayer.locations = [0.0, 0.5, 1.0]
    
// Insert gradient layer into view's layer heirarchy.
view.layer.insertSublayer(gradientLayer, at: 0)

Résultat :

CAGradientLayer complexe.

Créer un CAGradientLayer horizontal.

// View to hold the CAGradientLayer.
let view: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 320))

// Initialize gradient layer.
let gradientLayer: CAGradientLayer = CAGradientLayer()

// Set frame of gradient layer.
gradientLayer.frame = view.bounds

// Color at the top of the gradient.
let topColor: CGColor = UIColor.redColor().CGColor

// Color at the bottom of the gradient.
let bottomColor: CGColor = UIColor.yellowColor().CGColor

// Set colors.
gradientLayer.colors = [topColor, bottomColor]

// Set start point.
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)

// Set end point.
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

// Insert gradient layer into view's layer heirarchy.
view.layer.insertSublayer(gradientLayer, atIndex: 0)

Résultat :

CAGradientLayer horizontal.

Créer un CAGradientLayer horizontal avec plusieurs couleurs.

// View to hold the CAGradientLayer.
let view: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 320))

// Initialize gradient layer.
let gradientLayer: CAGradientLayer = CAGradientLayer()

// Set frame of gradient layer.
gradientLayer.frame = view.bounds

// Color at the top of the gradient.
let topColor: CGColor = UIColor.greenColor().CGColor

// Color at the middle of the gradient.
let middleColor: CGColor = UIColor.blueColor().CGColor

// Color at the bottom of the gradient.
let bottomColor: CGColor = UIColor.blackColor().CGColor

// Set colors.
gradientLayer.colors = [topColor, middleColor, bottomColor]

// Set start point.
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)

// Set end point.
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)

// Insert gradient layer into view's layer heirarchy.
view.layer.insertSublayer(gradientLayer, atIndex: 0)

Résultat :

entrer la description de l'image ici

Animation d'un changement de couleur dans CAGradientLayer.

// Get the current colors of the gradient.
let oldColors = self.gradientLayer.colors
    
// Define the new colors for the gradient.
let newColors = [UIColor.red.cgColor, UIColor.yellow.cgColor]
    
// Set the new colors of the gradient.
self.gradientLayer.colors = newColors
    
// Initialize new animation for changing the colors of the gradient.
let animation: CABasicAnimation = CABasicAnimation(keyPath: "colors")
    
// Set current color value.
animation.fromValue = oldColors
    
// Set new color value.
animation.toValue = newColors
   
// Set duration of animation.
animation.duration = 0.3
    
// Set animation to remove once its completed.
animation.isRemovedOnCompletion = true
    
// Set receiver to remain visible in its final state when the animation is completed.
animation.fillMode = kCAFillModeForwards
    
// Set linear pacing, which causes an animation to occur evenly over its duration.
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
    
// Set delegate of animation.
animation.delegate = self
    
// Add the animation.
self.gradientLayer.addAnimation(animation, forKey: "animateGradientColorChange")

Résultat :

Animation de changement de couleur CAGradientLayer de base.



Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow