ESTMusicIndicator:實現了類似網易云音樂 iOS 的音樂頻譜標識的動畫效果

jopen 10年前發布 | 31K 次閱讀 iOS開發 移動開發 ESTMusicIndicator

Cool Animated music indicator view written in Swift.

ESTMusicIndicator is an implementation of NAKPlaybackIndicatorView in Swift for iOS 8.

<> Made With :heart: By The EST Group.

MusicIndicator

You may interested in my other project

Requirements

  • An iPhone/iPad running iOS 8.0+
  • Xcode 7.0 or above

Screenshots

MusicIndicator

Run the Demo

$ open Example/ESTMusicIndicator.xcodeproj

Installation

CocoaPods

CocoaPods is a dependency manager for Cocoa projects.

CocoaPods 0.36 adds supports for Swift and embedded frameworks. You can install it with the following command:

$ gem install cocoapods

To integrate ESTMusicIndicatorView into your Xcode project using CocoaPods, specify it in your Podfile:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!

pod 'ESTMusicIndicator', '0.1.1'

Then, run the following command:

$ pod install

You can check out this link for more information about how to use CocoaPods.

Manually

  1. Clone this project or download it.
  2. Drag and drop Classes folder to your workspace

Usage

Simple Example:

let indicator = ESTMusicIndicatorView.init(frame: CGRectZero)
indicator.tintColor = UIColor.redColor()
indicator.sizeToFit()
view.addSubview(indicator)

Initially the state property is ESTMusicIndicatorViewStateStopped and the hidesWhenStopped property is YES. Thus, the view is hidden at this time.

The view appears and the bars start animation.

indicator.state = .ESTMusicIndicatorViewStatePlaying;

The bars stop animation and become idle.

indicator.state = .ESTMusicIndicatorViewStatePaused;

The view becomes hidden.

indicator.state = .ESTMusicIndicatorViewStateStopped;

You can use ESTMusicIndicatorView in both code and Storyboard, and it works well with both Auto Layout and frame-based layout.

Code with Auto Layout

let indicator = ESTMusicIndicatorView.init(frame: CGRectZero)
indicator.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(indicator)

Then, add some positioning layout constraints. Note that normally you don't need to add sizing constraints since ESTMusicIndicatorView has an intrinsic content size. It will be automatically resized to fit its content.

Code with Frame-Based Layout

let indicator = ESTMusicIndicatorView.init(frame: CGRectZero)
view.addSubview(indicator)
indicator.sizeToFit() // Resize itself to fit its content.

Customization

Color

The color of the bars can be changed by setting tintColor property (UIView) of the view or its ancestor view.

Size

Normally the view can be automatically resized to fit its content by:

  • Omitting sizing constraints in Auto Layout, since it has an intrinsic content size.
  • Calling sizeToFit in frame-based layout.

Or if you explicitly specify size, the bars will be placed in the center of the view.

Contact

You can ping me on 推ter or follow me on Weibo If you find an issue.

Contributing

Thank you for your interest in contributing to Hodor! Your ideas for improving this app are greatly appreciated. The best way to contribute is by submitting a pull request. I'll do my best to respond to you as soon as possible. You can also submit a new GitHub issue if you find bugs or have questions.

項目地址: https://github.com/Aufree/ESTMusicIndicator

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!