UIT#4 ページ遷移Animation & Skeleton screen をWebViewアプリに実装した体験談

UIT#4 web in App ネイティブアプリケーションのように振る舞うウェブの登壇資料です。
https://uit.connpass.com/event/98729/

実プロジェクトでページ遷移AnimationとSkeleton screen を実装した体験談を掲載。参考数値もでているので、事例として今後の参考になると思います。

Vue.jsを使って作成したWebViewアプリ。

1. & A UIT#4 Web in App    
    
2. 
    J A E Shoyo kyo @shoyo_kyo
3.    
     -*/& 'SPOU
   &OE
   &OHJOFFS
4.    
     -*/& 'SPOU
   &OE
   &OHJOFFS ωΠςΟϒΞϓϦέʔγϣϯͷ Α͏ʹৼΔ෣͏8&# 
   
5. S 5 A R W F V 5 5
6. 
    -*/&
   ϙΠϯτ
7. -*/&
   ϙΠϯτ 1SPKFDUͷಛ௃ 5 P JO D 5 I A
8. JP A H L SRM
9. + A +
10. c c a % 1 0 P A % 1 0 A V S A
11. > = V U P X
12. 
     
13. A 1 J P S 1 5 9
14. S l - 6 3 6 0 58 4 55 2 S V Vk m 1 ( e S V Vk m ) ) % . % c S DV P A i a U
15. . 1
16. - )1 .- (2 .21 AC .21 ) . .- -1
17. ie .( 1 1 P ( ()- c 1 R P R g A a
18. c 2 -. . - P ) . 1 a d ( 2 . A D S . . C 2 .
19. Psl 1 1 . .1 rn ) -2 ao g Vt ( i k A CD d e p c CDS m
20. 1 h T n P h t r NI i m R U e P 1 w d pyA L lP aOo P 1 hv . . 1 A
21. a w . 44 m - T 44 cp S 1 S 44 W 12 1 1 1 Pf 1 T 44 t inI NS S . e . TxS 44 t dlP s 44sT B ro AB TP m 1 O
22. .
23. ) 2 . ( )). A <div class=“ExPlaceholder” /> <div class=“” /> <div class=“ExPlaceholder ExPlaceholderAnimate” />  
    UI C . 2 .
24. 2 2 . . 2 : 2. . 2 G 2. . 2 2 2 C D : 2 2 A S
25. ) - 2 : 0 22 S A , 2 2. % .1 2 .0 : 1 2. % .1 2 : : : 222222 (2 (2 ( )2 # 2;2. .0 : 1% 2 ( ( )2
26. :- .2 1 2 2 L - db dbe : A 2 2 Uca - 1 . 2 1 .2 P 2 2 GL GS
27. 
     
28. co C sl cn G k6 th6 i G G co S U P r Cco Ge
29.     
    
30. -*/&
    .JMFBHF E B
31. A
32. I A
33. 3L KP#DE 
    NC52 #1? '.%,*(& NC:>=IB#? O 5J9 " $NC<MHA GNC76 
    0F;B4#8 @ !Q +-()/Q
34. :T RX#KL 
    VJ<9 #8F )4%0.+& VJAEDPI#F W <Q@ " $VJCUOH NVJ>= 
    7MBI;#? G !Z /1+-6Z -%,5'25 SY*135(
35. & O I aa S A a & ( )
36. A @ B
37. @
38. B A @ B
39.  
    
    
     ! "  
    
    
    #   # -*/& 'SPOU
    &OE
    &OHJOFFS 8FC7JFX
40. 
    9 : /6645 888 4-076-53 .32 4356 /621 /6645 888 4-076-53 .32 4356 /621 /6645 888 4-076-53 .32 4356 /621 /6645 888 4-076-53 .32 4356 /621 /6645 888 4-076-53 .32 4356 /621