【Android】【Library】「Before After animation」というアニメーションライブラリを使ってみました。

## 1. はじめに

「Before After animation」というKotlinで記述されたアニメーションライブラリが、[Android Example 365](https://androidexample365.com)の「[Before After animation library write in Kotlin](https://androidexample365.com/before-after-animation-library-write-in-kotlin/)」で公開されていましたので、試しに使ってみました。

## 2. 使用イメージ

スライドを左から右に移動させると画像が徐々に切り替わります。

- 移動前

![1lmitbduqj.png](https://img.esteem.ws/1lmitbduqj.png)

- 移動後

![vke0vpixjy.png](https://img.esteem.ws/vke0vpixjy.png)

## 3. 事前準備

以下を事前に準備しておいてください。

・KotlinプラグインがインストールされたAndroid Studio

## 4. セットアップ手順

### 4.1 build.gradleの編集

プロジェクトのbuild.gradleに対し、以下を追記します。

```
allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }   //  追記
}
```

モジュールのbuild.gradleに対し、以下を追記します。

```
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    // Before After animation library                                         // 追記
    implementation 'com.github.fevziomurtekin:BeforeAfterView:1.0.0'          // 追記
}
```

### 4.2 Activityの記述

MainActivityを記述します。

```
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}
```

### 4.3 Layoutファイルの記述

res/layout/activitymain.xmlに以下を記述します。

```
  <com.fevziomurtekin.beforeafterview.BeforeAfterView
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           app:bgColor="@android:color/black"
           app:sliderTintColor="@android:color/white"
           app:sliderIconTint="@android:color/white"
           app:afterSrc="@drawable/after"
           app:beforeSrc="@drawable/before"
           app:imageHeightPercent="0.5"
           app:sliderWidthPercent="0.75"
   />
```

属性は以下のように編集できます。

|ATTRIBUTE         |DESCRIPTION                                                                |
|:-----------------|:--------------------------------------------------------------------------|
|bgColor	   |The color in int of the background color (by default @android:color/black) |
|sliderTintColor   |The color int of the slider tint color (by default @android:color/white)   |
|sliderIconTint	   |The size in int of the slider icon color (by default @android:color/white) |
|afterSrc	   |The resource in int of the imageview src                                   |
|beforeSrc         |The resource in int of the imageview src                                   |
|imageHeightPercent|The height percent of the imageView (by default 0.55f)                     |
|sliderWidthPercent|The width percent of the sliderView (by default 0.65f)                     |

### 4.4 画像ファイルの準備

res/drawable配下に、レイアウトで指定した画像ソースのafter.jpg、before.jpgを格納します。画像は用意しておいてください。ただし、サイズの大きな画像ファイルの場合は、読み込み時にエラーとなります。

## 5. ソース

ソースはGithubに公開されています。

![zxicx39v2q.png](https://img.esteem.ws/zxicx39v2q.png)[fevziomurtekin](http://github.com/fevziomurtekin)/[BeforeAfterView](http://github.com/fevziomurtekin/BeforeAfterView)

The Apache License 2.0 ライセンスです。

## 6. 終わりに

以上で簡単に画像アニメーションが作成できます。プロジェクトに組み込んで使用したり、アニメーションをカスタマイズしたりして是非試してみては如何でしょうか。

## 更新情報

- Kotlin
  - Kotlin入門
     - [第1章 はじめてのKotlinアプリケーション](https://qiita.com/promari/items/4d802f3419bdeb46ab61)
     - [第2章 Kotlinの文法](https://qiita.com/promari/items/e1c88aa8c02b82358a9d) 

- Android
  - Library
      - [「Before After animation」というアニメーションライブラリを使ってみました。](https://qiita.com/promari/items/ec085e576c031cd16228)【New】
- Java
  - Java 10
      - [【Java】Java 10で拡張された型推論について注意すべきこと](https://qiita.com/promari/items/a5bb8d1174b3ca8c9426) 

- IDE
  - IntelliJ IDEA
      - [【開発環境】ローカル環境への統合開発環境(IDE): IntelliJ IDEAのインストール手順](https://qiita.com/promari/items/fee4599ec3a02a77aeac)
      - [【開発環境】統合開発環境(IDE) IntelliJ IDEAの日本語化とカスタマイズ](https://qiita.com/promari/items/b6df8db4fb24c5e0b586)
      - [【開発環境】【IntelliJ IDEA】LiveEditを使ってHTML/CSSを動的に反映させる。](https://qiita.com/drafts/ea1c127cca85cc62f4d0)