• 14 min de leitura
• Animação,iOS,UI,Móveis
• Guardada para leitura off-line
• Compartilhar no Twitter, O LinkedIn

i tem sido um desenvolvedor do iOS há mais de uma década e raramente tem visto artigos que consolidam todas as formas possíveis de realizar animações no iOS. Este artigo pretende ser um primer sobre animações iOS com a intenção de cobrir exaustivamente as diferentes formas de fazer o mesmo.dada a extensão do tópico, nós cobraríamos cada parte de forma sucinta em um nível bastante alto. O objetivo é educar o leitor com um conjunto de escolhas para adicionar animações ao seu aplicativo iOS.

Antes de começarmos com tópicos relacionados com o iOS, vamos dar uma breve olhada na velocidade de animação.

animando a 60FPS

geralmente em vídeos, cada moldura é representada por uma imagem e a taxa de moldura determina o número de imagens invertidas na sequência. Isto é denominado como ‘frames por segundo’ ou FPS.

FPS determina o número de imagens fixas viradas dentro de um segundo, o que significa literalmente que quanto mais o número de imagens/ quadros, mais detalhes/ informações são exibidos no vídeo. Isto também se aplica às animações.

FPS é tipicamente usado para determinar a qualidade das animações. Há uma opinião popular de que qualquer boa animação deve ser executado em 60fps ou mais — qualquer coisa menos de 60fps iria se sentir um pouco fora.deseja ver a diferença entre 30FPS e 60FPS? Olha para isto!notou a diferença? Os olhos humanos podem sentir o nervosismo no fps inferior. Assim, é sempre uma boa prática para garantir que qualquer animação que você criar, adere à regra básica de correr a 60 fps ou mais. Isto faz com que se sinta mais realista e vivo.

tendo olhado para o FPS, vamos agora aprofundar os diferentes quadros principais do iOS que nos fornecem uma forma de realizar animações.

Frameworks Core

nesta secção, iremos tocar nos frameworks no SDK iOS que podem ser usados para criar animações de visualização. Faremos uma rápida caminhada através de cada um deles, explicando seu conjunto de recursos com um exemplo relevante.

UIKit/UIView Animations

UIView é a classe base para qualquer Vista que exiba conteúdo em aplicações iOS.

UIKit, o framework que nos dá o UIView, já nos fornece algumas funções básicas de animação que tornam conveniente para os desenvolvedores alcançar mais fazendo menos.

a API, UIView.animate, é a maneira mais fácil de animar as vistas, uma vez que as propriedades de qualquer Vista podem ser facilmente animadas, fornecendo os valores da propriedade na sintaxe baseada em blocos.

nas animações do UIKit, recomenda-se modificar apenas as propriedades animáveis do UIVIew caso contrário, haverá repercussões onde as animações podem fazer com que a vista acabe num estado inesperado.

animation (withDuration: animations: completion)

este método leva na duração da animação, um conjunto de propriedades animáveis do view muda que precisam ser animados. O bloco de completação dá uma chamada de volta quando a vista é feita com a realização da animação.

quase qualquer tipo de animação como mover, escalar, rodar, desvanecer, etc. em uma visão pode ser alcançado com esta API única.

agora, considere que deseja animar uma mudança de tamanho do botão ou deseja uma vista particular para ampliar o ecrã. É assim que podemos fazê-lo usando o UIView.animate API:

let newButtonWidth: CGFloat = 60UIView.animate(withDuration: 2.0) { //1 self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) //2 self.button.center = self.view.center //3}

Aqui está o que estamos fazendo aqui:

1. chamamos de UIView.animate método com um valor de duração passado para ele, que representa quanto tempo a animação, descrito dentro do bloco, deve ser executado.
2. definimos a nova moldura do botão que deve representar o estado final da animação.
3. nós definimos o botão center com o centro de seu superview para que ele permaneça no centro da tela.

O bloco acima de animação código deve acionar a animação do botão do quadro de mudança do quadro atual:

Width = 0, Height = 0

Para o último frame:

Width = Height = newButtonWidth

E aqui está o que a animação ficaria como:

animateWithDuration

Este método é uma extensão do anime método onde você pode fazer tudo o que você pode executar na prévia API com alguns física comportamentos adicionado à exibição de animações.

Por exemplo, se você deseja alcançar mola de amortecimento efeitos na animação que fizemos acima, então esta é a forma como o código ficaria assim:

let newButtonWidth: CGFloat = 60UIView.animate(withDuration: 1.0, //1 delay: 0.0, //2 usingSpringWithDamping: 0.3, //3 initialSpringVelocity: 1, //4 options: UIView.AnimationOptions.curveEaseInOut, //5 animations: ({ //6 self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) self.button.center = self.view.center}), completion: nil)

Aqui está o conjunto de parâmetros utilizados:

1. duration
   representa a duração da animação determinando quanto tempo o bloco de código deve ser executado.
2. representa o atraso inicial que queremos ter antes do início da animação.
3. representa o valor do efeito springy que queremos que a vista se comporte. O valor deve estar entre 0 e 1. Quanto menor o valor, maior a oscilação da mola.
4. velocity
   representa a velocidade a que a animação deve começar.
5. options
   Tipo de curva de animação que deseja aplicar à sua animação visual.
6. finalmente, o bloco de código onde definimos a moldura do botão que precisa ser animado. É o mesmo que a animação anterior.

E aqui está como a animação seria com a configuração de animação acima:

UIViewPropertyAnimator

Por um pouco mais de controle sobre animações, UIViewPropertyAnimator vem a calhar, onde ele nos fornece um caminho para pausar e retomar animações. Você pode ter o timing personalizado e ter a sua animação para ser interativo e interruptível. Isso é muito útil ao realizar animações que também são interactáveis com as ações do Usuário.

O clássico ‘Slide to Unlock’ gesto e a vista do jogador descartar / expandir a animação (na aplicação de música) são exemplos de animações interativas e interruptíveis. Você pode começar a mover uma vista com o seu dedo, em seguida, liberá-lo e a vista irá voltar para a sua posição original. Alternativamente, você pode pegar a vista durante a animação e continuar arrastando-a com o dedo.

a Seguir está um exemplo simples de como podemos alcançar a animação usando UIViewPropertyAnimator:

let newButtonWidth: CGFloat = 60let animator = UIViewPropertyAnimator(duration:0.3, curve: .linear) { //1 self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) self.button.center = self.view.center}animator.startAnimation() //2

Aqui está o que estamos fazendo:

1. chamamos o UIViewProperty API passando a duração e a curva de animação.
2. Ao contrário de ambos os UIView acima.animar API ‘ s, a animação não vai começar a menos que você mesmo especificá-lo, ou seja, você está no controle total do processo de animação/ fluxo completo.agora, vamos dizer que você quer ainda mais controle sobre as animações. Por exemplo, você quer projetar e controlar cada frame na animação. Há outra API para isso, animateKeyframes. Mas antes de nos debruçarmos sobre isso, vamos ver rapidamente o que é uma moldura, em uma animação.
   

   What Is a frame?

   uma coleção de mudanças/ transições de quadros da vista, do estado inicial ao estado final, é definida como animation e cada posição da vista durante a animação é chamada como um frame.

   animateKeyframes

   Esta API fornece uma forma de desenhar a animação de tal forma que você pode definir várias animações com diferentes timings e transições. Post this, the API simply integrates all the animations into one seamless experience.digamos que queremos mover o nosso botão na tela de forma aleatória. Vamos ver como podemos usar a API de animação keyframe para fazê-lo.

   UIView.animateKeyframes(withDuration: 5, //1 delay: 0, //2 options: .calculationModeLinear, //3 animations: { //4 UIView.addKeyframe( //5 withRelativeStartTime: 0.25, //6 relativeDuration: 0.25) { //7 self.button.center = CGPoint(x: self.view.bounds.midX, y: self.view.bounds.maxY) //8 } UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.25) { self.button.center = CGPoint(x: self.view.bounds.width, y: start.y) } UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.25) { self.button.center = start }})

   Aqui está a discriminação:

   1. duration
      Call the API by passing in the duration of the animation.
   2. atraso inicial duração da animação.
   3. options
      O tipo de curva de animação que deseja aplicar à sua animação visual.
   4. animations
      bloco que leva todas as animações de chaves projetadas pelo desenvolvedor / usuário.
   5. addKeyFrame
      Call the API to design each and every animation. No nosso caso, definimos cada movimento do botão. Podemos ter tantas animações quantas precisarmos, adicionadas ao bloco.
   6. relativeStartTime
      define a hora de início da animação na coleção do bloco de animação.
   7. relativeDuration
      define a duração global desta animação específica.
   8. center
      no nosso caso, simplesmente mudamos a propriedade central do botão para mover o botão em torno da tela.

   E este é o aspecto final animações parece:

   

   CoreAnimation

   Qualquer UIKit com base animação internamente é traduzido para o núcleo de animações. Assim, a estrutura de animação principal atua como uma camada de suporte ou espinha dorsal para qualquer animação UIKit. Assim, todas as APIs de animação UIKit são apenas camadas encapsuladas da APIs de animação principal de uma forma facilmente consumível ou conveniente.

   UIKit animation APIs não fornecem muito controle sobre as animações que foram realizadas sobre uma vista, uma vez que eles são usados principalmente para propriedades animáveis da vista. Assim, nesses casos, onde você pretende ter controle sobre cada quadro da animação, é melhor usar a APIs de animação Central subjacente diretamente. Alternativamente, tanto as animações UIView e núcleo de animações podem ser usados em conjunto também.

   UIView + Core Animation

   Let’s see how we can recreate the same button change animation along with specifying the timing curve using the UIView and Core Animation APIs.

   Podemos usar CATransaction‘s funções de timing, que lhe permite especificar e controlar a curva de animação.

   Let’s look at an example of a button size change animation with its corner radius utilizing the CATransaction‘s timing function and a combination of UIView animations:

   let oldValue = button.frame.width/2let newButtonWidth: CGFloat = 60/* Do Animations */CATransaction.begin() //1CATransaction.setAnimationDuration(2.0) //2CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)) //3// View animations //4UIView.animate(withDuration: 1.0) { self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) self.button.center = self.view.center}// Layer animationslet cornerAnimation = CABasicAnimation(keyPath: #keyPath(CALayer.cornerRadius)) //5cornerAnimation.fromValue = oldValue //6cornerAnimation.toValue = newButtonWidth/2 //7button.layer.cornerRadius = newButtonWidth/2 //8button.layer.add(cornerAnimation, forKey: #keyPath(CALayer.cornerRadius)) //9CATransaction.commit() //10

   :

   1. begin
      representa o início do bloco de código de animação.
   2. duration
      duração total da animação.
   3. curve
      representa a curva de tempo que precisa ser aplicada à animação.
   4. UIView.animate
      nossa primeira animação a mudar a moldura do botão.
   5. CABasicAnimation
      Nós criamos o CABasicAnimation objeto consultando o cornerRadius do botão como o caminho-chave, desde que é o que deseja animar. Da mesma forma, se você quiser ter o controle de nível granular sobre as animações do keyframe, então você pode usar a classeCAKeyframeAnimation

   .

3. fromValue
   Representa o valor inicial da animação, i.e. inicial cornerRadius valor do botão de onde a animação deve iniciar.
4. toValue
   Representa o valor final da animação, i.e. o final cornerRadius valor do botão, onde a animação deve acabar.
5. cornerRadius
   Temos de definir o cornerRadius propriedade do botão com o valor final da animação mais o botão de cornerRadius valor vai começar auto-revertido para o valor inicial após a animação completa.
6. addAnimation
   nós anexamos o objeto de animação que contém a configuração de todo o processo de animação à camada, representando o teclado para o qual a animação precisa ser realizada.
7. commit
   representa o fim do bloco de código de animação e inicia a animação.

Esta é a forma como a animação final ficaria assim:

Este blog é uma ótima leitura para ajudar a criar mais animações avançadas, como é perfeitamente orienta o Núcleo de Animação quadro APIs com instruções para guiá-lo através de cada passo do caminho.

UIKitDynamics

UIKit Dynamics é o motor de física para o UIKit que permite que você adicione qualquer de física de comportamentos como a colisão, gravidade, empurrar, snap, etc., para o UIKit controles.

Uikitdynamicanimador

esta é a classe de administração da estrutura dinâmica UIKit que regula todas as animações desencadeadas por qualquer controle de IU dado.

UIKitDynamicBehavior

permite adicionar qualquer comportamento físico a um animador que, em seguida, lhe permite realizar na vista associada a ele.diferentes tipos de comportamentos para a Uikitdinâmica incluem::

• UIAttachmentBehavior
• UICollisionBehavior
• UIFieldBehavior
• UIGravityBehavior
• UIPushBehavior
• UISnapBehavior

A arquitetura de UIKitDynamics parece algo assim. Note que os itens 1 a 5 podem ser substituídos por uma única vista.vamos aplicar algum comportamento físico ao nosso botão. Veremos como aplicar a gravidade ao botão para que nos dê a sensação de lidar com um objeto real.

var dynamicAnimator : UIDynamicAnimator!var gravityBehavior : UIGravityBehavior!dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1gravityBehavior = UIGravityBehavior(items: ) //2dynamicAnimator.addBehavior(gravityBehavior) //3

:

1. UIKitDynamicAnimator
   nós criamos um objetoUIKitDynamicAnimator que atua como um orquestrador para a realização de animações. Nós também passamos o superview do nosso botão como a vista de referência.
2. UIGravityBehavior
   nós criamos um UIGravityBehavior objeto e passar nosso botão para os elementos array nos quais este comportamento é injetado.
3. addBehavior
   We have added the gravity object to the animator.
   Isto deve criar uma animação como mostrado abaixo:
   

   devemos dizer ao animador para considerar o fundo da tela para ser o chão. É aqui que UICollisionBehavior entra em imagem.

   var dynamicAnimator : UIDynamicAnimator!var gravityBehavior : UIGravityBehavior!var collisionBehavior : UICollisionBehavior!dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1gravityBehavior = UIGravityBehavior(items: ) //2dynamicAnimator.addBehavior(gravityBehavior) //3collisionBehavior = UICollisionBehavior(items: ) //4collisionBehavior.translatesReferenceBoundsIntoBoundary = true //5dynamicAnimator.addBehavior(collisionBehavior) //6

4. UICollisionBehavior
   temos criado de uma UICollisionBehavior objeto e passaram ao longo do botão para que o comportamento é adicionado ao elemento.
5. translatesReferenceBoundsIntoBoundary
   habilitando esta propriedade diz ao animador para tomar o limite de vistas de referência como o fim, que é o fundo da tela em nosso caso.
6. addBehavior
   nós adicionamos comportamento de colisão ao animador aqui.
   

   
   That’s pretty neat, isn’t it?agora, vamos tentar adicionar um efeito saltitante para que nosso objeto se sinta mais real. Para isso, usaremos a classe UIDynamicItemBehavior.

   var dynamicAnimator : UIDynamicAnimator!var gravityBehavior : UIGravityBehavior!var collisionBehavior : UICollisionBehavior!var bouncingBehavior : UIDynamicItemBehavior!dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1gravityBehavior = UIGravityBehavior(items: ) //2dynamicAnimator.addBehavior(gravityBehavior) //3collisionBehavior = UICollisionBehavior(items: ) //4collisionBehavior.translatesReferenceBoundsIntoBoundary = true //5dynamicAnimator.addBehavior(collisionBehavior) //6//Adding the bounce effectbouncingBehavior = UIDynamicItemBehavior(items: ) //7bouncingBehavior.elasticity = 0.75 //8dynamicAnimator.addBehavior(bouncingBehavior) //9

   UIDynamicItemBehavior
   temos criado de uma UIDynamicItemBehavior objeto e passar ao longo do botão para que o comportamento é adicionado ao elemento.

   elasticity
   O valor deve estar entre 0-1, ele representa a elasticidade, ou seja, o número de vezes que o objeto deve saltar sobre e sobre o chão quando é atingido. É aqui que a magia acontece — ao alterar esta propriedade, você pode diferenciar entre diferentes tipos de objetos, como bolas, garrafas, objetos duros e assim por diante.

   addBehavior
   nós adicionamos comportamento de colisão ao animador aqui.

   Agora, o nosso botão de salto quando ele atinge o solo, como mostrado abaixo:

   

   Este repositório é bastante útil e mostra todos os UIKitDynamics comportamentos em ação. Ele também fornece código fonte para brincar com cada comportamento. Isso, na minha opinião, deve servir como uma extensa lista de formas de realizar animações iOS Sobre vistas!

   na próxima seção, vamos dar uma breve olhada nas ferramentas que nos ajudarão a medir o desempenho das animações. Eu também recomendo que você olhe para formas de otimizar a sua construção Xcode, uma vez que ele vai economizar uma grande quantidade de seu tempo de desenvolvimento.

   afinação de desempenho

   nesta secção, analisaremos formas de medir e sintonizar o desempenho das animações iOS. Como um desenvolvedor iOS, você pode já ter usado Instrumentos Xcode como vazamentos de memória e alocações para medir o desempenho do aplicativo global. Da mesma forma, existem instrumentos que podem ser usados para medir o desempenho das animações.

   Core Animation instrumento

   tente o Core Animation instrumento e deverá ser capaz de ver os FPS que o seu ecrã de aplicações fornece. Esta é uma ótima maneira de medir o desempenho/ velocidade de qualquer animação renderizada em seu aplicativo iOS.o desenho

   o desenho

   FPS é baixado muito no aplicativo que mostra conteúdo pesado como imagens com efeitos como sombras. Em tais casos, em vez de atribuir a imagem diretamente para o id

   ‘S propriedade da imagem, Tente desenhar a imagem separadamente em um contexto usando APIs gráficos Core. Isto reduz excessivamente o tempo de exibição da imagem executando a lógica de descompressão da imagem de forma assíncrona quando feito em um thread separado em vez do thread principal.

   rasterização

   rasterização é um processo usado para cache informações de camada complexa de modo que estas vistas não são redesenhadas sempre que eles são renderizados. Redesenhamento de pontos de vista é a principal causa da redução em FPS e, portanto, é melhor aplicar rasterização em pontos de vista que vão ser reutilizados várias vezes.

   encerrando

   para concluir, eu também resumi uma lista de recursos úteis para animações iOS. Você pode achar isso muito útil ao trabalhar em animações iOS. Além disso, você também pode achar este conjunto de ferramentas de design útil como um passo (design) antes de mergulhar em animações.