Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f786bd7

Browse files
committed
WIP for actual netflix animation
1 parent 24d1a7d commit f786bd7

File tree

4 files changed

+979
-30
lines changed

4 files changed

+979
-30
lines changed

‎app/src/main/java/dev/baseio/composeplayground/ui/animations/NetFlixIntroAnimation.kt‎

Lines changed: 196 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,31 @@
11
package dev.baseio.composeplayground.ui.animations
22

3+
import androidx.compose.animation.Animatable
34
import androidx.compose.animation.core.*
4-
import androidx.compose.foundation.Canvas
55
import androidx.compose.foundation.background
66
import androidx.compose.foundation.layout.*
77
import androidx.compose.runtime.Composable
88
import androidx.compose.runtime.LaunchedEffect
9+
import androidx.compose.runtime.getValue
910
import androidx.compose.runtime.remember
1011
import androidx.compose.ui.Alignment
1112
import androidx.compose.ui.Modifier
12-
import androidx.compose.ui.draw.scale
13+
import androidx.compose.ui.draw.rotate
14+
import androidx.compose.ui.draw.shadow
1315
import androidx.compose.ui.geometry.Offset
1416
import androidx.compose.ui.graphics.Brush
1517
import androidx.compose.ui.graphics.Color
18+
import androidx.compose.ui.graphics.TransformOrigin
1619
import androidx.compose.ui.graphics.drawscope.DrawScope
1720
import androidx.compose.ui.graphics.drawscope.rotate
18-
import androidx.compose.ui.graphics.drawscope.translate
21+
import androidx.compose.ui.graphics.graphicsLayer
1922
import androidx.compose.ui.platform.LocalDensity
23+
import androidx.compose.ui.unit.Dp
2024
import androidx.compose.ui.unit.dp
25+
import androidx.compose.ui.unit.times
2126
import dev.baseio.composeplayground.contributors.AnmolVerma
22-
import kotlinx.coroutines.delay
27+
import dev.baseio.composeplayground.ui.animations.netflixanim.EffectBrush
28+
import dev.baseio.composeplayground.ui.animations.netflixanim.EffectLumieres
2329
import kotlinx.coroutines.launch
2430

2531
val baseColor = Color(0xffe40913)
@@ -31,73 +37,233 @@ val baseColor = Color(0xffe40913)
3137
@Composable
3238
fun NetflixIntroAnimation() {
3339

40+
// body
3441
Box(
3542
modifier = Modifier
3643
.fillMaxSize()
3744
.background(Color.Black)
3845
) {
39-
Box(
46+
//container
47+
Column(
4048
modifier = Modifier
41-
.align(Alignment.Center)
42-
.fillMaxWidth()
49+
.fillMaxSize()
50+
.background(Color.Black),
51+
verticalArrangement = Arrangement.Center,
52+
horizontalAlignment = Alignment.CenterHorizontally
4353
)
4454
{
45-
DrawNetflix()
55+
//netflix intro
56+
NetflixIntro(Modifier)
4657
}
4758

59+
4860
Box(
4961
modifier = Modifier
5062
.align(Alignment.BottomEnd)
5163
) {
5264
AnmolVerma(
5365
Modifier
5466
.padding(24.dp)
55-
.align(Alignment.Center))
67+
.align(Alignment.Center)
68+
)
5669
}
5770

5871
}
5972
}
6073

6174
@Composable
62-
fun BoxScope.DrawNetflix() {
63-
val netflixHeight = with(LocalDensity.current) {
64-
125.dp.toPx()
75+
fun NetflixIntro(modifier:Modifier) {
76+
val zoomInNetflixBox = remember {
77+
Animatable(1f)
6578
}
6679

67-
val colorFirstN = remember {
68-
Animatable(1f)
80+
val fadingLumieresBox = remember {
81+
Animatable(baseColor.copy(alpha =0.5f))
6982
}
70-
val colorSecondN = remember {
83+
84+
85+
val showingLumieres = remember {
7186
Animatable(1f)
7287
}
73-
val colorMiddleN = remember {
74-
Animatable(1f)
88+
89+
val brushMovingHelper1 = remember {
90+
Animatable(0f)
7591
}
7692

77-
val scaleNetflix = remember {
78-
Animatable(1f)
93+
val brushMovingHelper3 = remember {
94+
Animatable(0f)
95+
}
96+
97+
val brushMovingHelper2 = remember {
98+
Animatable(0f)
7999
}
80100

101+
val fadingOut by animateFloatAsState(targetValue = 1f, animationSpec = keyframes {
102+
durationMillis = 2500
103+
delayMillis = 1200
104+
1f at 0 with LinearEasing
105+
0f at 2500 with LinearEasing
106+
})
107+
108+
109+
81110
LaunchedEffect(key1 = true, block = {
82-
delay(3500)
83111
launch {
84-
scaleNetflix.animateTo(5f, tween(durationMillis = 3900))
112+
zoomInNetflixBox.animateTo(15f, animationSpec = keyframes {
113+
durationMillis = 3500
114+
delayMillis = 500
115+
1f at 0 with LinearEasing
116+
15f at 3500 with LinearEasing
117+
})
118+
}
119+
launch {
120+
fadingLumieresBox.animateTo(
121+
targetValue = baseColor.copy(alpha = 0f),
122+
animationSpec = keyframes {
123+
durationMillis = 2000
124+
delayMillis = 600
125+
baseColor.copy(alpha = 0.5f) at 0 with LinearEasing
126+
baseColor.copy(alpha = 0f) at 2500 with LinearEasing
127+
})
128+
}
129+
launch {
130+
brushMovingHelper1.animateTo(targetValue = -100f, animationSpec = keyframes {
131+
durationMillis = 2500
132+
delayMillis = 1200
133+
0f at 0 with LinearEasing
134+
-100f at 2500 with LinearEasing
135+
})
136+
}
137+
138+
launch {
139+
brushMovingHelper3.animateTo(targetValue = -100f, animationSpec = keyframes {
140+
durationMillis = 2000
141+
delayMillis = 800
142+
0f at 0 with LinearEasing
143+
-100f at 2000 with LinearEasing
144+
})
85145
}
86-
colorSecondN.animateTo(0f, tween(durationMillis = 1000))
87-
colorMiddleN.animateTo(0f, tween(durationMillis = 800))
88-
colorFirstN.animateTo(0f, tween(durationMillis = 600))
89-
})
90146

91-
Canvas(modifier = Modifier
92-
.scale(scaleNetflix.value)
93-
.align(Alignment.Center), onDraw = {
94-
translate(left = -100f, top = -netflixHeight / 2) {
95-
drawN(netflixHeight, colorFirstN.value, colorMiddleN.value, colorSecondN.value)
147+
launch {
148+
brushMovingHelper2.animateTo(targetValue = -100f, animationSpec = keyframes {
149+
durationMillis = 2000
150+
delayMillis = 500
151+
0f at 0 with LinearEasing
152+
-100f at 2000 with LinearEasing
153+
})
96154
}
97155

156+
launch {
157+
showingLumieres.animateTo(1f, keyframes {
158+
durationMillis = 2000
159+
delayMillis = 1600
160+
0f at 0 with LinearEasing
161+
1f at 2500 with LinearEasing
162+
})
163+
}
98164
})
165+
166+
// netflix intro
167+
168+
val width = with(LocalDensity.current) {
169+
300f.toDp()
170+
}
171+
172+
val height = with(LocalDensity.current) {
173+
300f.toDp()
174+
}
175+
176+
//letter N
177+
Box(
178+
modifier = modifier
179+
.width(width)
180+
.height(height)
181+
.graphicsLayer(
182+
scaleX = zoomInNetflixBox.value, scaleY = zoomInNetflixBox.value,
183+
transformOrigin = TransformOrigin.Center.copy(
184+
pivotFractionX = 0.5f,
185+
pivotFractionY = 0.3f
186+
)
187+
)
188+
) {
189+
val helperOneWidth = 19.5f.div(100).times(width)
190+
val helperOneHeight = 1.times(height)
191+
HelperOne(
192+
modifier = Modifier
193+
.width(helperOneWidth)
194+
.fillMaxHeight()
195+
.offset(x = (22.4 / 100).times(width), y = 0.dp)
196+
.rotate(180f)
197+
.background(fadingLumieresBox.value)
198+
.shadow(elevation = 4.dp), brushMovingHelper1, showingLumieres, helperOneWidth,helperOneHeight
199+
)
200+
val helperTwoWidth = 19f.div(100).times(width)
201+
202+
HelperTwo(
203+
modifier = Modifier
204+
.fillMaxWidth(0.19f)
205+
.fillMaxHeight()
206+
.offset(x = (57.8 / 100).times(width), y = 0.dp)
207+
.rotate(180f)
208+
.background(fadingLumieresBox.value)
209+
.shadow(elevation = 4.dp), brushMovingHelper2, helperTwoWidth,helperOneHeight
210+
)
211+
val helperThreeHeight = 1.5.times(height)
212+
213+
HelperThree(
214+
modifier = Modifier
215+
.fillMaxWidth(0.19f)
216+
.fillMaxHeight(1.5f)
217+
.offset(x = (40.5 / 100).times(width), y = (-25 / 100).times(height))
218+
.rotate(-19.5f)
219+
.background(fadingLumieresBox.value)
220+
.shadow(elevation = 4.dp), brushMovingHelper3, helperTwoWidth,helperThreeHeight
221+
)
222+
}
223+
224+
225+
}
226+
227+
@Composable
228+
fun HelperTwo(
229+
modifier: Modifier,
230+
brushMovingHelper3: Animatable<Float, AnimationVector1D>,
231+
helperTwoWidth: Dp,
232+
helperOneHeight: Dp
233+
) {
234+
Box(modifier = modifier) {
235+
EffectBrush(brushMovingHelper3, helperTwoWidth,helperOneHeight)
236+
}
237+
}
238+
239+
240+
@Composable
241+
fun HelperThree(
242+
modifier: Modifier,
243+
brushMoving: Animatable<Float, AnimationVector1D>,
244+
helperTwoWidth: Dp,
245+
helperThreeHeight: Dp
246+
) {
247+
Box(modifier = modifier) {
248+
EffectBrush(brushMoving, helperTwoWidth,helperThreeHeight)
249+
}
250+
}
251+
252+
@Composable
253+
fun HelperOne(
254+
modifier: Modifier = Modifier,
255+
brushMoving: Animatable<Float, AnimationVector1D>,
256+
showingLumieres: Animatable<Float, AnimationVector1D>,
257+
helperOneWidth: Dp,
258+
helperOneHeight: Dp
259+
) {
260+
Box(modifier = modifier) {
261+
EffectBrush(brushMoving, helperOneWidth, helperOneHeight)
262+
EffectLumieres(showingLumieres, helperOneWidth)
263+
}
99264
}
100265

266+
101267
private fun DrawScope.drawN(
102268
netflixHeight: Float,
103269
colorFirstN: Float,
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
package dev.baseio.composeplayground.ui.animations.netflixanim
2+
3+
import androidx.compose.ui.graphics.Brush
4+
5+
data class BrushFurModel(val left: Float, val width: Float, val background: Brush)

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /