Animações básicas em iOS, animações de quadros-chave e implementação de efeitos de animação física usando funções de suavização

Animação básica iOS/Animação de quadros-chave/Utilize funções de suavização para implementar efeitos de animação física

Primeiro vamos falar sobre a parte básica da animação

A parte básica da animação é relativamente simples, mas os efeitos de animação que podem ser implementados são também limitados

O método de uso é basicamente:

#1. Criar a UI original ou a imagem

#2. Crie uma instância de CABasicAnimation e configure keypart/duration/fromValue/toValue

#3. Definir a posição final da animação

#4. Adicionar a animação configurada à camada layer

Por exemplo, vamos implementar um círculo movendo-se de cima para baixo, o código superior é:

//configurar a imagem inicial
  UIView *showView        = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds  = YES;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  [self.view addSubview:showView];
  //criar animação básica
  CABasicAnimation *basicAnimation = [CABasicAnimation animation];
  //definir atributo
  basicAnimation.keyPath      = @"position";
  basicAnimation.duration     = 4.0f;
  basicAnimation.fromValue     = [NSValue valueWithCGPoint:showView.center];
  basicAnimation.toValue      = [NSValue valueWithCGPoint:CGPointMake(50, 300)];
  //Definir a posição final da animação
  showView.center = CGPointMake(50, 300);
  //Adicionar animação à camada layer
  [showView.layer addAnimation:basicAnimation forKey:nil];

Vamos falar sobre a animação de quadros-chave

Na verdade, é quase igual à animação básica, mas pode configurar várias trajetórias de animação, a maneira de usar é semelhante, mais ou menos como

#1. Criar a UI original ou a imagem

#2. Criar uma instância de CAKeyframeAnimation e definir keypart/duration/values pode definir apenas os pontos de início e fim da animação básica, enquanto a animação de quadros-chave pode adicionar vários pontos de caminho de animação

#3. Definir a posição final da animação

#4. Adicionar a animação configurada à camada layer

Por exemplo, um círculo vermelho balançando para os lados e caindo para baixo, o código acima:

//configurar a imagem inicial
  UIView *showView        = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds  = YES;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  [self.view addSubview:showView];
  //Criar animação de quadro-chave
  CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
  //Definir atributos de animação
  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)]];
  //Definir a posição final da animação
  showView.center = CGPointMake(200, 200);
  //Adicionar animação à camada layer
  [showView.layer addAnimation:keyFrameAnimation forKey:nil];

No final, usamos funções de suavização em conjunto com animação de quadros-chave para implementar animações físicas mais complexas

Primeiro vamos explicar o que são funções de suavização, são bibliotecas escritas por grandes nomes que podem calcular caminhos de animação físicos simulados (como efeitos de mola)

Endereço do Github: https://github.com/YouXianMing/EasingAnimation

Quais efeitos de animação estão disponíveis pode ser verificado na tabela de funções de suavização do repositório, simplesmente exemplificando o efeito de uma bola caindo

O código acima:

//configurar a imagem inicial
  UIView *showView        = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds  = YES;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  [self.view addSubview:showView];
  //Criar animação de quadro-chave
  CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
  //Definir atributos de animação
  keyFrameAnimation.keyPath       = @"position";
  keyFrameAnimation.duration       = 4.0f;
　　　　//Ponto crítico, aqui usamos a função de suavização para calcular o caminho do ponto
  keyFrameAnimation.values = [YXEasing calculateFrameFromPoint:showView.center
                             toPoint:CGPointMake(50, 300)
                              func:BounceEaseOut
                           frameCount:4.0f * 30];
  //Definir a posição final da animação
  showView.center = CGPointMake(50, 300);
  //Adicionar animação à camada layer
  [showView.layer addAnimation:keyFrameAnimation forKey:nil];

Obrigado por ler, espero que ajude, obrigado pelo apoio ao site!