0
0

【Android】動かしたViewをフェードアウトさせる【Kotlin】

Last updated at Posted at 2024-02-11

はじめに

前々回の 【Android】Viewをドラッグして移動させる【Kotlin】
前回の 【Android】ドラッグしたViewを回転させる【Kotlin】

に引き続き、今回はViewをフェードアウトさせるアニメーションを作っていきます。

実践

+  lateinit var textView: TextView

    @SuppressLint("ClickableViewAccessibility", "MissingInflatedId")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

-        val textView = findViewById(R.id.text_view)
+        textView = findViewById(R.id.text_view)

+        // フェードアウトアニメーション用のアニメーション開始位置をインスタンス化
+         var actionDownTopPosition = 0

省略


+         when (event.action) {
+             MotionEvent.ACTION_DOWN -> {
+                 actionDownTopPosition = view.top
+             }


+                MotionEvent.ACTION_UP -> {
+                    val translation: ObjectAnimator

+                    if (view.top > actionDownTopPosition) {
+                        // 下方向へフェードアウト
+                        translation =
+                            ObjectAnimator.ofFloat(
+                                view,
+                                "translationY",
+                                1200f
+                            )
+                        closeAnimation(translation)
+                    } else if (view.top < actionDownTopPosition) {
+                        // 上方向へフェードアウト
+                        translation =
+                            ObjectAnimator.ofFloat(
+                                view,
+                                "translationY",
+                                -1200f
+                            )
+                        closeAnimation(translation)
+                    } 
                    
-                        // 元に戻る
-                        view.layout(
-                            homePositionX,
-                            homePositionY,
-                            homePositionX + view.width,
-                            homePositionY + view.height
-                        )

省略

+    // フェードアウトアニメーション
+    private fun closeAnimation(
+        translation: ObjectAnimator
+    ) {
+        translation.apply {
+                    interpolator = OvershootInterpolator()
+                    duration = 500L
+                    start()
+                    .addListener(
+                        object : Animator.AnimatorListener {
+                            override fun onAnimationStart(animation: Animator) {
+                            }

+                            override fun onAnimationEnd(p0: Animator) {
+                                textView.isGone
+                            }

+                            override fun onAnimationCancel(p0: Animator) {
+                            }

+                           override fun onAnimationRepeat(p0: Animator) {
+                            }
+                        }
+                    )
+    }

上方向に動かした時は 上方向に、下方向に動かした時は下方向にフェードアウトしていくようにできました!

Videotogif (2).gif

0
0
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
0
0