VOOZH about

URL: https://qiita.com/susieyy/items/1f28531a1c58d9158896

⇱ Swiftで作られたイケてるUIライブラリたち #iOS - Qiita


👁 Image
2056

Go to list of users who liked

2028

Share on X(Twitter)

Share on Facebook

Add to Hatena Bookmark

More than 5 years have passed since last update.

@susieyy(yohei sugigami)

Swiftで作られたイケてるUIライブラリたち

2056
Last updated at Posted at 2015-02-01

Spring ★431

👁 MengTo_Spring.jpg

手軽にアニメションが行えるライブラリです。SrotyBoardからアニメションの設定を行えるのがいいですね。

👁 MengTo_Spring.jpg

インストール

Xcodeに手動でドロップします。

サンプルコード

アニメションのコードはとってもシンプルです。

layer.animation = "squeezeDown"
layer.animate()

26種類のアニメションパターンを設定できます。

  • shake
  • pop
  • morph
  • squeeze
  • wobble
  • swing
  • flipX
  • flipY
  • fall
  • squeezeLeft
  • squeezeRight
  • squeezeDown
  • squeezeUp
  • slideLeft
  • slideRight
  • slideDown
  • slideUp
  • fadeIn
  • fadeOut
  • fadeInLeft
  • fadeInRight
  • fadeInDown
  • fadeInUp
  • zoomIn
  • zoomOut
  • flash

デモ

デモアプリでアニメションの動きを確認できます。

👁 MengTo_Spring.jpg

design+code

Springの開発元ではDesignとCodeを連携した開発手法の情報を有料で販売しています。$50です。ほしい。

👁 Design_Code__Learn_iOS_design_and_Xcode.jpg

PageMenu ★425

左右にスワイプすることで画面の表示をアニメションしながら切り替えるライブラリです。

👁 Move

インストール

CocoaPodsに対応しています。

CocoaPods

pod 'PageMenu'

サンプルコード

それぞれの画面はUIViewController単位で管理できます。

// Array to keep track of controllers in page menu
var controllerArray : [UIViewController] = []

// Create variables for all view controllers you want to put in the 
// page menu, initialize them, and add each to the controller array. 
// (Can be any UIViewController subclass)
// Make sure the title property of all view controllers is set
// Example:
var controller : UIViewController = UIViewController(nibName: "controllerNibName", bundle: nil)
controller.title = "SAMPLE TITLE"
controllerArray.append(controller)

// Initialize page menu with the controllers
pageMenu = CAPSPageMenu(viewControllers: controllerArray)

// Set frame for page menu
// Example:
pageMenu!.view.frame = CGRectMake(0.0, 0.0, self.view.frame.width, self.view.frame.height)

// Customize page menu to your liking (optional) or use default settings
// Example:
pageMenu!.scrollMenuBackgroundColor = UIColor(red: 30.0/255.0, green: 30.0/255.0, blue: 30.0/255.0, alpha: 1.0)
pageMenu!.viewBackgroundColor = UIColor(red: 20.0/255.0, green: 20.0/255.0, blue: 20.0/255.0, alpha: 1.0)
pageMenu!.selectionIndicatorColor = UIColor.orangeColor()
pageMenu!.bottomMenuHairlineColor = UIColor(red: 70.0/255.0, green: 70.0/255.0, blue: 80.0/255.0, alpha: 1.0)
pageMenu!.menuItemFont = UIFont(name: "HelveticaNeue", size: 13.0)
pageMenu!.menuHeight = 40.0

// Lastly add page menu as subview of base view controller view
// or use pageMenu controller in you view hierachy as desired
self.view.addSubview(pageMenu!.view)

BWWalkthrough ★790

かっこよくウォークスルーのページ遷移アニメションを行うライブラリです。

👁 Move

インストール

Xcodeに手動でドロップします。

サンプルコード

 // Get view controllers and build the walkthrough
 let stb = UIStoryboard(name: "Walkthrough", bundle: nil)
 let walkthrough = stb.instantiateViewControllerWithIdentifier(Master) as BWWalkthroughViewController
 let page_one = stb.instantiateViewControllerWithIdentifier(page1) as UIViewController
 let page_two = stb.instantiateViewControllerWithIdentifier(page2) as UIViewController
 let page_three = stb.instantiateViewControllerWithIdentifier(page3) as UIViewController

 // Attach the pages to the master
 walkthrough.delegate = self
 walkthrough.addViewController(page_one)
 walkthrough.addViewController(page_two)
 walkthrough.addViewController(page_three)

RAMAnimatedTabBarController ★1922

タブのボタでにアニメションを行えるライブラリです。

👁 Move

アニメションパターン

バウンスや回転など9種類のアニメションが利用できます。

  • RAMBounceAnimation
  • RAMLeftRotationAnimation
  • RAMRightRotationAnimation
  • RAMFlipLeftTransitionItemAniamtions
  • RAMFlipRightTransitionItemAniamtions
  • RAMFlipTopTransitionItemAniamtions
  • RAMFlipBottomTransitionItemAniamtions
  • RAMFrameItemAnimation
  • RAMFumeAnimation

コードサンプル

class RAMBounceAnimation : RAMItemAnimation {

 override func playAnimation(icon : UIImageView, textLable : UILabel) {
 playBounceAnimation(icon)
 textLable.textColor = textSelectedColor
 }

 override func deselectAnimation(icon : UIImageView, textLable : UILabel, defaultTextColor : UIColor) {
 textLable.textColor = defaultTextColor
 }

 override func selectedState(icon : UIImageView, textLable : UILabel) {
 textLable.textColor = textSelectedColor
 }

 func playBounceAnimation(icon : UIImageView) {

 let bounceAnimation = CAKeyframeAnimation(keyPath: "transform.scale")
 bounceAnimation.values = [1.0 ,1.4, 0.9, 1.15, 0.95, 1.02, 1.0]
 bounceAnimation.duration = NSTimeInterval(duration)
 bounceAnimation.calculationMode = kCAAnimationCubic

 icon.layer.addAnimation(bounceAnimation, forKey: "bounceAnimation")
 }
}

LTMorphingLabel ★1912

モーフィングのアニメションを利用したラベルです。

インストール

CocoaPodsとCarthageに対応しています。

CocoaPods

Podfile
pod 'LTMorphingLabel'

事前にSwift(DynamicFramework)に対応したCocoaPodsをインストールする必要があります。

Shell
$ gem install cocoapods --pre

Carthage

Cartfile
github "lexrus/LTMorphingLabel"

サンプルコード

let label = LTMorphingLabel(frame: CGRectMake(0,0,120,50))
label.text = "Test"
label.morphingEffect = .Evaporate

デモ

.Scale - default

👁 LTMorphingLabel

.Evaporate

👁 LTMorphingLabel-Evaporate

.Fall

👁 LTMorphingLabel-Fall

.Pixelate

👁 LTMorphingLabel-Pixelate

.Sparkle

👁 LTMorphingLabel-Sparkle

Side Menu ★

かっこ良くサイドメニューをオーバーレイして表示するライブラリです。

👁 Move

インストール

CocoaPodsとCarthageに対応しています。

CocoaPods

Podfile
pod 'YALSideMenu'

事前にSwift(DynamicFramework)に対応したCocoaPodsをインストールする必要があります。

Shell
$ gem install cocoapods --pre

Carthage

Cartfile
github "yalantis/Side-Menu.iOS"

サンプルコード

class MyFancyMenuViewController: UIViewController, Menu {
 @IBOutlet
 var menuItems = [UIView] ()
2056

Go to list of users who liked

2028
5

Go to list of comments

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2056

Go to list of users who liked

2028