31. 【Android/Kotlin】Animation

はじめに
設定事項
Animationのxmlファイルを作成
ActivityにAnimationの設定およびレイアウトのxml作成
アプリ起動
終わりに

はじめに

DreamHanksのMOONです。

前回は「ProgressBar」というViewについて説明しました。

30. 【Android/Kotlin】ProgressBar

今回はアンドロイドのAnimationについて説明していきます。

アンドロイドでのAnimationとは

Viewにいろんなアニメーション効果を適用することです。

設定事項

・Animationのxmlファイルを作成

・ActivityにAnimationの設定およびレイアウトのxml作成

Animationのxmlファイルを作成

「res」以下に「anim」というパッケージを生成

「anim」パッケージに下記のxmlを作成

fade_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >

    <alpha
        android:duration="1000"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1.0" />

</set>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:fillAfter="true" >

<alpha

android:duration="1000"

android:fromAlpha="0.0"

android:interpolator="@android:anim/accelerate_interpolator"

android:toAlpha="1.0" />

</set>

slide_up.xml

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >

    <scale
        android:duration="500"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXScale="1.0"
        android:toYScale="0.0" />

</set>

<set xmlns:android="http://schemas.android.com/apk/res/android"

android:fillAfter="true" >

<scale

android:duration="500"

android:fromXScale="1.0"

android:fromYScale="1.0"

android:interpolator="@android:anim/linear_interpolator"

android:toXScale="1.0"

android:toYScale="0.0" />

</set>

ActivityにAnimationの設定およびレイアウトのxml作成

AnimaitonActivity.kt

package com.example.practiceapplication

import android.os.Bundle
import android.view.animation.AnimationUtils
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity


class AnimationActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_animation)

        val slide_up_tv = findViewById<TextView>(R.id.slide_up_tv)
        val anim_btn = findViewById<Button>(R.id.anim_btn)

        //fade_inアニメーションを設定
        val fade_in = AnimationUtils.loadAnimation(applicationContext, R.anim.fade_in)

        //ボタンにfaide_inアニメーションを適用
        anim_btn.startAnimation(fade_in)

        //slide_upアニメーションを設定
        val slide_up = AnimationUtils.loadAnimation(applicationContext, R.anim.slide_up)

        //アニメーションボタンのクリックイベントを設定
        anim_btn.setOnClickListener {
            //テキストにslide_upアニメーションを適用
            slide_up_tv.startAnimation(slide_up)
        }

    }
}

package com.example.practiceapplication

import android.os.Bundle

import android.view.animation.AnimationUtils

import android.widget.Button

import android.widget.TextView

import androidx.appcompat.app.AppCompatActivity

class AnimationActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_animation)

val slide_up_tv = findViewById<TextView>(R.id.slide_up_tv)

val anim_btn = findViewById<Button>(R.id.anim_btn)

//fade_inアニメーションを設定

val fade_in = AnimationUtils.loadAnimation(applicationContext, R.anim.fade_in)

//ボタンにfaide_inアニメーションを適用

anim_btn.startAnimation(fade_in)

//slide_upアニメーションを設定

val slide_up = AnimationUtils.loadAnimation(applicationContext, R.anim.slide_up)

//アニメーションボタンのクリックイベントを設定

anim_btn.setOnClickListener {

//テキストにslide_upアニメーションを適用

slide_up_tv.startAnimation(slide_up)

}

レイアウトのxmlファイルを作成

activity_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".AnimationActivity"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/slide_up_tv"
        android:textSize="20dp"
        android:text="Slide Up!!!" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/anim_btn"
        android:text="アニメーション"/>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context=".AnimationActivity"

android:gravity="center">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/slide_up_tv"

android:textSize="20dp"

android:text="Slide Up!!!" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/anim_btn"

android:text="アニメーション"/>

</LinearLayout>

アプリ起動

・初期の画面（アニメーションボタンがfade_in効果に適用）

・ボタンをクリックした場合（Slide Up!!! テキストがslide_up効果で見えなくなります。）

終わりに

アンドロイドのAnimationについて説明しました。

次回はアンドロイドで絵を描けるペイント機能を追加していきます。

32. 【Android/Kotlin】ペイント