デザイナーとエンジニアの距離をより近づけるLottie利用術

σβΠφʔͱΤϯδχΞͷ
ڑ཭Λ͚ۙͮΔ
Lottie ར༻ज़
DroidKaigi 2019  
02/08 (Fri.)

 
Recruit Lifestyle. Yuji Koyano

View Slide

ࣗݾ঺հ

View Slide

@bandwagondagon ykoyano
Yuji Koyano
@bandwagondagon ykoyano
w 3FDSVJU-JGFTUZMFʹͯ 
"OESPJEΤϯδχΞͱͯ͠ 
"JSϝΠτͱ͍͏ΞϓϦΛ։ൃத
w ࠷ۙ͸Ͱ༡ͿͷʹϋϚͬͯ·͢

View Slide

Ξχϝʔγϣϯͷ։ൃίετ͸ߴ͍
w ࡉ෦ͷڞ༗΍ௐ੔͕೉͘͠ 
σβΠφʔͱΤϯδχΞͷ 
ίϛχέʔγϣϯίετ͕ߴ͍
w ෳࡶͳΞχϝʔγϣϯΛ 
ίʔυͰ࠶ݱ͢Δͷ͸೉͍͠
w ϓϥοτϑΥʔϜຖʹ࣮૷͕ඞཁ

View Slide

$PQZSJHIU D
"JSCOC

View Slide

Lottieͱ͸ʁ
w "&Ͱ࡞੒͞ΕͨύεΞχϝʔγϣϯΛ 
ඳը͢ΔϥΠϒϥϦ
w ֤ϓϥοτϑΥʔϜຖʹ࣮૷͕ଘࡏ 
"OESPJE J04 XFC 3FBDU/BUJWF FUD

View Slide

w ΞχϝʔγϣϯΛ+40/ϑΝΠϧͰఆٛ
w %ZOBNJD1SPQFSUZʹΑͬͯ 
࣮ߦ࣌ʹΞχϝʔγϣϯΛมߋ͢Δ͜ͱ͕Մೳ
w ྨࣅπʔϧͱൺֱͯ͠΋ 
"&ͷΞχϝʔγϣϯػೳΛ 
࠷΋ଟ͘αϙʔτ
Lottieͷಛ௃

View Slide

Lottieͷ୅දతͳ࠶ੜύλʔϯ

View Slide

1. ͦͷ··࠶ੜ͠ଓ͚Δ
w ΦϯϘʔσΟϯάɾ΢ΥʔΫεϧʔͰ 
Α͘࢖ΘΕ͍ͯΔ
w ϧʔϓ࠶ੜͰ࢖ΘΕΔ͜ͱ͕ଟ͍
w എܠಁաҎ֎ͷ໘Ͱ͸ 
௨ৗͷಈըͰ΋୅ସՄೳ
$PQZSJHIU D
"JSCOC

View Slide

2. τϦΨʔʹ൓Ԡͯ͠࠶ੜ
w ελϯϓ΍ϥΠΫͳͲͷ 
ϚΠΫϩΠϯλϥΫγϣϯͱͯ͠ 
Α͘࢖ΘΕΔ
w ϑϨʔϜ͔Β࠷ऴϑϨʔϜ·Ͱͷ 
ॱ࠶ੜͰදݱ͢Δ͜ͱ͕ଟ͍
$BSPMJOB$BKB[FJSB 
-JLF"OJNBUJPO

View Slide

3. ࢝఺ͱऴ఺͕ঢ়ଶΛදݱ
w 0/0''ͷ஋ͷঢ়ଶભҠΛදݱ͢Δ 
ϚΠΫϩΠϯλϥΫγϣϯͱͯ͠ 
࢖ΘΕΔ͜ͱ͕ଟ͍
w ॱ࠶ੜɿ0''ˠ0/ͷભҠ 
ٯ࠶ੜɿ0/ˠ0''ͷભҠ
%BSJT"MJ.VGUJ 
.FOVUP$MPTF.BUFSJBM*DPO

View Slide

4. ෳ਺ͷ࠶ੜൣғΛ࣋ͭ
w ఀࢭϙΠϯτΛෳ਺༻ҙͯ͠ 
Ϣʔβʔͷಈ͖ʹରͯ͠ 
࠶ੜൣғΛมԽͤ͞Δ
w ӈͷྫͰ͸ঢ়ଶؒͷભҠΛ 
ϞʔϑΟϯάͰදݱ
$PQZSJHIU D
"JSCOC

View Slide

w ΞχϝʔγϣϯΛͦͷ·· 
֤ϓϥοτϑΥʔϜ্Ͱ࠶ݱͰ͖ΔͨΊ 
σβΠφʔɾΤϯδχΞؒͷ 
ίϛχέʔγϣϯίετ͕Լ͕Δ
w ඞཁͳ࣮૷͕γϯϓϧͰ 
։ൃίετ͕௿͍
LottieΛ࢖͏ϝϦοτ

View Slide

w ಈըͱൺֱͯ͠ϑΝΠϧαΠζ͕খ͍͞
w ΠϯλϥΫςΟϒͳૢ࡞͕Մೳ
LottieΛ࢖͏ϝϦοτ

View Slide

͜ͷηογϣϯͷ໨త
w -PUUJFΛ࢖ͬͨ͜ͱ͕ͳ͍ΤϯδχΞ͕ 
σβΠφʔͱҰॹʹ-PUUJFΛ 
ಋೖ͢Δ͖͔͚ͬΛ࡞Δ
w -PUUJFͷഎܠʹ͋Δٕज़Λཧղ͢Δ͜ͱͰ 
σβΠφʔɾΤϯδχΞؒͷ 
ϫʔΫϑϩʔΛ͞Βʹޮ཰ԽͰ͖Δ

View Slide

͜ͷηογϣϯͷ໨త
w -PUUJFΛऔΓר͘؀ڥ
w -PUUJF͕ಈ͘࢓૊Έ
w ϫʔΫϑϩʔ5JQTͷ঺հ
w Ξχϝʔγϣϯͷ࡞Γํ
w ΞϓϦͰͷ-PUUJFͷ࣮૷ํ๏
w ΞϓϦͰͷ۩ମతͳ 
-PUUJFͷ࢖͍ॴ
࿩͢͜ͱ ࿩͞ͳ͍͜ͱ

View Slide

-PUUJFΛ༻͍ͨϫʔΫϑϩʔ5JQT
-PUUJF͕ಈ͘࢓૊Έ
-PUUJFΛऔΓר͘؀ڥ

View Slide

ΞχϝʔγϣϯΛ࡞Δ
JSONʹॻ͖ग़͢
JSONΛಡΈࠐΜͰ 
Ξχϝʔγϣϯඳը
ύεΛ࡞Δ

View Slide

Bodymovin
JSONʹॻ͖ग़͢
Ξχϝʔγϣϯඳը
ύεΛ࡞Δ

View Slide

JSONʹॻ͖ग़͢
Ξχϝʔγϣϯඳը
ύεΛ࡞Δ
Bodymovin

View Slide

w ύεΞχϝʔγϣϯ΍7'9ͷ࡞੒ɾฤू͕Մೳͳө૾੍࡞ιϑτ
Adobe After Effects (AE)

View Slide

w &YUFOTJPOʹΑͬͯ"&ͷ֦ுػೳΛ࣮ݱ
w 5IF"EPCF$PNNPO&YUFOTJCJMJUZ1MBUGPSN $&1
 
্ͰϢʔβʔ͕ࣗ༝ʹ&YUFOTJPOΛ։ൃՄೳ
w &YUFOTJPOͷྫ 
ϝΠϯΧϥʔΛࢦఆ͢Δͱ૬ੑͷΑ͍৭Λࣗಈ഑৭ 
ࢦఆͨ͠ԻָͷϦζϜΛղੳͯ͠ΩʔϑϨʔϜΛ௥Ճ
ɹAdobe After Effects ͷಛ௃

View Slide

JSONʹॻ͖ग़͢
Ξχϝʔγϣϯඳը
ύεΛ࡞Δ
Bodymovin

View Slide

w "&ͷύεΞχϝʔγϣϯΛ 
ಠࣗͷσʔλߏ଄ʹม׵ͯ͠ 
+40/ϑΝΠϧʹॻ͖ग़͢ 
"&ͷ&YUFOTJPO
w )FSOBO5PSSJTJࢯ 
ʹΑͬͯ։ൃ͞Εͨ044
Bodymovin

View Slide

JSONʹॻ͖ग़͢
Ξχϝʔγϣϯඳը
ύεΛ࡞Δ
Bodymovin

View Slide

lottie-android
w -PUUJF"OJNBUJPO7JFXΛ༻͍ͯ 
ϑΝΠϧΛಡΈࠐΈɾ࠶ੜ
w ҎԼͷํ๏ͷ 
ಡΈࠐΈΛαϙʔτ 
+40/ϑΝΠϧ 
;*1ϑΝΠϧ 
ωοτϫʔΫܦ༝
android:layout_width="match_parent"
android:layout_height=“wrap_content”
app:lottie_rawRes="@raw/hello_world"
app:lottie_fileName="hello_world.json"
app:lottie_autoPlay=“true" />

View Slide

lottie-android
public class LottieAnimationView extends AppCompatImageView {
public void addValueCallback(
KeyPath keyPath, T property, LottieValueCallback callback) {
lottieDrawable.addValueCallback(keyPath, property, callback);
}
}

View Slide

lottie-android
w αϯϓϧΞϓϦ͕ެ։த
w -PUUJFͷϓϨϏϡʔ༻ΞϓϦ 
ͱͯ͠࢖͏͜ͱ͕Ͱ͖Δ

View Slide

Lottieﬁles.com

View Slide

Bodymovin
JSONʹॻ͖ग़͢
Ξχϝʔγϣϯඳը
ύεΛ࡞Δ

View Slide


View Slide

Bodymovin
JSONʹॻ͖ग़͢
Ξχϝʔγϣϯඳը
ύεΛ࡞Δ

View Slide

Bodymovin
JSONʹॻ͖ग़͢
Ξχϝʔγϣϯඳը
ύεΛ࡞Δ
Bodymovin

View Slide

w "&ͷύεΞχϝʔγϣϯͷߏ੒ཁૉΛཧղ͢Δ
Adobe After Effects (AE)

View Slide

w $PNQPTJUJPO 
1SF$PNQPTJUJPO 
-BZFS 
$POUFOU
w ͜ΕΒͷཁૉͷϓϩύςΟΛ 
࣌ؒ࣠Ͱ੍ޚͰ͖Δ 
FYϑϨʔϜ໨Ͱಁ໌౓Λʹ͢Δ

ύεΞχϝʔγϣϯͷߏ੒ཁૉ

View Slide

w Ξχϝʔγϣϯ͸ͻͱͭͷ$PNQPTJUJPO͔Β࡞ΒΕΔ
AE্ͷύεΞχϝʔγϣϯͷߏ଄
NBJO 
$PNQPTJUJPO
"&ϑϩʔνϟʔτ

View Slide

w NBJO$PNQPTJUJPO͸1SF$PNQPTJUJPOͱ-BZFS͔Βߏ੒͞ΕΔ
IFBSU 
-BZFS
FYQMPTJPO 
1SF$PNQPTJUJPO

View Slide

w IFBSU-BZFS͸̎ͭͷ$POUFOU͔Βߏ੒͞ΕΔ
1BUI 
$POUFOU
'JMM 
$POUFOU

View Slide

TIPU 
-BZFS
TIPU 
-BZFS
w FYQMPTJPO1SF$PNQPTJUJPO͸̎ͭͷ-BZFS͔Βߏ੒͞ΕΔ

View Slide

Bodymovin
JSONʹॻ͖ग़͢
Ξχϝʔγϣϯඳը
ύεΛ࡞Δ
Bodymovin

View Slide

Bodymovin
w "&ͷΞχϝʔγϣϯΛߏ੒͢Δ 
֤ཁૉΛ+40/ʹॻ͖ग़͍ͯ͘͠ 
w ཁૉͷΞΫηεʹ͸"&ͷ"1*Λར༻

View Slide

\
Wlz
GS ϑϨʔϜϨʔτ
JQ ։࢝ϑϨʔϜ
PQ ऴྃϑϨʔϜɹ
X XJEUI
I IFJHIU
ONlNBJOz $PNQPTJUJPO໊
ʜ
^
ύεΞχϝʔγϣϯΛॻ͖ग़͢

View Slide

\
ʜ
lMBZFST
ʜIFBSU-BZFSͷ৘ใ
ʜ$PNQPTJUJPOͷ৘ใ
>
ʜ
^

View Slide

\
ʜ
lBTTFUT
ʜ1SF$PNQPTJUJPOͷ৘ใ
>
ʜ
^

View Slide

Bodymovin
JSONʹॻ͖ग़͢
Ξχϝʔγϣϯඳը
ύεΛ࡞Δ
Bodymovin

View Slide

-PUUJF"OJNBUJPO7JFX
1BSTFSΫϥε
+40/ 
ϑΝΠϧ

View Slide

-PUUJF"OJNBUJPO7JFX
-PUUJF%SBXBCMF
-PUUJF$PNQPTJUJPO
1BSTFSΫϥε

View Slide

1BSTFSΫϥε
-PUUJF"OJNBUJPO7JFX
-PUUJF%SBXBCMF
-PUUJF$PNQPTJUJPO
.PEFMΫϥε
"OJNBUJPOΫϥε

View Slide

-PUUJF$PNQPTJUJPO1BSTFS
 
-BZFS1BSTFS 
 
$POUFOU.PEFM1BSTFS 
 
"OJNBUBCMF5SBOTGPSN1BSTFS
-BZFS 
 
$POUFOU.PEFM 
 
"OJNBUBCMF7BMVF
1BSTFSΫϥε .PEFMΫϥε

View Slide

-BZFS
 
$POUFOU.PEFM 
 
"OJNBUBCMF7BMVF
$PNQPTJUJPO-BZFS
4IBQF-BZFS
4IBQF$POUFOU
'JMM$POUFOU
1BUI,FZGSBNF"OJNBUJPO 
$PMPS,FZGSBNF"OJNBUJPO
.PEFMΫϥε "OJNBUJPOΫϥε

View Slide

-BZFS
 
$POUFOU.PEFM 
 
"OJNBUBCMF7BMVF
$PNQPTJUJPO-BZFS
4IBQF-BZFS
4IBQF$POUFOU
'JMM$POUFOU
.PEFMΫϥε ,FZ1BUI&MFNFOU

View Slide

-BZFS
 
$POUFOU.PEFM 
 
"OJNBUBCMF7BMVF
$PNQPTJUJPO-BZFS
4IBQF-BZFS
4IBQF$POUFOU
'JMM$POUFOU
.PEFMΫϥε ,FZ1BUI&MFNFOU
,FZ1BUI&MFNFOU͸ 
,FZ1BUIΫϥεܦ༝Ͱ 
࣮ߦ࣌ʹ஋Λ 
มԽͤ͞Δ͜ͱ͕Ͱ͖Δ

View Slide

CompositionLayer 
↓ 
Layer 
↓ 
ContentModel 
↓
ShapeFill
↓ 
AnimatableValue
 
Content 
↓ 
FillContent
↓ 
KeyframeAnimation
@RestrictTo(LIBRARY)
public interface KeyPathElement {
void resolveKeyPath(KeyPath keyPath, int depth,
List accumulator, KeyPath currentPartialKeyPath);
void addValueCallback(T property,
@Nullable LottieValueCallback callback);
}
public class LottieAnimationView extends AppCompatImageView {
public void addValueCallback(
KeyPath keyPath, T property, LottieValueCallback callback) {
lottieDrawable.addValueCallback(keyPath, property, callback);
}
}

View Slide

CompositionLayer 
↓ 
Layer 
↓ 
ContentModel 
↓
ShapeFill
↓ 
AnimatableValue
 
Content 
↓ 
FillContent
↓ 
KeyframeAnimation
animationView.addValueCallback(
KeyPath("Main", "heart"),
LottieProperty.COLOR) {
COLORS[colorIndex]
}
KeyPath("Main", “explosion-1”, “shot-1“),
LottieProperty.TIME_REMAP) { frameInfo ->
2 * speed.toFloat() * frameInfo.overallProgress
}

View Slide

CompositionLayer 
↓ 
Layer 
↓ 
ContentModel 
↓
ShapeFill
↓ 
AnimatableValue
 
Content 
↓ 
FillContent
↓ 
KeyframeAnimation
KeyPath("Main", "heart"),
LottieProperty.COLOR) {
COLORS[colorIndex]
}
KeyPath("Main", “explosion-1”, “shot-1“),
LottieProperty.TIME_REMAP) { frameInfo ->
2 * speed.toFloat() * frameInfo.overallProgress
}
"&ͷ,FZ1BUIߏ଄Λ೺ѲͰ͖Δͱ 
 
"&ͷͲͷཁૉʹ໰୊͕͋Δͷ͕ 
໌֬ʹͳΔͷͰσόοάͷޮ཰্͕͕Δ 
 
࣮ߦ࣌ʹΞχϝʔγϣϯΛૢ࡞͠΍͘͢ͳΔ

View Slide


View Slide

Bodymovin
JSONʹॻ͖ग़͢
Ξχϝʔγϣϯඳը
ύεΛ࡞Δ

View Slide

Ξχϝʔγϣϯͷ 
मਖ਼
࠶ੜ͔ͯ͠Βमਖ਼ͷ 
ඞཁੑʹؾͮ͘
ύεΛमਖ਼
Bodymovin

View Slide

Ξχϝʔγϣϯͷ 
मਖ਼
࠶ੜ͔ͯ͠Βमਖ਼ͷ 
ඞཁੑʹؾͮ͘
ύεΛमਖ਼
Bodymovin
ؔ࿈πʔϧ͕ଟ͍Ώ͑ʹ 
ख໭Γͷίετ΋ߴ͍ʂ

View Slide

Α͋͘ΔπϥΠ෦෼
w ϓϥοτϑΥʔϜຖ͕αϙʔτ͢Δ"&ͷػೳͷࠩҟ
w ϓϨϏϡʔ্ͷ࠶ੜͱ࣮ࡍͷΞϓϦ্Ͱ࠶ੜͰ 
Ξχϝʔγϣϯͷҹ৅ʹࠩҟ͕ੜ͡Δ
w σβΠϯπʔϧؒͰͷύεσʔλͷಉظ
w σβΠφʔɾΤϯδχΞؒͰϨΠϠʔߏ଄ͷڞ༗͕೉͍͠

View Slide

πʔϧؒͰͷύεσʔλͷಉظ
w ɹ΍ͷεΫϦϓτ΍&YUFOTJPOΛ࢖ͬͯ 
ࣗಈԽͨ͠Γޮ཰Խ͢Δ
w &YUFOTJPOʮ0WFSMPSEʯΛ࢖͏ͱ 
"*㲗"&ؒͷϑΝΠϧͷߦ͖དྷ͕؆୯ʹͳΔ

View Slide

αϙʔτ͢ΔAEͷػೳͷࠩҟ
w MPUUJF3/ɾqVUUFSͳͲ͸಺෦Ͱґଘ͍ͯ͠Δ 
MPUUJFBOESPJEɾJ04͕࠷৽Ͱͳ͍ͷͰ஫ҙ
w ػೳΛαϙʔτͯ͠ͳ͍ͷ͕ 
#PEZNPWJOͳͷ͔MPUUJFͳͷ͔Ͱ໰୊Λ੾Γ෼͚Δ
w +40/ϑΝΠϧڞ༗ͷ଎౓Λ্͛ͯ 
αϙʔτൣғ֎͔Ͳ͏͔ʹؾͮ͘λΠϛϯάΛૣΊΔ

View Slide

JSONϑΝΠϧڞ༗ͷ଎౓Λ্͛Δ
w #PU͕23ίʔυɾϓϨϏϡʔΛࣗಈੜ੒
w MPUUJFOPEFΛ࢖͑͹ 
4FSWFSͰ΋-PUUJF͕࠶ੜՄೳ

View Slide

ϨΠϠʔߏ଄ͷڞ༗͕೉͍͠
w $PNQPTJUJPO -BZFS $POUFOUʹ 
ࣝผ͠΍໊͍͢લΛ͚ͭΔ
w "&ͷϑϩʔνϟʔτΛڞ༗͢Δ

View Slide

ϓϨϏϡʔ্ͱΞϓϦ্ͷࠩҟ
w -PUUJFΛޮ཰తʹσόοά͢ΔͨΊͷ 
)ZQFSJPO"OESPJEϓϥάΠϯΛ࡞Γ·ͨ͠
w ΞϓϦΛϏϧυ͠௚͢͜ͱͳ͘ 
ϓϩύςΟΛมߋͨ͠Γ 
࠶ੜ͢Δ+40/ϑΝΠϧΛมߋ͢Δ͜ͱ͕Ͱ͖·͢
w IUUQTHJUIVCDPNZLPZBOPIZQFSJPOBUUSMPUUJF

View Slide

デザイナーとエンジニアの距離をより近づけるLottie利用術

デザイナーとエンジニアの距離をより近づけるLottie利用術

Yuji Koyano

More Decks by Yuji Koyano

Other Decks in Technology

Featured

Transcript