Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

1. はじめに

「Before After animation」というKotlinで記述されたアニメーションライブラリが、Android Example 365の「Before After animation library write in Kotlin」で公開されていましたので、試しに使ってみました。

2. 使用イメージ

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

  • 移動前

1lmitbduqj.png

  • 移動後

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.pngfevziomurtekin/BeforeAfterView

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

6. 終わりに

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

更新情報

promari
プログラミングとのご縁結びならプロマリへ。 プログラミングスクール「プロマリ」を運営している「たみと」と申します。 プログラミング歴20年の現役エンジニア。Javaを用いた業務アプリケーションのバックエンドの開発が得意ですが、最近はAndroidやJSを用いたフロントエンドの開発にも従事しています。弊社プロマリを通じて、次世代エンジニアの育成に取り組んでおります。
https://promari.jp/
programming-mariage
プログラミングスクール「プロマリ」を運営している株式会社パープルマリアージュです。
https://www.programming-mariage.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away