Rotacionando imagens com Core Motion

Meyrillan Souza
Apple Developer Academy | UFPE
2 min readSep 11, 2020

Durante o challenge dois unidos, em que a proposta da Apple Developer Academy — UFPE foi projetarmos um "APPSURDO", aplicativo absurdo, eu e Felipe Bandeira ideamos um app de pokémons capitalistas que pedalam e giram até que o usuário fique rico! Para fazer as imagens dos pokémons rotacionar utilizamos o giroscópio, sensor de movimento muito usado em jogos e aplicativos de realidade aumentada. O giroscópio pode fazer a leitura da rotação do dispositivo ao redor dos eixos X, Y e Z.

Os Pokémons Charmander e Ditto estão rotacionando de acordo com o giroscópio do iPhone.

Com o intuito de obter de forma precisa os dados de orientação geral do dispositivo iOS, importamos o Core Motion, uma API fornecida pela Apple.

1. Para começar a utilizar esse framework, basta digitar: import CoreMotion.

2. Em seguida defina sua classe ViewController, a partir daqui todo o código do giroscópio será executado dentro dela.

3. O CMMotionManager() é responsável por manipular o processamento dos dados do giroscópio. Já a OperationQueue() organiza e enfileira as operações.

4. Não se esqueça de adicionar e configurar a UIImageView, se estiver usando o Interface Builder.

5. Na viewDidLoad(), adicione o deviceMotionUpdateInterval para que o sistema forneça ao CMMotionManager() os intervalos (em segundos) de atualização de movimento.

6. Ainda na viewDidLoad(), é necessário verificar se o serviço de movimento do dispositivo está disponível antes de habilitá-lo (Linha 1). Em seguida comece a mandar as atualizações de movimento para a fila, utilizando o manager para manipular os dados (Linha 3). Verifique se os valores da gravidade estão sendo recebidos (Linha 5) e determine o angulo de rotação com a função atan2 (linha 6). Se o objetivo final é que a imagem siga a mesma orientação do celular, como no meu gif acima, é importante inverter os valores da variável rotation (linha 7) .

O DispatchQueue.main.async() despacha todas as atualizações de movimento para a fila principal, atualizando a interface de forma assíncrona, ou seja, a tarefa será executada em segundo plano, e atualizará a fila principal assim que terminar (linha 9).

As UIImageViews estão sendo rotacionadas na função async da fila principal, porque é obrigatório atualizar a UI na fila principal. A CGAffineTransform é uma matriz que está recebendo os valores de angulação da rotação (linhas 10 a 13), e esses valores estão mudando de acordo com a movimentação do dispositivo.

7. Para finalizar, chame a função startGyroUpdates() na ViewController, para obter as atualizações do giroscópio e fornecê-las ao CMMotionManager(). Isso fará com que o handler criado no manager.startDeviceMotionUpdates seja chamado a cada atualização.

Aqui está o código completo do giroscópio, é só mudar as @IBOutlets e executá-lo!

Além do giroscópio, utilizamos as imagens de uma API de pokémons para fazer o aplicativo Capitamon. É possível baixar o projeto no meu repositório no GitHub.

--

--