Tweet
Tweet

Slide 1

Slide 1 text

©MIXI Android

Slide 2

Slide 2 text

©MIXI @oidy 2017 ( MIXI) Android 2018 KARASTA Android / iOS

Slide 3

Slide 3 text

©MIXI KARASTA 3 2 1

Slide 4

Slide 4 text

©MIXI

Slide 5

Slide 5 text

©MIXI ©MIXI

Slide 6

Slide 6 text

©MIXI

Slide 7

Slide 7 text

©MIXI

Slide 8

Slide 8 text

©MIXI

Slide 9

Slide 9 text

©MIXI (2018 ) After Effects animation JSON Bodymovin Plugin Android app Lottie Lottie https://airbnb.design/lottie/

Slide 10

Slide 10 text

©MIXI AnimatedVectorDrawable l Lottie l After Effects l ( ) l API Android 7.0 ⾒ : AnimatedVectorDrawableCompat

Slide 11

Slide 11 text

©MIXI AnimatedVectorDrawable 3 2 1

Slide 12

Slide 12 text

©MIXI AnimatedVectorDrawable 3 2 1

Slide 13

Slide 13 text

©MIXI VectorDrawable 1

Slide 14

Slide 14 text

©MIXI Android Studio SVG VectorDrawable 1

Slide 15

Slide 15 text

©MIXI ... 1

Slide 16

Slide 16 text

©MIXI 3 2 1

Slide 17

Slide 17 text

©MIXI (ms) e.g. translateX, translateY, fillAlpha, scaleX, scaleY (ms) , 2

Slide 18

Slide 18 text

©MIXI 3 2 1

Slide 19

Slide 19 text

©MIXI ... Drawable 1 1 2 3

Slide 20

Slide 20 text

©MIXI l Lottie l 62KB l After Effects l Jetpack Compose Before After

Slide 21

Slide 21 text

©MIXI

Slide 22

Slide 22 text

©MIXI Translate Scale Alpha

Slide 23

Slide 23 text

©MIXI Translate animator Drawable x, y Scale animator x, y Alpha animator alpha Random Random

Slide 24

Slide 24 text

©MIXI l l

Slide 25

Slide 25 text

©MIXI AnimatedVectorDrawable

Slide 26

Slide 26 text

©MIXI

Slide 27

Slide 27 text

©MIXI from to LIVE LIVE

Slide 28

Slide 28 text

©MIXI https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial/Paths

Slide 29

Slide 29 text

©MIXI

Slide 30

Slide 30 text

©MIXI Jetpack Compose KARASTA UI Compose Compose Compose View

Slide 31

Slide 31 text

©MIXI Jetpack Compose Compose View AndroidView Compose View API

Slide 32

Slide 32 text

©MIXI Jetpack Compose Compose View Compose Animation API

Slide 33

Slide 33 text

©MIXI Compose 3 2 1

Slide 34

Slide 34 text

©MIXI Compose 3 2 1

Slide 35

Slide 35 text

©MIXI rememberVectorPainter( defaultWidth = 24.dp, defaultHeight = 24.dp, autoMirror = false ) { viewportWidth, viewportHeight -> Path( pathData = ..., fill = SolidColor(Color.White.copy(alpha = 0.5F)) ) } 1 VectorPainter

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

©MIXI val vectorPainter = rememberVectorPainter(...) // Image Image(painter = vectorPainter, ...) // Image Box(modifier = Modifier.paint(vectorPainter)) { ... } 1 Painter

Slide 43

Slide 43 text

©MIXI 3 2 1

Slide 44

Slide 44 text

©MIXI 2 val transition = rememberInfiniteTransition()

Slide 45

Slide 45 text

©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 = ... )

Slide 46

Slide 46 text

©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 = ... )

Slide 47

Slide 47 text

©MIXI 2 val value by transition.animateFloat(0f, 1f, ...) Path(pathData = ...) 1

Slide 48

Slide 48 text

©MIXI 3 2 1

Slide 49

Slide 49 text

©MIXI X 3 LIVE LIVE x width width x

Slide 50

Slide 50 text

©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

Slide 51

Slide 51 text

©MIXI val x = ... val width = ... Path( pathData = listOf( MoveTo(x, 0F), RelativeLineTo(-slope, viewportHeight), RelativeHorizontalTo(width), RelativeLineTo(slope, -viewportHeight), Close ) ) 3 LIVE LIVE

Slide 52

Slide 52 text

©MIXI l Kotlin l Android 5.0 OS (AnimatedVectorDrawable )

Slide 53

Slide 53 text

©MIXI After Effects Lottie AnimatedVectorDrawable View VectorPainter, InfiniteTransition Composable

Slide 54

Slide 54 text

©MIXI

Slide 55

Slide 55 text

©MIXI

Slide 56

Slide 56 text

©MIXI Android Jetpack Media3 App PlayerView ExoPlayer View

Slide 57

Slide 57 text

©MIXI Android Jetpack Media3 App PlayerView ExoPlayer : DroidKaigi 2022 https://droidkaigi.jp/2022/timetable/364850

Slide 58

Slide 58 text

©MIXI 2 PlayerView : Big Buck Bunny, © 2008, Blender Foundation / www.bigbuckbunny.org

Slide 59

Slide 59 text

©MIXI Android https://github.com/google/ExoPlayer/issues/7789 : Big Buck Bunny, © 2008, Blender Foundation / www.bigbuckbunny.org

Slide 60

Slide 60 text

©MIXI GLSurfaceView OpenGL ES View OpenGL for Embedded Systems Android, iOS 2D / 3D API

Slide 61

Slide 61 text

©MIXI GLSurfaceView GLSurfaceView Renderer ExoPlayer Shader l Vertex shader l Fragment shader GLSL (C )

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

©MIXI Fragment shader Fragment shader : Big Buck Bunny, © 2008, Blender Foundation / www.bigbuckbunny.org e.g.

Slide 64

Slide 64 text

©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

Slide 65

Slide 65 text

©MIXI KARASTA ( ) : Big Buck Bunny, © 2008, Blender Foundation / www.bigbuckbunny.org

Slide 66

Slide 66 text

©MIXI KARASTA

Slide 67

Slide 67 text

©MIXI

Slide 68

Slide 68 text

©MIXI ( Vertex shader )

Slide 69

Slide 69 text

©MIXI Streaming

Slide 70

Slide 70 text

©MIXI YouTube (Fragment shader ) Intent

Slide 71

Slide 71 text

©MIXI l Lottie AnimatedVectorDrawable l AnimatedVectorDrawable Compose Animation OpenGL ES l : l : 2 稿 l YouTube :