Animazioni di base di iOS, animazioni di keyframe e implementazione di effetti di animazione fisica utilizzando funzioni di accelerazione

iOS animazione di base/animazione a chiave/realizzazione di effetti di animazione fisica utilizzando funzioni di accelerazione

Parliamo prima della parte dell'animazione di base

La parte dell'animazione di base è piuttosto semplice, ma l'effetto dell'animazione che può essere realizzato è anche limitato

Il metodo di utilizzo è più o meno:

#1. Creare l'UI o l'immagine originale

#2. Creare un'istanza di CABasicAnimation e impostare keypath/duration/fromValue/toValue

#3. Impostare la posizione finale dell'animazione

#4. Aggiungere l'animazione configurata alla layer

Facciamo un esempio, ad esempio, per realizzare un cerchio che si muove dal basso verso l'alto, il codice sopra:

//impostare l'immagine originale
  UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds = SI;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  [self.view addSubview:showView];
  //创建基本动画
  CABasicAnimation *basicAnimation = [CABasicAnimation animation];
  //设置属性
  basicAnimation.keyPath = @"position";
  basicAnimation.duration = 4.0f;
  basicAnimation.fromValue = [NSValue valueWithCGPoint:showView.center];
  basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(50, 300)];
  //Imposta la posizione finale dell'animazione
  showView.center = CGPointMake(50, 300);
  //Aggiungi animazione alla layer
  [showView.layer addAnimation:basicAnimation forKey:nil];

Parliamo ora dell'animazione a keyframe

È abbastanza simile all'animazione di base, ma può impostare più percorsi di animazione. Il metodo di utilizzo è simile, approssimativamente

#1. Creare l'UI o l'immagine originale

#2. Creare un'istanza di CAKeyframeAnimation e impostare keypart/duration/values, rispetto all'animazione di base che può solo impostare i punti di inizio e fine, l'animazione a keyframe può aggiungere più punti di percorso

#3. Impostare la posizione finale dell'animazione

#4. Aggiungere l'animazione configurata alla layer

Facciamo un esempio, un cerchio rosso che si muove da destra a sinistra e cade in basso, il codice sopra:

//impostare l'immagine originale
  UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds = SI;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  [self.view addSubview:showView];
  //Crea l'animazione a keyframe
  CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
  //Imposta le proprietà dell'animazione
  keyFrameAnimation.keyPath       = @"position";
  keyFrameAnimation.duration       = 4.0f;
  keyFrameAnimation.values = @[[NSValue valueWithCGPoint:showView.center],
                 [NSValue valueWithCGPoint:CGPointMake(100, 100)],
                 [NSValue valueWithCGPoint:CGPointMake(50, 150)],
                 [NSValue valueWithCGPoint:CGPointMake(200, 200)]];
  //Imposta la posizione finale dell'animazione
  showView.center = CGPointMake(200, 200);
  //Aggiungi animazione alla layer
  [showView.layer addAnimation:keyFrameAnimation forKey:nil];

Infine, utilizzare le funzioni di easing insieme all'animazione a keyframe per realizzare animazioni fisiche più complesse

Parliamo prima di cosa sono le funzioni di easing, ovvero un esperto ha scritto una libreria per calcolare il percorso di animazione fisica simulata (ad esempio, l'effetto della molla)

Indirizzo Github: https://github.com/YouXianMing/EasingAnimation

Quali sono gli effetti animati disponibili, consultare la tabella delle funzioni di easing nella libreria, e menzioniamo brevemente l'effetto di una pallina che cade

Il codice sopra:

//impostare l'immagine originale
  UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds = SI;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  [self.view addSubview:showView];
  //Crea l'animazione a keyframe
  CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
  //Imposta le proprietà dell'animazione
  keyFrameAnimation.keyPath       = @"position";
  keyFrameAnimation.duration       = 4.0f;
　　　　//Punto chiave, qui si utilizza la funzione di accelerazione per calcolare il percorso del punto
  keyFrameAnimation.values = [YXEasing calculateFrameFromPoint:showView.center
                             toPoint:CGPointMake(50, 300)
                              func:BounceEaseOut
                           frameCount:4.0f * 30];
  //Imposta la posizione finale dell'animazione
  showView.center = CGPointMake(50, 300);
  //Aggiungi animazione alla layer
  [showView.layer addAnimation:keyFrameAnimation forKey:nil];

Grazie per aver letto, spero di essere stato d'aiuto, grazie per il supporto al nostro sito!