iOS UIViewアニメーション

まえがき

見た目を重視する社会では、何があっても、見た目の良さがより注目を集めることがあります。アプリも例外ではなく、見た目の良いアプリの機能が何千回廃止されても、人々はそれを購入します。その理由は、それが目に楽しいからであり、グラフィックデザイナーはますます評価されています。時が経ち、人々はもはや静的な美しさに満足しなくなったため、グラフィックデザイナーは限界を超え、私たちプログラマーが行動を起こす時が来ました。

この記事は UIView アニメーションに関する最初の記事であり、ミニマリストのコンセプトから始まり、アニメーションの謎をすべての人に明らかにします。ログインインターフェイスを例に挙げてみましょう。美しい太陽、優雅な雲、いくつかの丘があり、その中にはユーザー名とパスワードの入力ボックスとログイン ボタンがあります。以前は、このインターフェイスは目がくらむようなものだったかも知れませんが、今では犬になったような気分です。したがって、私たちの目標は、このインターフェイスを実現することです。

注: この記事は Swift 2.0 および Xcode 7 Beta2 に基づいて書かれています。この例では、ログイン インターフェイスのすべての要素がコード (アウトレット) に接続されています。Auto Layout と SizeClasses は使用しません。

入力ボックスの移動

最初のシーンは次のようになります。ユーザーがアプリを開くと、スプラッシュ画面の後にログイン インターフェイスが表示され、次の瞬間に画面の左側にユーザ​​ー名とパスワードの入力ボックスが表示されます。

最初に

ログイン インターフェイスがユーザーに表示される前に、ユーザー名とパスワードの入力ボックスを画面の外に移動する必要があります。 ViewController.swift を開き、viewWillAppear() メソッドに次のコードを追加します。

<br />self.username.center.x -= self.view.bounds.widthself.password.center.x -= self.view.bounds.width

これらの 2 行のコードは、ユーザー名とパスワードの入力ボックスを画面の外に移動します。ここでは、単純な総当りメソッドを使用して画面を直接削除できます。中心の x からの幅。

次に、

viewDidAppear() メソッドに次のコードを追加します。

<br />UIView.animateWithDuration(0.5, animations: {    self.username.center.x += self.view.bounds.width    self.password.center.x += self.view.bounds.width})

animationWithDuration(_:animations:) は、メソッド名からわかるように、このメソッドで UIView を作成できます。アニメーション化する。これには 2 つのパラメータがあります:

持続時間: アニメーションの長さ。
アニメーション: アニメーション クロージャ。このクロージャでは、UIView のさまざまなアニメーション プロパティを変更できます。

このメソッドはクラスメソッドであるため、クロージャで複数のビューのアニメーションプロパティを同時に変更できます。したがって、上記のコードでは、ユーザー名とパスワードの入力ボックスの位置が同時に変更されます。コンパイルして実行すると、次のような効果が確認できます。

SegmentFault は埋め込みビデオをサポートしていません...

ただし、2 つの入力ボックスが画面の外から同時にスライドインするため、少し鈍いため、別の方法で磨き上げます。

最後に

viewDidAppear() のコードを更新します:

<br />UIView.animateWithDuration(0.5, animations: {    self.username.center.x += self.view.bounds.width//  self.password.center.x += self.view.bounds.width})UIView.animateWithDuration(0.5, delay: 0.3, options: .AllowUserInteraction, animations: {    self.password.center.x += self.view.bounds.width}, completion: nil)

animationWithDuration(_:lay:options:animations:completion:) メソッドは UIView のクラス メソッドでもありますが、さらに 3 つのパラメーターがあります:

late:名前が示すように、アニメーションは実行時間を遅らせます。
オプション: アニメーションの繰り返し、前後の動きなど、アニメーションの一部の効果をカスタマイズします。このパラメータについては後の記事で説明します。
完了: これもクロージャです。アニメーションが実行されると、クロージャ内のロジックが実行されます。アニメーションを接続するために使用するか、アニメーションの終了後にクリーンアップ作業を行う必要があります。

ここでコンパイルして実行すると、次の効果が確認できます。

最初にユーザー名入力ボックスが画面にスライドし、0.3 秒遅れてパスワード入力ボックスが続きます。

アニメーション プロパティ

前のセクションでは、ビューの単純なアニメーション効果を体験しましたが、実際にビューを移動させるのは、ビューの変更であるアニメーション クロージャ内のコードであることを見つけるのは難しくありません。プロパティ、次に UIView クラス メソッドは、ビューのプロパティの開始値と終了値の間でトゥイーン アニメーションを生成します。これは、ビューのアニメーション プロパティという別の概念につながります。確かに、すべてのビュー プロパティがアニメーション プロパティであるわけではありません。

位置とサイズ

境界: ビューのコンテンツの位置とサイズを変更する属性。
フレーム: ビューの位置とサイズを変更する属性。
center: ビューの位置を変更する属性。

Appearance

backgroundColor: 背景色を変更すると、UIKit は元の色からターゲットの色に線形に変化します。
アルファ: 透明度を変更すると、UIKit がフェード効果を作成します。
Transformation

変換属性のタイプは構造体である CGAffineTransform です。 CoreGraphics には、ビューの回転、拡大縮小、反転などを行うためのさまざまな CGAffineTransform 構造体を生成するメソッドがいくつかあります。その使用方法を見てみましょう。それ。次のコードを viewDidAppear() メソッドに追加します。

<br />let rotation = CGAffineTransformMakeRotation(CGFloat(M_PI))UIView.animateWithDuration(1, animations: {    self.sun.transform = rotation})

まず、パラメータは CGFloat 型の角度です。ここでは、1 回転を意味する M_PI などの定義済みの定数を使用します。 M_PI_2 は 1.57...、つまり半回転などを表します。

然后在animations闭包中将创建的旋转结构赋值给屏幕上太阳视图的transform属性。编译运行可以看到如下效果。

我们再来看看缩放，在viewDidAppear()方法中添加如下代码：

<br />let scale = CGAffineTransformMakeScale(0.5, 0.5)       UIView.animateWithDuration(1, animations: {    self.cloudBig.transform = scale})

首先创建了一个缩放的结构，第一个参数是x轴的缩放比例，第二个参数是y轴的缩放比例。同样在animations闭包中将创建的缩放结构赋值给屏幕上云朵视图的transform属性。编译运行可以看到如下效果。

动画选项

大家应该还记得我们之前使用过animationWithDuration(_:delay:options:animations:completion:)方法，其中的options当时没有详细的讲述，这节会向大家说明该属性。options选项可以使你自定义让UIKit如何创建你的动画。该属性需要一个或多个UIAnimationOptions枚举类型，让我们来看看都有哪些动画选项吧。

重复类

• .Repeat：该属性可以使你的动画永远重复的运行。
• .Autoreverse：该属性可以使你的动画当运行结束后按照相反的行为继续运行回去。该属性只能和.Repeat属性组合使用。

我们来看看怎么使用这两个属性，我们修改一个密码输入框的动画：

<br />UIView.animateWithDuration(0.5, delay: 0.3, options: .Repeat, animations: {    self.password.center.x += self.view.bounds.width}, completion: nil)

编译运行看看效果。

可以看到密码输入框不停的从左向右滑入。大家可以自己试试.Autoreverse的效果或者[.Repeat, .Autoreverse]组合效果。

动画缓冲

在现实生活中，几乎没有什么东西可以突然开始运动，然后突然停止一动不动。可以运动的物体基本都是以较慢的速度启动，逐渐加速，达到一个稳定的速度，然后当要停止时，会逐渐减速，最后停止。所以要使动画更加逼真，也可以采用这种方式，那就是ease-in和ease-out。

• .CurveLinear ：该属性既不会使动画加速也不会使动画减速，只是做以线性运动。
• .CurveEaseIn：该属性使动画在开始时加速运行。
• .CurveEaseOut：该属性使动画在结束时减速运行。
• .CurveEaseInOut：该属性结合了上述两种情况，使动画在开始时加速，在结束时减速。

下面依然以密码输入框作为示例，修改密码输入框的动画代码：

<br />UIView.animateWithDuration(0.5, delay: 0.3, options: [.Repeat, .Autoreverse, .CurveEaseOut], animations: {    self.password.center.x += self.view.bounds.width}, completion: nil)

上面的代码中组合了三种动画选项，首先让动画重复执行，然后让动画在一次执行完毕后接着反方向再次执行，最后让动画在结束时减速。编译运行，这次我们减慢动画的运行速度来看看效果。

从上面的效果中可以看到当密码输入框滑入屏幕的后半段时速度有明显的减慢。大家也可以在自己的项目中试试其他动画选项的组合。

结束语

看完这篇文章后，相信大家对iOS的动画有了大致的了解，也学会了如何实现简单的视图动画，当然这些只是iOS Animation的冰山一角，我会陆续向大家介绍iOS Animation的其他知识，今天就先到这吧。

本文首发地址：iOS UIView Animation - First Animation