Merge pull request #113 from depromeet/feature/#112-flip-card-anim

[FEAT/#112] 친해지기 뒤집기 애니메이션 적용
depromeet · Jan 28, 2024 · 7ff1a85 · 7ff1a85
2 parents 267612f + 51389f4
commit 7ff1a85
Show file tree

Hide file tree

Showing 35 changed files with 408 additions and 55 deletions.
diff --git a/app/src/main/java/com/teumteum/teumteum/presentation/familiar/introduce/IntroduceActivity.kt b/app/src/main/java/com/teumteum/teumteum/presentation/familiar/introduce/IntroduceActivity.kt
@@ -3,7 +3,6 @@ package com.teumteum.teumteum.presentation.familiar.introduce
 import android.content.Intent
 import android.os.Bundle
 import androidx.activity.viewModels
-import androidx.core.content.ContextCompat
 import androidx.recyclerview.widget.RecyclerView
 import com.google.android.material.tabs.TabLayoutMediator
 import com.teumteum.base.BindingActivity
@@ -17,9 +16,7 @@ import com.teumteum.teumteum.R
 import com.teumteum.teumteum.databinding.ActivityIntroduceBinding
 import com.teumteum.teumteum.presentation.familiar.neighbor.NeighborActivity.Companion.EXTRA_NEIGHBORS_IDS
 import com.teumteum.teumteum.presentation.familiar.shake.ShakeActivity
-import com.teumteum.teumteum.util.custom.view.model.FrontCard
 import dagger.hilt.android.AndroidEntryPoint
-import timber.log.Timber
 
 
 @AndroidEntryPoint
@@ -29,7 +26,6 @@ class IntroduceActivity
     private val introduceAdapter = IntroduceAdapter()
     private val viewpagerList = ArrayList<Friend>()
     private val viewModel by viewModels<IntroduceViewModel>()
-
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         getIntroduceUsers()
@@ -39,13 +35,12 @@ class IntroduceActivity
         initObserver()
     }
 
-    private fun getIntroduceUsers(){
+    private fun getIntroduceUsers() {
         val ids = intent.getStringExtra(EXTRA_NEIGHBORS_IDS) ?: ""
-        Timber.tag("테스따").d("$ids")
         viewModel.getIntroduceUser(id = ids)
     }
 
-    private fun initObserver(){
+    private fun initObserver() {
         viewModel.introduceUser.observe(this) { friends ->
             introduceAdapter.submitList(friends)
         }

diff --git a/app/src/main/java/com/teumteum/teumteum/presentation/familiar/introduce/IntroduceAdapter.kt b/app/src/main/java/com/teumteum/teumteum/presentation/familiar/introduce/IntroduceAdapter.kt
@@ -1,5 +1,8 @@
 package com.teumteum.teumteum.presentation.familiar.introduce
 
+import android.animation.AnimatorInflater
+import android.animation.AnimatorSet
+import android.annotation.SuppressLint
 import android.view.LayoutInflater
 import android.view.ViewGroup
 import androidx.recyclerview.widget.DiffUtil
@@ -32,10 +35,58 @@ class IntroduceAdapter() :
 
     class ItemViewHolder(private val binding: ItemIntroduceBinding) :
         RecyclerView.ViewHolder(binding.root) {
+        private lateinit var frontAnimation: AnimatorSet
+        private lateinit var backAnimation: AnimatorSet
+        private var isFront = true
+
+        init {
+            initCardAnim()
+        }
+
+        @SuppressLint("ResourceType")
+        private fun initCardAnim() {
+            val scale = itemView.resources.displayMetrics.density
+            binding.cardviewFront.cameraDistance = 8000 * scale
+            binding.cardviewBack.cameraDistance = 8000 * scale
+
+            frontAnimation = AnimatorInflater.loadAnimator(
+                itemView.context,
+                com.teumteum.base.R.anim.card_reverse_front
+            ) as AnimatorSet
+            backAnimation = AnimatorInflater.loadAnimator(
+                itemView.context,
+                com.teumteum.base.R.anim.card_reverse_back
+            ) as AnimatorSet
+
+            binding.cardviewFront.setOnClickListener {
+                startAnim()
+            }
+            binding.cardviewBack.setOnClickListener {
+                startAnim()
+            }
+        }
+
+        private fun startAnim() {
+            if (isFront) {
+                frontAnimation.setTarget(binding.cardviewFront)
+                backAnimation.setTarget(binding.cardviewBack)
+                frontAnimation.start()
+                backAnimation.start()
+                isFront = false
+            } else {
+                frontAnimation.setTarget(binding.cardviewBack)
+                backAnimation.setTarget(binding.cardviewFront)
+                backAnimation.start()
+                frontAnimation.start()
+                isFront = true
+            }
+        }
+
         fun bind(item: Friend) {
-            val imageRes = IdMapper.getCardCharacterDrawableById(characterId = item.characterId)
+            val frontImageRes = IdMapper.getFrontCardCharacterDrawableById(characterId = item.characterId)
+            val backImageRes = IdMapper.getBackCardCharacterDrawableById(characterId = item.characterId)
 
-            with(binding.cvCharacter) {
+            with(binding.cardviewFront) {
                 tvName.text = item.name
                 tvCompany.text = item.job.name
                 tvJob.text = item.job.detailClass
@@ -44,10 +95,23 @@ class IntroduceAdapter() :
                 tvMbti.text = item.mbti
 
                 Glide.with(itemView.context)
-                    .load(imageRes)
+                    .load(frontImageRes)
                     .apply(RequestOptions.centerInsideTransform())
                     .into(ivCharacter)
             }
+
+            with(binding.cardviewBack) {
+                tvGoalTitle.text = "GOAL"
+                tvGoalContent.text = item.goal
+
+                Glide.with(itemView.context)
+                    .load(backImageRes)
+                    .apply(RequestOptions.centerInsideTransform())
+                    .into(ivCharacter)
+
+                isModify = false
+                isModifyDetail = false
+            }
         }
     }
 

diff --git a/app/src/main/java/com/teumteum/teumteum/presentation/familiar/neighbor/NeighborActivity.kt b/app/src/main/java/com/teumteum/teumteum/presentation/familiar/neighbor/NeighborActivity.kt
@@ -62,19 +62,17 @@ class NeighborActivity : BindingActivity<ActivityNeighborBinding>(R.layout.activ
     private fun initMyCharacter() {
         val myInfo = AuthUtils.getMyInfo(this)
         if (myInfo != null) {
+            val view = binding.cvMe
             setCharacterView(
                 neighbor = NeighborEntity(
                     id = myInfo.id,
                     name = myInfo.name,
                     jobDetailClass = myInfo.job.detailClass,
                     characterId = myInfo.characterId
                 ),
-                view = binding.cvMe
+                view = view
             ).apply {
-                with(binding.cvMe){
-                    isVisible = true
-                    isEnabled = false //내 캐릭터 터치 시 체크박스 활성화 방지
-                }
+                view.isEnabled = false //내 캐릭터 터치 시 체크박스 활성화 방지
             }
         }
     }
@@ -114,6 +112,7 @@ class NeighborActivity : BindingActivity<ActivityNeighborBinding>(R.layout.activ
     }
 
     private fun setCharacterView(neighbor: NeighborEntity, view: CharacterView) {
+        view.isVisible = true
         view.characterName.text = neighbor.name
         view.characterJob.text = neighbor.jobDetailClass
         view.characterImage.setImageResource(IdMapper.getCharacterDrawableById(neighbor.characterId.toInt()))

diff --git a/app/src/main/java/com/teumteum/teumteum/presentation/familiar/topic/TopicActivity.kt b/app/src/main/java/com/teumteum/teumteum/presentation/familiar/topic/TopicActivity.kt
@@ -56,50 +56,71 @@ class TopicActivity
                 Topic(
                     topicNumber = "TOPIC.1",
                     topicTitle = "모여서 각자\n디자인",
-                    image = ContextCompat.getDrawable(
+                    frontImage = ContextCompat.getDrawable(
                         this@TopicActivity,
-                        R.drawable.ic_balance_background_1
+                        R.drawable.ic_front_balance_background_1
+                    ),
+                    backImage = ContextCompat.getDrawable(
+                        this@TopicActivity,
+                        R.drawable.ic_back_balance_background_1
                     )
                 )
             )
             add(
                 Topic(
                     topicNumber = "TOPIC.2",
                     topicTitle = "모여서 각자\n디자인",
-                    image = ContextCompat.getDrawable(
+                    frontImage = ContextCompat.getDrawable(
+                        this@TopicActivity,
+                        R.drawable.ic_front_balance_background_2
+                    ),
+                    backImage = ContextCompat.getDrawable(
                         this@TopicActivity,
-                        R.drawable.ic_balance_background_2
+                        R.drawable.ic_back_balance_background_2
                     )
                 )
             )
             add(
                 Topic(
                     topicNumber = "TOPIC.3",
                     topicTitle = "모여서 각자\n디자인",
-                    image = ContextCompat.getDrawable(
+                    frontImage = ContextCompat.getDrawable(
+                        this@TopicActivity,
+                        R.drawable.ic_front_balance_background_3
+                    ),
+                    backImage = ContextCompat.getDrawable(
                         this@TopicActivity,
-                        R.drawable.ic_balance_background_3
+                        R.drawable.ic_back_balance_background_3
                     )
                 )
             )
             add(
                 Topic(
                     topicNumber = "TOPIC.4",
                     topicTitle = "모여서 각자\n디자인",
-                    image = ContextCompat.getDrawable(
+                    frontImage = ContextCompat.getDrawable(
                         this@TopicActivity,
-                        R.drawable.ic_balance_background_4
+                        R.drawable.ic_front_balance_background_4
+                    ),
+                    backImage = ContextCompat.getDrawable(
+                        this@TopicActivity,
+                        R.drawable.ic_back_balance_background_4
                     )
                 )
             )
             add(
                 Topic(
                     topicNumber = "TOPIC.5",
                     topicTitle = "모여서 각자\n디자인",
-                    image = ContextCompat.getDrawable(
+                    frontImage = ContextCompat.getDrawable(
+                        this@TopicActivity,
+                        R.drawable.ic_front_balance_background_5
+                    ),
+                    backImage = ContextCompat.getDrawable(
                         this@TopicActivity,
-                        R.drawable.ic_balance_background_5
+                        R.drawable.ic_back_balance_background_5
                     )
+
                 )
             )
         }

diff --git a/app/src/main/java/com/teumteum/teumteum/presentation/familiar/topic/TopicAdapter.kt b/app/src/main/java/com/teumteum/teumteum/presentation/familiar/topic/TopicAdapter.kt
@@ -1,12 +1,16 @@
 package com.teumteum.teumteum.presentation.familiar.topic
 
+import android.animation.AnimatorInflater
+import android.animation.AnimatorSet
+import android.annotation.SuppressLint
 import android.view.LayoutInflater
 import android.view.ViewGroup
 import androidx.recyclerview.widget.DiffUtil
 import androidx.recyclerview.widget.ListAdapter
 import androidx.recyclerview.widget.RecyclerView
 import com.bumptech.glide.Glide
 import com.bumptech.glide.request.RequestOptions
+import com.teumteum.teumteum.R
 import com.teumteum.teumteum.databinding.ItemTopicBinding
 import com.teumteum.teumteum.presentation.familiar.topic.model.Topic
 
@@ -31,15 +35,70 @@ class TopicAdapter() :
 
     class ItemViewHolder(private val binding: ItemTopicBinding) :
         RecyclerView.ViewHolder(binding.root) {
+        private lateinit var frontAnimation: AnimatorSet
+        private lateinit var backAnimation: AnimatorSet
+        private var isFront = true
+
+        init {
+            initCardAnim()
+        }
+
+        @SuppressLint("ResourceType")
+        private fun initCardAnim() {
+            val scale = itemView.resources.displayMetrics.density
+            binding.clFrontTopic.cameraDistance = 8000 * scale
+            binding.clBackTopic.cameraDistance = 8000 * scale
+
+            frontAnimation = AnimatorInflater.loadAnimator(
+                itemView.context,
+                com.teumteum.base.R.anim.card_reverse_front
+            ) as AnimatorSet
+            backAnimation = AnimatorInflater.loadAnimator(
+                itemView.context,
+                com.teumteum.base.R.anim.card_reverse_back
+            ) as AnimatorSet
+
+            binding.clFrontTopic.setOnClickListener {
+                startAnim()
+            }
+            binding.clBackTopic.setOnClickListener {
+                startAnim()
+            }
+        }
+
+        private fun startAnim() {
+            if (isFront) {
+                frontAnimation.setTarget(binding.clFrontTopic)
+                backAnimation.setTarget(binding.clBackTopic)
+                frontAnimation.start()
+                backAnimation.start()
+                isFront = false
+            } else {
+                frontAnimation.setTarget(binding.clBackTopic)
+                backAnimation.setTarget(binding.clFrontTopic)
+                backAnimation.start()
+                frontAnimation.start()
+                isFront = true
+            }
+        }
         fun bind(item: Topic) {
+            //front
             with(binding) {
                 tvTopicNumber.text = item.topicNumber
                 tvTopicTitle.text = item.topicTitle
 
                 Glide.with(itemView.context)
-                    .load(item.image)
+                    .load(item.frontImage)
+                    .apply(RequestOptions.centerInsideTransform())
+                    .into(binding.ivFrontBalanceBackground)
+            }
+
+            //back
+            with(binding) {
+                Glide.with(itemView.context)
+                    .load(item.backImage)
                     .apply(RequestOptions.centerInsideTransform())
-                    .into(binding.ivBalanceBackground)
+                    .into(binding.ivBackBalanceBackground)
             }
         }
     }

diff --git a/app/src/main/java/com/teumteum/teumteum/presentation/familiar/topic/model/Topic.kt b/app/src/main/java/com/teumteum/teumteum/presentation/familiar/topic/model/Topic.kt
@@ -5,5 +5,6 @@ import android.graphics.drawable.Drawable
 data class Topic(
     val topicNumber: String? = "",
     val topicTitle: String? = "",
-    val image: Drawable? = null
+    val frontImage: Drawable? = null,
+    val backImage: Drawable? = null
 )
diff --git a/app/src/main/java/com/teumteum/teumteum/util/IdMapper.kt b/app/src/main/java/com/teumteum/teumteum/util/IdMapper.kt
@@ -23,7 +23,7 @@ object IdMapper {
         }
     }
 
-    fun getCardCharacterDrawableById(characterId: Int): Int {
+    fun getFrontCardCharacterDrawableById(characterId: Int): Int {
         return when (characterId) {
             0 -> R.drawable.ic_card_front_ghost
             1 -> R.drawable.ic_card_front_star
@@ -41,6 +41,25 @@ object IdMapper {
         }
     }
 
+    fun getBackCardCharacterDrawableById(characterId: Int): Int {
+        return when (characterId) {
+            0 -> R.drawable.ic_card_back_ghost
+            1 -> R.drawable.ic_card_back_star
+            2 -> R.drawable.ic_card_back_bear
+            3 -> R.drawable.ic_card_back_raccon
+            4 -> R.drawable.ic_card_back_cat
+            5 -> R.drawable.ic_card_back_rabbit
+            6 -> R.drawable.ic_card_back_fox
+            7 -> R.drawable.ic_card_back_water
+            8 -> R.drawable.ic_card_back_penguin
+            9 -> R.drawable.ic_card_back_dog
+            10 -> R.drawable.ic_card_back_mouse
+            11 -> R.drawable.ic_card_back_panda
+            else -> R.drawable.ic_card_back_raccon //기본값
+        }
+    }
+
+
     fun getColorByCharacterId(characterId: Int): Int {
         return when (characterId) {
             0 -> Color.parseColor("#5DEBFF") // For ic_card_ghost

diff --git a/app/src/main/res/drawable-night/ic_back_balance_background_1.xml b/app/src/main/res/drawable-night/ic_back_balance_background_1.xml
@@ -0,0 +1,10 @@
+ <vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="264dp"
+    android:height="384dp"
+    android:viewportWidth="264"
+    android:viewportHeight="384">
+  <path
+      android:pathData="M96,0H120H144H168H192V24H216V48H240V72H264V96V120V144V168V192V216V240V264V288V312H240V336H216V360H192V384H168H144H120H96H72V360H48V336H24V312H0V288V264V240V216V192V168V144V120V96V72H24V48H48V24H72V0H96Z"
+      android:fillColor="#444444"
+      android:fillType="evenOdd"/>
+</vector>