varnitgoyal95/super-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

AE-8413 | Loan Detail Next CTA Animation Experiment (#4759)

Browse Source
This commit is contained in:
Shivam Goyal
2022-12-27 14:17:14 +05:30
committed by GitHub Enterprise
parent 78a6b0dcf7
commit 45f9b71986
5 changed files with 128 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/src/main/assets/cta_chevron.json Normal file
View File

@@ -0,0 +1 @@
{"v":"4.8.0","meta":{"g":"LottieFiles AE 3.1.1","a":"","k":"","d":"","tc":""},"fr":29.9700012207031,"ip":0,"op":75.0000030548126,"w":26,"h":16,"nm":"Chevron","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Layer 2 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.146,"y":1},"o":{"x":0.122,"y":0},"t":0,"s":[15,8,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.602,"y":1},"o":{"x":0.659,"y":0},"t":30,"s":[19.188,8,0],"to":[0,0,0],"ti":[0,0,0]},{"t":60.0000024438501,"s":[15,8,0]}],"ix":2},"a":{"a":0,"k":[2.981,4.981,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-0.26,0.26],[-0.261,-0.26],[0,0],[0.26,-0.261],[0,0],[0.26,0.26],[-0.26,0.26],[0,0],[0,0]],"o":[[0.26,-0.26],[0,0],[0.26,0.26],[0,0],[-0.261,0.26],[-0.26,-0.26],[0,0],[0,0],[-0.26,-0.261]],"v":[[-2.471,-4.471],[-1.529,-4.471],[2.471,-0.471],[2.471,0.471],[-1.529,4.471],[-2.471,4.471],[-2.471,3.529],[1.057,-0.001],[-2.471,-3.529]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[2.981,4.981],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":75.0000030548126,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Layer 1 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.429,"y":1},"o":{"x":0.122,"y":0},"t":0,"s":[8,8,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.603,"y":1},"o":{"x":0.802,"y":0},"t":20,"s":[12.5,8,0],"to":[0,0,0],"ti":[0,0,0]},{"t":55.0000022401959,"s":[8,8,0]}],"ix":2},"a":{"a":0,"k":[2.981,4.981,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-0.26,0.26],[-0.261,-0.26],[0,0],[0.26,-0.261],[0,0],[0.26,0.26],[-0.26,0.26],[0,0],[0,0]],"o":[[0.26,-0.26],[0,0],[0.26,0.26],[0,0],[-0.261,0.26],[-0.26,-0.26],[0,0],[0,0],[-0.26,-0.261]],"v":[[-2.471,-4.471],[-1.529,-4.471],[2.471,-0.471],[2.471,0.471],[-1.529,4.471],[-2.471,4.471],[-2.471,3.529],[1.057,-0.001],[-2.471,-3.529]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[2.981,4.981],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":75.0000030548126,"st":0,"bm":0}],"markers":[]}

47
app/src/main/java/com/naviapp/common/customview/FooterViewWithTitleDescription.kt
View File

@@ -18,12 +18,16 @@ import androidx.core.content.res.ResourcesCompat
import com.navi.common.listeners.ClickableTextListener
import com.navi.common.model.ClickableTextType
import com.navi.common.model.StyledTextWithIconCode
import com.navi.common.utils.orElse
import com.navi.design.utils.getNaviDrawable
import com.navi.design.utils.moveViewWithDistance
import com.naviapp.R
import com.naviapp.common.listeners.FooterWithDescriptionListener
import com.naviapp.databinding.FooterViewWithTitleDescriptionBinding
import com.naviapp.models.AnimationType
import com.naviapp.models.CustomClickConfig
import com.naviapp.models.FooterWithTitleDescription
import com.naviapp.models.ShimmerProperties
import com.naviapp.personalloanrevamp.getloanRevamp.fragments.FreshLoanDetailsV2Fragment
import com.naviapp.utils.setOnCustomClickListener
@@ -104,6 +108,49 @@ class FooterViewWithTitleDescription constructor(context: Context, attrs: Attrib
}
}
}
footer.nextCtaAnimation?.animationType?.let {
val shimmerProperties = footer.nextCtaAnimation.shimmerProperties
when (it) {
AnimationType.SHIMMER -> {
configureNextCtaShimmer(isVisible = true, properties = shimmerProperties)
configureNextCtaLottie(isVisible = false)
}
AnimationType.LOTTIE -> {
configureNextCtaShimmer(isVisible = false)
configureNextCtaLottie(isVisible = true)
}
AnimationType.SHIMMER_WITH_LOTTIE -> {
configureNextCtaShimmer(isVisible = true, properties = shimmerProperties)
configureNextCtaLottie(isVisible = true)
}
}
}
}
}
private fun configureNextCtaShimmer(isVisible: Boolean, properties: ShimmerProperties? = null) {
if (isVisible) {
binding.shimmerView.visibility = View.VISIBLE
binding.nextBtn.post {
moveViewWithDistance(
view = binding.shimmerView,
distance = binding.nextBtn.width,
animDuration = properties?.animationDuration.orElse(400),
isRepeatable = false,
repeatDelay = properties?.repeatDelay.orElse(3500)
)
}
} else {
binding.shimmerView.visibility = View.GONE
}
}
private fun configureNextCtaLottie(isVisible: Boolean) {
if (isVisible) {
binding.lottieView.visibility = View.VISIBLE
} else {
binding.lottieView.visibility = View.GONE
}
}

28
app/src/main/java/com/naviapp/models/FooterWithTitleDescription.kt
View File

@@ -1,11 +1,12 @@
package com.naviapp.models
/*
*
* * Copyright © 2022 by Navi Technologies Private Limited
* * Copyright © 2022 by Navi Technologies Limited
* * All rights reserved. Strictly confidential
*
*/
package com.naviapp.models
import android.os.Parcelable
import com.google.gson.annotations.SerializedName
import com.navi.base.model.CtaData
@@ -19,5 +20,24 @@ data class FooterWithTitleDescription(
@SerializedName("overlayDescription") val overlayDescription: StyledTextWithIconCode? = null,
@SerializedName("backCta") val backCta: CtaData? = null,
@SerializedName("nextCta") val nextCta: CtaData? = null,
@SerializedName("progress") val progress: Int? = null
) : Parcelable
@SerializedName("progress") val progress: Int? = null,
@SerializedName("nextCtaAnimation") val nextCtaAnimation: NextCtaAnimation? = null
) : Parcelable
@Parcelize
data class NextCtaAnimation(
@SerializedName("animationType") val animationType: AnimationType? = null,
@SerializedName("shimmerProperties") val shimmerProperties: ShimmerProperties? = null
) : Parcelable
@Parcelize
data class ShimmerProperties(
@SerializedName("animationDuration") val animationDuration: Long? = null,
@SerializedName("repeatDelay") val repeatDelay: Long? = null
) : Parcelable
enum class AnimationType {
SHIMMER,
LOTTIE,
SHIMMER_WITH_LOTTIE
}

58
app/src/main/res/layout/footer_view_with_title_description.xml
View File

@@ -1,8 +1,12 @@
<?xml version="1.0" encoding="utf-8"?><!--
~ /**
~ * Copyright (c) 2022 . All rights reserved @Navi
~ */
<?xml version="1.0" encoding="utf-8"?>
<!--
~
~ * Copyright © 2022 by Navi Technologies Limited
~ * All rights reserved. Strictly confidential
~
-->
<layout 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">
@@ -26,8 +30,8 @@
android:id="@+id/root_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="@dimen/layout_dp_3"
android:background="@drawable/top_rounded_stroke_24dp"
android:elevation="@dimen/layout_dp_3"
android:paddingBottom="@dimen/layout_dp_32">
<TextView
@@ -137,7 +141,7 @@
tools:ignore="ContentDescription"
tools:visibility="visible" />
<TextView
<LinearLayout
android:id="@+id/next_btn"
android:layout_width="0dp"
android:layout_height="@dimen/layout_dp_48"
@@ -147,15 +151,45 @@
android:clickable="true"
android:focusable="true"
android:gravity="center"
android:textColor="@color/white"
android:textSize="@dimen/layout_sp_14"
android:visibility="@{footerBinder.nextCta == null ? View.GONE : View.VISIBLE}"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/title_tv"
app:layout_constraintTop_toBottomOf="@id/data_safety_b"
app:setCtaToTextView="@{footerBinder.nextCta}"
app:setFontStyle="@{FontWeightEnum.BOLD}"
tools:text="Get loan" />
app:layout_constraintTop_toBottomOf="@id/data_safety_b">
<TextView
android:id="@+id/next_btn_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/white"
android:textSize="@dimen/layout_sp_14"
app:setCtaToTextView="@{footerBinder.nextCta}"
app:setFontStyle="@{FontWeightEnum.BOLD}"
tools:text="Get loan" />
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/layout_dp_5"
android:visibility="gone"
app:lottie_autoPlay="true"
app:lottie_fileName="cta_chevron.json"
app:lottie_loop="true"
app:lottie_speed="1.25"
tools:visibility="visible" />
</LinearLayout>
<com.navi.design.customview.ParallelogramView
android:id="@+id/shimmer_view"
android:layout_width="@dimen/layout_dp_15"
android:layout_height="@dimen/layout_dp_48"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="@id/next_btn"
app:layout_constraintStart_toStartOf="@id/next_btn"
app:layout_constraintTop_toTopOf="@id/next_btn"
app:tilt_direction="backward"
tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

11
navi-design/src/main/java/com/navi/design/utils/AnimationUtils.kt
View File

@@ -9,6 +9,7 @@ package com.navi.design.utils
import android.animation.ObjectAnimator
import android.view.View
import androidx.core.animation.doOnEnd
import androidx.core.animation.doOnStart
import androidx.core.view.isVisible
@@ -16,7 +17,8 @@ fun moveViewWithDistance(
view: View?,
distance: Int,
animDuration: Long = 1000,
isRepeatable: Boolean = true
isRepeatable: Boolean = true,
repeatDelay: Long? = null
) {
ObjectAnimator.ofFloat(view, "translationX", distance.toFloat())
.apply {
@@ -24,6 +26,13 @@ fun moveViewWithDistance(
if (isRepeatable) {
repeatCount = ObjectAnimator.INFINITE
repeatMode = ObjectAnimator.RESTART
} else {
repeatDelay?.let {
doOnEnd {
startDelay = repeatDelay
start()
}
}
}
doOnStart { view?.isVisible = true }
}