IBAnimatable
IBAnimatable を使用した Interface Builder で App Store 対応アプリの UI、インタラクション、ナビゲーション、遷移、アニメーションをデザインおよびプロトタイプ化します。
このアプリは、IBAnimatable を使用して Interface Builder でコードを 1 行も書かずに作成されました。 Dribbble の GIF ファイルのサイズのため、機能のサブセットのみを示しています。フル HD バージョンは YouTube で、または MP4 は Github で見つけることもできます。
これは、Interface Builder (Storyboard) でのデザインです。
IBAnimatable を使用すると、UI をデザインできますSketch などの Interface Builder で、Framer Studio などの Swift プレイグラウンドでアニメーションのプロトタイプを作成します。また、デザインの出力を実稼働対応のアプリで直接使用することもできます。
デザイナーとして、私たちは Sketch を愛用しています。Sketch は、UI をデザインするためのシンプルでありながら非常に強力なツールです。ただし、Sketch ではインタラクション、ナビゲーション、トランジション、アニメーションをデザインすることはできません。これらの一部をデザインするには、Framer Studio などの別のツールが必要になる場合があります。さらに、App Store 対応アプリを作成するには、Xcode と Interface Builder を使用して UI とアニメーションを実装する必要があります。プロセスを高速化し、無駄を最小限に抑えるために、IBAnimatable を作成して、Interface Builder を設計およびアニメーション化できるようにします。
言語
中文
機能
- プロトタイプから出荷可能な App Store 対応アプリまで - Interface Builder で設計したものがまさにアプリそのものです
- デザイナーに優しい - 属性インスペクターのスケッチ スタイル設定パネルにより、Interface Builder の使用方法の学習曲線が短縮されます。
- Swift プレイグラウンドでのアニメーション デザインのサポート - Framer Studio と同様に、Swift プレイグラウンドでアニメーションのプロトタイプを作成して、シミュレーターまたは実際の iOS デバイスでの実行時間を節約できます。
- 組み込みの自動レイアウトのサポート - IBAnimatable で自動レイアウトおよびサイズ クラスを使用して、向きと複数の iOS デバイスをサポートできます。
- ナビゲーションとトランジションのサポート - アプリでデフォルトのナビゲーション パターンを使用でき、IBAnimatable は、コードなしでシーンに戻ったり閉じたりするためのアンワインド セグエも追加します。さらに多くのトランジションが間もなく追加される予定です。
- プロトコル指向プログラミング - IBAnimatable はプロトコル指向プログラミング パラダイムを使用します。 Swift プロトコル拡張機能を使用すると、よりデザイン可能な機能やアニメーション化可能な機能を簡単にサポートできます。 IBAnimatable のデフォルトのものを使用する代わりに、これらのプロトコル拡張機能を使用して、他のカスタム UI 要素を作成することもできます。
ユースケース
- プロトタイピング - インタラクティブなプロトタイプを作成してアイデアを迅速に検証します。
- Interface Builder での再設計 - Sketch から UI を再設計し、Framer Studio からアニメーションを作成します。コードを記述する必要はありません。
- カスタム UI 要素の作成 - IBAnimatable プロトコルを使用してカスタム UI 要素を作成します。例えばデフォルトのカラーパレットを備えたボタン。
サンプル アプリの実行方法
IBAnimatable の強力さを学び、理解する簡単な方法は、サンプル アプリを実行し、Interface Builder の設定を試してみることです。以下のように、いくつかの手順でアプリを実行できます:
1) リポジトリのクローンを作成します
$ git clone https://github.com/JakeLin/IBAnimatable.git
ログイン後にコピー
2) Xcode でワークスペースを開きます
$ cd IBAnimatable$ open "IBAnimatable.xcworkspace"
ログイン後にコピー
3) コンパイルしますそして、シミュレータまたは iOS デバイスでアプリを実行します
Interface Builder でデザインする方法
IBAnimatable を使用して Interface Builder で UI とアニメーションをデザインするには、次の手順に従ってください。手順は以下のとおりです。
ストーリーボードまたは Xib ファイルを開きます。 UIKit 要素をドラッグ アンド ドロップします。 Identity Inspector で、UI 要素を Animatable カスタム UI クラスに接続します。 AnimatableView では、すべての Animatable クラスが API セクションにあります。 Attribute Inspector で UI とアニメーションを構成します。 Swift プレイグラウンドでアニメーション化する方法
Attribute Inspector でアニメーション設定を構成できます。ただし、Interface Builder はアニメーションのプレビューをサポートしていませんが、Swift playgournd でアニメーションのプロトタイプを作成することはできます。 Swift プレイグラウンドでアニメーションをデザインする方法をデモする 3 つのサンプル ページがあります。これらは IBAnimatable.playground にあります。まず、Swift プレイグラウンドで 1 つのページを選択し、「アシスタント エディター」ボタンをクリックしてプレイグラウンドを分割します。その後、右側上部の「タイムライン」を選択してアニメーションをプレビューします。 Xcode メニューの「エディター」を使用できます。 「実行」すると、プレイグラウンドを再実行します。
プログラムでアニメーション化する方法
上で見たように、コードを 1 行も書かずに Interface Builder でアプリのプロトタイプを完全に作成できますが、IBAnimatable は UI とアニメーションを完全に制御できる API も提供します。 。 IBAnimatable は、 Pop() のような単純な API を提供します。単純に 1 行で呼び出すことができます。
view.pop() // pop animation for the viewview.squeezeFadeInLeft() // squeeze and fade in from left animation
ログイン後にコピー
これらすべての事前定義されたアニメーションは、Swift プレイグラウンド ページ - 事前定義されたアニメーション
で試すことができます。
Animation properties
There are some properties we can change to customise the animation. What we need to do is to set the properties and call animate() method to start the animation.
// Setup the animationview.animationType = "SqueezeInLeft"view.delay = 0.5view.damping = 0.5view.velocity = 2view.force = 1// Start the animationview.animate()
ログイン後にコピー
You can play around with all animations with different properties in the Swift playground Page - Animation Properties
Chaining animations
Sometimes, we need to run another animation after the previous one. With IBAnimatble , we can easily chain animations together to provide a sleek user experience.
// Simplly put the next animation within `{}` closure as below. It is an example to pop the view after squeeze in from the top.view.squeezeInDown{ view.pop() }// Heaps of animations have been chained togehter, it is the source code of animated Gif in "Animate in Swift playground" sectionview.squeezeInDown{ view.pop { view.shake{ view.squeeze{ view.wobble{ view.flipX { view.flash{ view.flipY { view.fadeOutDown() } } } } } } } }ログイン後にコピー
How to install
Manually install
Copy and paste IBAnimatable folder in your Xcode project.
Git submodule
TBD, more details on Issue #22 - Swift package manager support
Swift package manager
TBD, more details on Issue #5 - Swift package manager support
CocoaPods
TBD, more details on Issue #7 - CocoaPods support
Carthage
TBD, more details on Issue #6 - Carthage support
APIs
Animatable UI elements
The easiest way to use IBAnimatable is to drag and drop UIKit elements and connect with Animatable UI elements in Identity Inspector. Here are the supported Animatable UI elements to map UIKit elements.
| UIKit elements | Animatable UI elements | Remark |
| UIView | AnimatableView | |
| UIBarButtonItem | AnimatableBarButtonItem | |
| UIButton | AnimatableButton | |
| UIButton | AnimatableCheckBox | Connect UIButton as AnimatableCheckBox to make CheckBox control |
| UIImageView | AnimatableImageView | |
| UILabel | AnimatableLabel | To style the text in Label, we can use Interface Builder built-in Attributed Text |
| UIStackView | AnimatableStackView | |
| UITableView | AnimatableTableView | |
| UITableViewCell | AnimatableTableViewCell | |
| UITextField | AnimatableTextField | |
| UITextView | AnimatableTextView | |
| UIView | DesignableGradientView | |
| UINavigationBar | DesignableNavigationBar | |
| UIViewController | DesignableViewController | |
Designable protocols
IBAnimatable provides a set of Designable protocols as below. Because of the power of protocol oriented programming in Swift, we don't even have to use Animatable default UI elements eg. AnimatableView to unlocked the power of IBAnimatable . We can conform to IBAnimatable protocols to use the default implementation in protocol extension to create other custom UI elements.
BarButtonItemDesignable
| Property name | Data type | Remark |
| roundedImage | Optional | By default, Interface Builder can only support outline images for Bar Button Item. With roundedImage , we can display a rounded image. The image can not be previewed in Interface Builder. |
BlurDesignable
| Property name | Data type | Remark |
| blurEffectStyle | Optional | Support three different blur effects: ExtraLight , Light and Dark . They ard defined in BlurEffectStyle enum. The look of blur effect in Interface Builder is different from Simulator or device. |
| blurOpacity | CGFloat | Opacity of the blur effect specified above. Default value is CGFloat.NaN , the value is from 0.0 to 1.0. |
BorderDesignable
| Property name | Data type | Remark |
| borderColor | Optional | border color |
| borderWidth | CGFloat | border width. Default value is CGFloat.NaN , the value is greater than 0. |
| borderSide | Optional | border side, Top , Right , Bottom or Left . If not specify, then display four sides. |
CheckBoxDesignable
| Property name | Data type | Remark |
| checked | Bool | Default value is false |
| checkedImage | Optional | The image to display when CheckBox is checked. |
| uncheckedImage | Optional | The image to display when CheckBox is unchecked. |
CornerDesignable
| Property name | Data type | Remark |
| cornerRadius | CGFloat | rounded corner radius. Default value is CGFloat.NaN , the value is greater than 0. |
FillDesignable
| Property name | Data type | Remark |
| fillColor | Optional | fill color of the UI Element |
| opacity | CGFloat | opacity, alpha of the UI Element, Dafault value is CGFloat.NaN , the value is from 0.0 to 1.0. |
GradientDesignable
| Property name | Data type | Remark |
| startColor | Optional | start gradient color |
| endColor | Optional | end gradient color |
| startPoint | Optional | start direction point, can find in GradientStartPoint . |
NavigationBarDesignable
| Property name | Data type | Remark |
| solidColor | Bool | whether to display solid color only. Default value is false . Need to manually untick translucent in Interface Builder, otherwise, it will have constrait issue in IB although it is correct in run time. |
MaskDesignable
| Property name | Data type | Remark |
| maskType | Optional | maks type, eg. Circle . |
PaddingDesignable
AnimatableTextField で片側または両側にパディングを追加するために使用されます。
| Property name | Data type | Remark |
| paddingLeft | CGFloat | padding on left-hand side. Default value is CGFloat.NaN . |
| paddingRight | CGFloat | padding on right-hand side. Default value is CGFloat.NaN . |
| paddingSide | CGFloat | padding on both sides. Default value is CGFloat.NaN . |
PlaceholderDesignable
| Property name | Data type | Remark |
| placeholderColor | Optional | placeholder text color in AnimatableTextField . |
RootWindowDesignable
| Property name | Data type | Remark |
| rootWindowBackgroundColor | Optional | root window background color. Can be seen when we use flip transition. |
RotationDesignable
| Property name | Data type | Remark |
| rotate | CGFloat | rotation of the UI element in degrees. Default value is CGFloat.NaN , value is from 0 to 360. |
ShadowDesignable
マテリアル デザインで人気のある UI 要素のドロップ シャドウ。これらのプロパティは IB で正しくレンダリングできません。Interface Builder のバグである可能性があります。
| Property name | Data type | Remark |
| shadowColor | Optional | shadow color |
| shadowRadius | CGFloat | shadow corner radius. Default value is CGFloat.NaN , the value is greater than 0. |
| shadowOpacity | CGFloat | shadow opacity. Default value is CGFloat.NaN , the value is from 0.0 to 1.0. |
| shadowOffset | CGPoint | x is horizontal offset and y is vertical offset. |
SideImageDesignable
AnimatableTextField にサイド ヒント画像を表示します
| Property name | Data type | Remark |
| leftImage | Optional | the image to display on the left-hand side. |
| leftImageLeftPadding | CGFloat | left padding of hint image. Default value is CGFloat.NaN . |
| leftImageRightPadding | CGFloat | right padding of hint image. Default value is CGFloat.NaN . |
| leftImageTopPadding | CGFloat | top padding of hint image. Default value is CGFloat.NaN . If not specified, the image will center vertically. |
StatusBarDesignable
| Property name | Data type | Remark |
| lightStatusBar | Bool | to display white or black text status bar. Default value is false to display black text. |
TableViewCellDesignable
| Property name | Data type | Remark |
| removeSeparatorMargins | Bool | whether to remove separator margins in AnimatableTableViewCell . Default value is false . There maybe a bug of Interface Builder when setting "Separator Insert" to 0 doesn't work. |
TintDesignable
UI 要素、特に AnimatableImageView の上にカラー レイヤーを簡単に追加します。
| Property name | Data type | Remark |
| tintOpacity | CGFloat | opacity of tint color (white color). Default value is CGFloat.NaN . |
| shadeOpacity | CGFloat | opacity of shade color (black color). Default value is CGFloat.NaN . |
| toneColor | Optional | tone color |
| toneOpacity | CGFloat | opacity of tone color. Default value is CGFloat.NaN . |
ViewControllerDesignable
| Property name | Data type | Remark |
| hideNavigationBar | Bool | whether to hide navigation bar. Default value is false . |
アニメーション化可能なプロトコル
プロパティ
| Property name | Data type | Remark |
| animationType | Optional | Supported animations. All supported predefined animations are in enum AnimationType |
| autoRun | Bool | Whether to automatically start the animation. Default value is true . if it is true, the animation will automatically run when the view is loaded. If want to manually start the animation should set it to false . |
| duration | CGFloat | Animation duration in seconds. Default value is 0.7. |
| delay | Double | Delay to start the animation in seconds. Default value is 0. |
| damping | CGFloat | Used in UIView Spring animation (0 ~ 1 seconds). To smoothly decelerate the animation without oscillation, use a value of 1. Employ a damping ratio closer to zero to increase oscillation. Default value is 0.7. Notice: FadeOutIn, FadeInOut, Shake, Pop, Morph, Squeeze, Flash, Wobble and Swing animations do not use damping. |
| velocity | CGFloat | used in UIView Spring animation. A value of 1 corresponds to the total animation distance traversed in one second. For example, if the total animation distance is 200 points and you want the start of the animation to match a view velocity of 100 pt/s, use a value of 0.5. Default is 0.7. Notice: FadeOutIn, FadeInOut, Shake, Pop, Morph, Squeeze, Flash, Wobble and Swing animations do not use damping. |
| force | CGFloat | used to apply force to the animation. The number is higher, the animation property has more changes. eg. for Pop animation, higher force causes the view poping bigger. Default value is 1. |
| repeatCount | Float | Used to sepecify the count to repeat the animation. Can noly used in Shake, Pop, Morph, Squeeze, Flash, Wobble and Swing animations. Default value is 1. |
拡張機能
UIViewController
これらのメソッドを使用すると、任意のコードで現在の ViewController に戻ったり閉じたりできます。 Interface Builder 内。
| Method name | Remark |
| func unwindToViewController(sender: UIStoryboardSegue) | Used in Interface Builder to uswind from Naviagation Controller |
| func dismissCurrentViewController(sender: UIStoryboardSegue) | Used in Interface Builder to dismiss current ViewController |
貢献方法
私たち全員がこのプロジェクトに貢献できます。オーバーヘッドが減れば、高品質のアプリを構築する時間が減り、コーヒー :coffee:️ を楽しむ時間が増えます。
-
デザイナーの場合は、Sketch などのデザイン ツールを使用せずに IBAnimatable を使用して Interface Builder でデザインしたり、Sketch や Photoshop から既存のデザインを Interface Builder で迅速に実装したりできます。 IBAnimatable を使用すると、
ほとんどの設計作業を Interface Builder で行うことができるはずです。機能リクエストがある場合は、GitHub Issue を作成してください。バックログに入れます。 IBAnimatable を使用してデザインを行った場合は、プル リクエストまたは GitHub Issue を作成してお知らせください。 Readme ファイルに追加します。 -
開発者の場合は、機能に取り組んだりバグを修正したりできます。GitHub の問題をチェックしてバックログを確認してください。アプリで IBAnimatable を使用している場合は、プル リクエストまたは GitHub Issue を作成してお知らせください。 Readme ファイルに追加します。
-
英語が得意な方は、私の英語を訂正してください :grin: 。他の言語が得意な場合は、それらの言語で Readme ファイルを作成してください。
-
プロジェクトが気に入ったら、他のデザイナーや開発者と共有し、プロジェクトにスター :star2: を付けてください。 ��
インスピレーション
- IBDesignable と IBInspectable - プロジェクト全体はそれに基づいています。
- Sketch - Interface Builder は Sketch と同じくらい使いやすいはずです。
- Framer Studio - 1 か所でアニメーションをデザインしてプレビューできます。
- Meng To の Spring - たくさん盗みますこのプロジェクトのアニメーション パラメータの一部。
- Invision ToDo アプリ UI キット、デモ アプリの元のデザインはこの UI キットからのものであり、Interface Builder で再作成されています。インタラクション、ナビゲーション、アニメーションも追加しました。
ライセンス
IBAnimatable は MIT ライセンスに基づいてリリースされています。詳細については「ライセンス」を参照してください。
来自： https://github.com/JakeLin/IBAnimatable
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
