Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

MIXI ENGINEERS

March 02, 2023
Tweet

Video

More Decks by MIXI ENGINEERS

Other Decks in Technology

Transcript

  1. ©MIXI (2018 ) After Effects animation JSON Bodymovin Plugin Android

    app Lottie Lottie https://airbnb.design/lottie/
  2. ©MIXI AnimatedVectorDrawable l Lottie l After Effects l ( )

    l API Android 7.0 ⾒ : AnimatedVectorDrawableCompat
  3. ©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
  4. ©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" />
  5. ©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" />
  6. ©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
  7. ©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
  8. ©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" />
  9. ©MIXI rememberVectorPainter( defaultWidth = 24.dp, defaultHeight = 24.dp, autoMirror =

    false ) { viewportWidth, viewportHeight -> Path( pathData = ..., fill = SolidColor(Color.White.copy(alpha = 0.5F)) ) } 1 VectorPainter
  10. ©MIXI : val slope = viewportWidth / 4f Path( pathData

    = listOf( MoveTo(slope, 0f), RelativeLineTo(-slope, viewportHeight), RelativeHorizontalTo(viewportWidth - slope), RelativeLineTo(slope, -viewportHeight), Close ) ) 1
  11. ©MIXI val slope = viewportWidth / 4f Path( pathData =

    listOf( MoveTo(slope, 0f), RelativeLineTo(-slope, viewportHeight), RelativeHorizontalTo(viewportWidth - slope), RelativeLineTo(slope, -viewportHeight), Close ) ) 1
  12. ©MIXI val slope = viewportWidth / 4f Path( pathData =

    listOf( MoveTo(slope, 0f), RelativeLineTo(-slope, viewportHeight), RelativeHorizontalTo(viewportWidth - slope), RelativeLineTo(slope, -viewportHeight), Close ) ) 1
  13. ©MIXI val slope = viewportWidth / 4f Path( pathData =

    listOf( MoveTo(slope, 0f), RelativeLineTo(-slope, viewportHeight), RelativeHorizontalTo(viewportWidth - slope), RelativeLineTo(slope, -viewportHeight), Close ) ) 1
  14. ©MIXI val slope = viewportWidth / 4f Path( pathData =

    listOf( MoveTo(slope, 0f), RelativeLineTo(-slope, viewportHeight), RelativeHorizontalTo(viewportWidth - slope), RelativeLineTo(slope, -viewportHeight), Close ) ) 1
  15. ©MIXI val slope = viewportWidth / 4f Path( pathData =

    listOf( MoveTo(slope, 0f), RelativeLineTo(-slope, viewportHeight), RelativeHorizontalTo(viewportWidth - slope), RelativeLineTo(slope, -viewportHeight), Close ) ) 1
  16. ©MIXI val vectorPainter = rememberVectorPainter(...) // Image Image(painter = vectorPainter,

    ...) // Image Box(modifier = Modifier.paint(vectorPainter)) { ... } 1 Painter
  17. ©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 = ... )
  18. ©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 = ... )
  19. ©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
  20. ©MIXI val x = ... val width = ... Path(

    pathData = listOf( MoveTo(x, 0F), RelativeLineTo(-slope, viewportHeight), RelativeHorizontalTo(width), RelativeLineTo(slope, -viewportHeight), Close ) ) 3 LIVE LIVE
  21. ©MIXI 2 PlayerView : Big Buck Bunny, © 2008, Blender

    Foundation / www.bigbuckbunny.org
  22. ©MIXI Vertex shader : Big Buck Bunny, © 2008, Blender

    Foundation / www.bigbuckbunny.org View Vertex shader
  23. ©MIXI Fragment shader Fragment shader : Big Buck Bunny, ©

    2008, Blender Foundation / www.bigbuckbunny.org e.g.
  24. ©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
  25. ©MIXI KARASTA ( ) : Big Buck Bunny, © 2008,

    Blender Foundation / www.bigbuckbunny.org