8
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[kotlin]アンドロイドでViewにアニメーションを設定する

Last updated at Posted at 2020-02-04

#今回やること
TextViewにアニメーションを設定して**「タップしてアニメーション発動 -> アニメーション終了時に画面遷移」**の動きを実装する
公式ドキュメント :https://developer.android.com/guide/topics/resources/animation-resource
これ↓

#実装
##アニメーションの定義
流れ的にはアニメーションをxmlファイルで定義してそれをテキストビューに設定する

resフォルダ直下のanimフォルダ(デフォルトではないので新規追加する)にアニメーションを定義した以下のxmlファイルを置く

scale_down_up.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="500"
        android:fillAfter="true"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.7"
        android:toYScale="0.7" />
    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/linear_interpolator"
        android:toAlpha="0.7" />
    <set>
        <scale
            android:duration="500"
            android:fillAfter="true"
            android:fromXScale="1.0"
            android:fromYScale="1.0"
            android:interpolator="@android:anim/linear_interpolator"
            android:pivotX="50%"
            android:pivotY="50%"
            android:startOffset="500"
            android:toXScale="1.43"
            android:toYScale="1.43" />
        <alpha
            android:duration="500"
            android:fromAlpha="1.0"
            android:interpolator="@android:anim/linear_interpolator"
            android:startOffset="500"
            android:toAlpha="1.43" />
    </set>
</set>

二つのアニメーションを定義してみた。1つ目のscaleでサイズを小さくしてstartOffsetで1個めのアニメーション終了時に2個目のサイズを大きくするscaleを定義

##アニメーションをセット
レイアウトファイルに適当にTextViewを配置する
キャプチcafvxbxャ.PNG

activity_main.xml
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/animText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:elevation="6dp"
        android:text="TextView"
        android:textSize="50sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivityTextViewにアニメーションをセットする
テキストをクリックしたときにアニメーションが発動するようにする

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

        animText.setOnClickListener{
            // animation をつける
            AnimationUtils.loadAnimation(this.applicationContext, R.anim.scale_down_up).also{
                animText.startAnimation(it)
            }

            // animationリスナーをセット
            animText.animation.setAnimationListener(object: Animation.AnimationListener{
                override fun onAnimationRepeat(animation: Animation?) {

                }
                override fun onAnimationEnd(animation: Animation?) {
                    //アニメーションが終わったら遷移
                    val intent = Intent(applicationContext, SubActivity::class.java)
                    startActivity(intent)
                }
                override fun onAnimationStart(animation: Animation?) {

                }
            })
        }
    }

AnimationListenerを使ってアニメーションが終了したときの処理を書く

おわり

8
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?