Android のライブ配信アプリにおけるアニメーションとグラフィック処理【MIXI TECH CONFERENCE 2023】

MIXI TECH CONFERENCE 2023
にてお話した追田の資料です。

動画：https://youtu.be/z5CXv4iqgW8
セッション詳細：https://techcon.mixi.co.jp/2023/d2-3

Transcript

1. ©MIXI Android
2. ©MIXI @oidy 2017 ( MIXI) Android 2018 KARASTA Android / iOS
3. ©MIXI KARASTA 3 2 1
4. ©MIXI
5. ©MIXI ©MIXI
6. ©MIXI
7. ©MIXI
8. ©MIXI
9. ©MIXI (2018 ) After Effects animation JSON Bodymovin Plugin Android app Lottie Lottie https://airbnb.design/lottie/
10. ©MIXI AnimatedVectorDrawable l Lottie l After Effects l ( ) l API Android 7.0 ⾒ : AnimatedVectorDrawableCompat
11. ©MIXI AnimatedVectorDrawable 3 2 1
12. ©MIXI AnimatedVectorDrawable 3 2 1
13. ©MIXI <vector android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24"> <path android:fillColor="@android:color/black" android:pathData="..." /> </vector> VectorDrawable 1
14. ©MIXI Android Studio SVG VectorDrawable 1
15. ©MIXI <vector android:width="280dp" android:height="280dp" android:viewportWidth="512" android:viewportHeight="512"> <group android:name="thumb_group"> <path android:name="thumb_path" android:fillColor="@android:color/black" android:pathData="..." /> </group> <group android:name="star_group"> ... </group> </vector> 1
16. ©MIXI 3 2 1
17. ©MIXI <set> <objectAnimator android:propertyName="scaleX" android:valueFrom="0.5" android:valueTo="1.0" android:duration="400" android:startOffset="500" /> <objectAnimator ... /> </set> (ms) e.g. translateX, translateY, fillAlpha, scaleX, scaleY (ms) , 2
18. ©MIXI 3 2 1
19. ©MIXI <animated-vector android:drawable="@drawable/vector_drawable"> <target android:name="thumb_group" android:animation="@animator/thumb_scale" /> ... </animated-vector> Drawable 1 1 2 3
20. ©MIXI l Lottie l 62KB l After Effects l Jetpack Compose Before After
21. ©MIXI
22. ©MIXI Translate Scale Alpha
23. ©MIXI Translate animator Drawable x, y Scale animator x, y Alpha animator alpha Random Random
24. ©MIXI l l
25. ©MIXI AnimatedVectorDrawable <objectAnimator android:propertyName="pathData" android:valueType="pathType" android:valueFrom="M-48,0 l -6,24 48,0 6,-24Z" android:valueTo="M30,0 l -6,24 3,0 6,-24Z" android:interpolator="@android:interpolator/decelerate_quint" android:duration="800" android:startOffset="2200" />
26. ©MIXI <objectAnimator android:propertyName="pathData" android:valueType="pathType" android:valueFrom="M-48,0 l -6,24 48,0 6,-24Z" android:valueTo="M30,0 l -6,24 3,0 6,-24Z" android:interpolator="@android:interpolator/decelerate_quint" android:duration="800" android:startOffset="2200" />
27. ©MIXI <objectAnimator android:propertyName="pathData" android:valueType="pathType" android:valueFrom="M-48,0 l -6,24 48,0 6,-24Z" android:valueTo="M30,0 l -6,24 3,0 6,-24Z" android:interpolator="@android:interpolator/decelerate_quint" android:duration="800" android:startOffset="2200" /> from to LIVE LIVE
28. ©MIXI <objectAnimator android:propertyName="pathData" android:valueType="pathType" android:valueFrom="M-48,0 l -6,24 48,0 6,-24Z" android:valueTo="M30,0 l -6,24 3,0 6,-24Z" android:interpolator="@android:interpolator/decelerate_quint" android:duration="800" android:startOffset="2200" /> https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial/Paths
29. ©MIXI <objectAnimator android:propertyName="pathData" android:valueType="pathType" android:valueFrom="M-48,0 l -6,24 48,0 6,-24Z" android:valueTo="M30,0 l -6,24 3,0 6,-24Z" android:interpolator="@android:interpolator/decelerate_quint" android:duration="800" android:startOffset="2200" />
30. ©MIXI Jetpack Compose KARASTA UI Compose Compose Compose View
31. ©MIXI Jetpack Compose Compose View AndroidView Compose View API
32. ©MIXI Jetpack Compose Compose View Compose Animation API
33. ©MIXI Compose 3 2 1
34. ©MIXI Compose 3 2 1
35. ©MIXI rememberVectorPainter( defaultWidth = 24.dp, defaultHeight = 24.dp, autoMirror = false ) { viewportWidth, viewportHeight -> Path( pathData = ..., fill = SolidColor(Color.White.copy(alpha = 0.5F)) ) } 1 VectorPainter
36. ©MIXI : val slope = viewportWidth / 4f Path( pathData = listOf( MoveTo(slope, 0f), RelativeLineTo(-slope, viewportHeight), RelativeHorizontalTo(viewportWidth - slope), RelativeLineTo(slope, -viewportHeight), Close ) ) 1
37. ©MIXI val slope = viewportWidth / 4f Path( pathData = listOf( MoveTo(slope, 0f), RelativeLineTo(-slope, viewportHeight), RelativeHorizontalTo(viewportWidth - slope), RelativeLineTo(slope, -viewportHeight), Close ) ) 1
38. ©MIXI val slope = viewportWidth / 4f Path( pathData = listOf( MoveTo(slope, 0f), RelativeLineTo(-slope, viewportHeight), RelativeHorizontalTo(viewportWidth - slope), RelativeLineTo(slope, -viewportHeight), Close ) ) 1
39. ©MIXI val slope = viewportWidth / 4f Path( pathData = listOf( MoveTo(slope, 0f), RelativeLineTo(-slope, viewportHeight), RelativeHorizontalTo(viewportWidth - slope), RelativeLineTo(slope, -viewportHeight), Close ) ) 1
40. ©MIXI val slope = viewportWidth / 4f Path( pathData = listOf( MoveTo(slope, 0f), RelativeLineTo(-slope, viewportHeight), RelativeHorizontalTo(viewportWidth - slope), RelativeLineTo(slope, -viewportHeight), Close ) ) 1
41. ©MIXI val slope = viewportWidth / 4f Path( pathData = listOf( MoveTo(slope, 0f), RelativeLineTo(-slope, viewportHeight), RelativeHorizontalTo(viewportWidth - slope), RelativeLineTo(slope, -viewportHeight), Close ) ) 1
42. ©MIXI val vectorPainter = rememberVectorPainter(...) // Image Image(painter = vectorPainter, ...) // Image Box(modifier = Modifier.paint(vectorPainter)) { ... } 1 Painter
43. ©MIXI 3 2 1
44. ©MIXI 2 val transition = rememberInfiniteTransition()
45. ©MIXI 2 val transition = rememberInfiniteTransition() val color by transition.animateColor( initialValue = Color.Red, targetValue = Color.Blue, animationSpec = ... ) val value by transition.animateFloat( initialValue = 0f, targetValue = 1f, animationSpec = ... )
46. ©MIXI 2 val transition = rememberInfiniteTransition() val color by transition.animateColor( initialValue = Color.Red, targetValue = Color.Blue, animationSpec = ... ) val value by transition.animateFloat( initialValue = 0f, targetValue = 1f, animationSpec = ... )
47. ©MIXI 2 val value by transition.animateFloat(0f, 1f, ...) Path(pathData = ...) 1
48. ©MIXI 3 2 1
49. ©MIXI X 3 LIVE LIVE x width width x
50. ©MIXI val value by transition.animateFloat(...) val slope = viewportWidth / 4f val startWidth = viewportWidth * 2f val endWidth = viewportWidth / 8f val x = -startWidth + ((startWidth + viewportWidth + slope) * value) val width = startWidth + ((endWidth - startWidth) * value) 3 LIVE LIVE 0 1
51. ©MIXI val x = ... val width = ... Path( pathData = listOf( MoveTo(x, 0F), RelativeLineTo(-slope, viewportHeight), RelativeHorizontalTo(width), RelativeLineTo(slope, -viewportHeight), Close ) ) 3 LIVE LIVE
52. ©MIXI l Kotlin l Android 5.0 OS (AnimatedVectorDrawable )
53. ©MIXI After Effects Lottie AnimatedVectorDrawable View VectorPainter, InfiniteTransition Composable
54. ©MIXI
55. ©MIXI
56. ©MIXI Android Jetpack Media3 App PlayerView ExoPlayer View
57. ©MIXI Android Jetpack Media3 App PlayerView ExoPlayer : DroidKaigi 2022 https://droidkaigi.jp/2022/timetable/364850
58. ©MIXI 2 PlayerView : Big Buck Bunny, © 2008, Blender Foundation / www.bigbuckbunny.org
59. ©MIXI Android https://github.com/google/ExoPlayer/issues/7789 : Big Buck Bunny, © 2008, Blender Foundation / www.bigbuckbunny.org
60. ©MIXI GLSurfaceView OpenGL ES View OpenGL for Embedded Systems Android, iOS 2D / 3D API
61. ©MIXI GLSurfaceView GLSurfaceView Renderer ExoPlayer Shader l Vertex shader l Fragment shader GLSL (C )
62. ©MIXI Vertex shader : Big Buck Bunny, © 2008, Blender Foundation / www.bigbuckbunny.org View Vertex shader
63. ©MIXI Fragment shader Fragment shader : Big Buck Bunny, © 2008, Blender Foundation / www.bigbuckbunny.org e.g.
64. ©MIXI Fragment shader #extension GL_OES_EGL_image_external : require varying vec2 vTextureCoord; uniform samplerExternalOES sTexture; void main() { vec4 color = texture2D(sTexture, vTextureCoord); float alpha = max(color.r, max(color.g, color.b)); gl_FragColor = vec4(color.r, color.g, color.b, alpha); } : Big Buck Bunny, © 2008, Blender Foundation / www.bigbuckbunny.org
65. ©MIXI KARASTA ( ) : Big Buck Bunny, © 2008, Blender Foundation / www.bigbuckbunny.org
66. ©MIXI KARASTA
67. ©MIXI
68. ©MIXI ( Vertex shader )
69. ©MIXI Streaming
70. ©MIXI YouTube (Fragment shader ) Intent
71. ©MIXI l Lottie AnimatedVectorDrawable l AnimatedVectorDrawable Compose Animation OpenGL ES l : l : 2 稿 l YouTube :