Interface Builder_html/css_WEB-ITnose での UI、インタラクション、アニメーションのデザインとプロトタイプの作成-htmlチュートリアル-php.cn

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 で再作成されています。インタラクション、ナビゲーション、アニメーションも追加しました。