Rasukaru BLOG

アプリでウェットな人生を。開発に関することやその他諸々。備忘録。

BAFluidViewを使ってみる

Swift 投稿日:2017/02/15

画面に常に動いているアニメーションが欲しいなと思って探してたらいい感じのライブラリを見つけたのはよいもののSwiftで記述されたものがなかったのでメモ。
ちなみにBAFluidViewはこんな感じに水位が上がったり下がったりのアニメーションをしてくれるライブラリ。

公式HP: https://github.com/antiguab/BAFluidView

example1.gif example4.gif

インストール方法

インストールにはCocoaPodsを使用。Podfileに以下を記述。
pod "BAFluidView"
インストール後xcworkspaceプロジェクトを開くとSwift3.0にコンバートしますかなどと出てくるが基本的にすべてOKで進む(自分の場合アラートが出てきたがBAFluidViewにチェックが入っていなかったのでそのままconvertを押した)

①ひたすら下から上にアニメーションする

ViewController.swift

import UIKit
import BAFluidView

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        //アニメーションのViewを生成
        let animeView = BAFluidView(frame: self.view.frame)
        //波の高さを設定(0~1.0)
        animeView.fill(to: 1.0)
        //波の境界線の色
        animeView.strokeColor = .white
        //波の色
        animeView.fillColor = UIColor(red: 0.274, green: 0.288, blue: 0.297, alpha: 1.0)
        //アニメーション開始(コメントアウトしてもアニメーションされる)
        animeView.startAnimation()
        self.view.addSubview(animeView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
  }


                    

②ある高さでひたすら波打つ

ViewController.swift

import UIKit
import BAFluidView

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        //アニメーションのViewを生成(startElevationで開始位置を設定)
        let animeView = BAFluidView(frame: self.view.frame,startElevation: 0.4)
        //波の高さを開始位置と同じにする
        animeView?.fill(to: 0.4)
        //波の境界線の色
        animeView?.strokeColor = .white
        //波の色
        animeView?.fillColor = UIColor(red: 0.274, green: 0.288, blue: 0.297, alpha: 1.0)

        //公式ではこの一文を入れていたが自分の環境では入れるとうまく動かなかった
        //animeView.keepStationary()

        //アニメーション開始(コメントアウトしてもアニメーションされる)
        //animeView.startAnimation()

        self.view.addSubview(animeView!)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

                    

最後に

とりあえず自分の用件を満たす動きは確認できたので満足。
画像を波打たせることもできるようだがそれはまた次回。また、BridgingHeaderを作成しないといけないなど書いてあるページもあったが自分の環境では特に必要なかった。


コメントを読み込んでいます...