• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1Skottie - Lottie Animation Player
2================
3
4Skia now offers a performant, secure native player for JSON animations derived
5from the Bodymovin plugin for After Effects. It can be used on any platform
6where you are using Skia, including Android & iOS.
7
8The player aims to build upon the Lottie player widely used for animations
9today, improving on the performance, feature set, and platform cohesiveness for
10our clients. We are big fans of the Bodymovin format and where possible,
11contributing advancements back to Bodymovin/Lottie.
12
13<br>
14
15Sample JSON animations
16----------------------
17
18Here are some test samples rendering with Skia's animation player:
19
20<a href="https://skottie.skia.org/e6741dda67629da1f80c254dad3df865">
21  <skottie-inline-sk src="https://skottie.skia.org/_/j/e6741dda67629da1f80c254dad3df865" width=200 height=200></skottie-inline-sk>
22</a>
23<a href="https://skottie.skia.org/ffea72cf6be48fa061671c124ed7789c">
24  <skottie-inline-sk src="https://skottie.skia.org/_/j/ffea72cf6be48fa061671c124ed7789c" width=200 height=200></skottie-inline-sk>
25</a>
26<a href="https://skottie.skia.org/00e850cdbed7304985eaefe98a4e8a9c">
27  <skottie-inline-sk src="https://skottie.skia.org/_/j/00e850cdbed7304985eaefe98a4e8a9c" width=200 height=200></skottie-inline-sk>
28</a>
29<a href="https://skottie.skia.org/e1aca009d5ebec9bd122b87b018bb673">
30  <skottie-inline-sk src="https://skottie.skia.org/_/j/e1aca009d5ebec9bd122b87b018bb673" width=200 height=200></skottie-inline-sk>
31</a>
32<a href="https://skottie.skia.org/821fd79dd7437b97ba891e7a00970a06">
33  <skottie-inline-sk src="https://skottie.skia.org/_/j/821fd79dd7437b97ba891e7a00970a06" width=200 height=200></skottie-inline-sk>
34</a>
35<a href="https://skottie.skia.org/ad63f250084685c96edd9b52ae2f436b">
36  <skottie-inline-sk src="https://skottie.skia.org/_/j/ad63f250084685c96edd9b52ae2f436b" width=200 height=200></skottie-inline-sk>
37</a>
38<a href="https://skottie.skia.org/40f78ddc751c16348a08e1d61d3e78b1">
39  <skottie-inline-sk src="https://skottie.skia.org/_/j/40f78ddc751c16348a08e1d61d3e78b1" width=200 height=200></skottie-inline-sk>
40</a>
41<a href="https://skottie.skia.org/fc42db7c75741437b5cb0e90b3febc65">
42  <skottie-inline-sk src="https://skottie.skia.org/_/j/fc42db7c75741437b5cb0e90b3febc65" width=200 height=200></skottie-inline-sk>
43</a>
44<a href="https://skottie.skia.org/c16eee287f2cea44102b6670c66e60ab">
45  <skottie-inline-sk src="https://skottie.skia.org/_/j/c16eee287f2cea44102b6670c66e60ab" width=200 height=200></skottie-inline-sk>
46</a>
47
48*Sample animations courtesy of the lottiefiles.com community
49
50<br>
51
52Test server
53-----------
54
55Test your Lottie files in our player at https://skottie.skia.org
56
57<br>
58
59The code
60--------
61Skia's animation code entry point can be found here on
62[Googlesource](https://skia.googlesource.com/skia/+/master/modules/skottie/include/Skottie.h)
63and [GitHub](https://github.com/google/skia/blob/master/modules/skottie/include/Skottie.h).
64The code is part of Skia's library but can also be made available as a separate
65package.
66
67<br>
68
69Embedding examples
70------------------
71Sample C code for using the Skottie native player can be found
72[here](https://github.com/google/skia/blob/master/modules/skottie/src/SkottieTool.cpp).
73
74Android app code for inspiration can be found
75[here](https://github.com/google/skia/tree/master/platform_tools/android/apps/skottie).
76
77Example code embedding Skottie into our Viewer app is
78[here](https://github.com/google/skia/blob/master/tools/viewer/SkottieSlide.cpp).
79
80The Viewer or Skottie Android apps can be built following [these](https://skia.org/user/sample/viewer)
81instructions.
82