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

45006d6f0db085781edc3cca26e98ce2?s=47 Yuji Koyano
February 08, 2019

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

16:50 から #room2 で行った「デザイナーとエンジニアの距離をより近づける Lottie 利用術」の資料です。

45006d6f0db085781edc3cca26e98ce2?s=128

Yuji Koyano

February 08, 2019
Tweet

Transcript

  1. 16.

    ͜ͷηογϣϯͷ໨త w -PUUJFΛऔΓר͘؀ڥ w -PUUJF͕ಈ͘࢓૊Έ w ϫʔΫϑϩʔ5JQTͷ঺հ w Ξχϝʔγϣϯͷ࡞Γํ w

    ΞϓϦͰͷ-PUUJFͷ࣮૷ํ๏ w ΞϓϦͰͷ۩ମతͳ
 -PUUJFͷ࢖͍ॴ ࿩͢͜ͱ ࿩͞ͳ͍͜ͱ
  2. 27.

    lottie-android w -PUUJF"OJNBUJPO7JFXΛ༻͍ͯ
 ϑΝΠϧΛಡΈࠐΈɾ࠶ੜ w ҎԼͷํ๏ͷ
 ಡΈࠐΈΛαϙʔτ
 +40/ϑΝΠϧ
 ;*1ϑΝΠϧ
 ωοτϫʔΫܦ༝

    <com.airbnb.lottie.LottieAnimationView 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" />
  3. 28.

    lottie-android public class LottieAnimationView extends AppCompatImageView { public <T> void

    addValueCallback( KeyPath keyPath, T property, LottieValueCallback<T> callback) { lottieDrawable.addValueCallback(keyPath, property, callback); } }
  4. 43.

    \ Wlz  GS ϑϨʔϜϨʔτ JQ ։࢝ϑϨʔϜ PQ ऴྃϑϨʔϜɹ X

    XJEUI I IFJHIU ONlNBJOz $PNQPTJUJPO໊ ʜ ^ ύεΞχϝʔγϣϯΛॻ͖ग़͢
  5. 44.

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

    ^ AE্ͷύεΞχϝʔγϣϯͷߏ଄ ύεΞχϝʔγϣϯΛॻ͖ग़͢
  6. 45.

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

    AE্ͷύεΞχϝʔγϣϯͷߏ଄ ύεΞχϝʔγϣϯΛॻ͖ग़͢
  7. 53.

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


    $PMPS,FZGSBNF"OJNBUJPO .PEFMΫϥε ,FZ1BUI&MFNFOU ,FZ1BUI&MFNFOU͸
 ,FZ1BUIΫϥεܦ༝Ͱ
 ࣮ߦ࣌ʹ஋Λ
 มԽͤ͞Δ͜ͱ͕Ͱ͖Δ
  8. 54.

    CompositionLayer
 ↓
 Layer
 ↓
 ContentModel
 ↓ ShapeFill ↓
 AnimatableValue 


    Content
 ↓
 FillContent ↓
 KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε @RestrictTo(LIBRARY) public interface KeyPathElement { void resolveKeyPath(KeyPath keyPath, int depth, List<KeyPath> accumulator, KeyPath currentPartialKeyPath); <T> void addValueCallback(T property, @Nullable LottieValueCallback<T> callback); } public class LottieAnimationView extends AppCompatImageView { public <T> void addValueCallback( KeyPath keyPath, T property, LottieValueCallback<T> callback) { lottieDrawable.addValueCallback(keyPath, property, callback); } }
  9. 55.

    CompositionLayer
 ↓
 Layer
 ↓
 ContentModel
 ↓ ShapeFill ↓
 AnimatableValue 


    Content
 ↓
 FillContent ↓
 KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε @RestrictTo(LIBRARY) public interface KeyPathElement { void resolveKeyPath(KeyPath keyPath, int depth, List<KeyPath> accumulator, KeyPath currentPartialKeyPath); <T> void addValueCallback(T property, @Nullable LottieValueCallback<T> callback); } public class LottieAnimationView extends AppCompatImageView { public <T> void addValueCallback( KeyPath keyPath, T property, LottieValueCallback<T> callback) { lottieDrawable.addValueCallback(keyPath, property, callback); } }
  10. 56.

    CompositionLayer
 ↓
 Layer
 ↓
 ContentModel
 ↓ ShapeFill ↓
 AnimatableValue 


    Content
 ↓
 FillContent ↓
 KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε animationView.addValueCallback( KeyPath("Main", "heart"), LottieProperty.COLOR) { COLORS[colorIndex] } animationView.addValueCallback( KeyPath("Main", “explosion-1”, “shot-1“), LottieProperty.TIME_REMAP) { frameInfo -> 2 * speed.toFloat() * frameInfo.overallProgress }
  11. 57.

    CompositionLayer
 ↓
 Layer
 ↓
 ContentModel
 ↓ ShapeFill ↓
 AnimatableValue 


    Content
 ↓
 FillContent ↓
 KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε animationView.addValueCallback( KeyPath("Main", "heart"), LottieProperty.COLOR) { COLORS[colorIndex] } animationView.addValueCallback( KeyPath("Main", “explosion-1”, “shot-1“), LottieProperty.TIME_REMAP) { frameInfo -> 2 * speed.toFloat() * frameInfo.overallProgress }
  12. 58.

    CompositionLayer
 ↓
 Layer
 ↓
 ContentModel
 ↓ ShapeFill ↓
 AnimatableValue 


    Content
 ↓
 FillContent ↓
 KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε animationView.addValueCallback( KeyPath("Main", "heart"), LottieProperty.COLOR) { COLORS[colorIndex] } animationView.addValueCallback( KeyPath("Main", “explosion-1”, “shot-1“), LottieProperty.TIME_REMAP) { frameInfo -> 2 * speed.toFloat() * frameInfo.overallProgress }
  13. 59.

    CompositionLayer
 ↓
 Layer
 ↓
 ContentModel
 ↓ ShapeFill ↓
 AnimatableValue 


    Content
 ↓
 FillContent ↓
 KeyframeAnimation .PEFMΫϥε "OJNBUJPOΫϥε animationView.addValueCallback( KeyPath("Main", "heart"), LottieProperty.COLOR) { COLORS[colorIndex] } animationView.addValueCallback( KeyPath("Main", “explosion-1”, “shot-1“), LottieProperty.TIME_REMAP) { frameInfo -> 2 * speed.toFloat() * frameInfo.overallProgress }
  14. 60.

    CompositionLayer
 ↓
 Layer
 ↓
 ContentModel
 ↓ ShapeFill ↓
 AnimatableValue 


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