前述

终於来到最後一天！
今天就不写程序了，
带大家认识 lottie ，
这也是在工作需求才意外学习到的 library ，
出自 airbnb ，可以更快更有效地实践动画效果，
再也不会让工程师跟设计师之间凭着想像力去沟通做动画 XD

render 的方式你可选择 svg 或是 canvas ，
它是利用 json 渲染成动画的，
当然！
除了 web 外，
其他装置都可以使用，
听起来很吸引人吧！

这里有很多，大家写好的动画资源，
你要是需要，还可以选择 免费 的动画，

方法一

选择下面的 html 点击後，会前往另一个页面，你可以任意调整大小，与速度，然後就可以直接取得 code，贴上你的程序码，完成！

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets2.lottiefiles.com/packages/lf20_lH3QMK.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop controls autoplay></lottie-player>

方法二

假如你是使用 React，你可以选择好喜欢的动画後，取得他的 URL

https://assets2.lottiefiles.com/packages/lf20_lH3QMK.json

下载 react-lottie npm

import * as animationData from './XXX.json'

 const defaultOptions = {
      loop: true,
      autoplay: true, 
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice'
      }
    };
 
 
 <div>
      <Lottie options={defaultOptions}
              height={400}
              width={400}
              isStopped={this.state.isStopped}
              isPaused={this.state.isPaused}/>
    </div>

codesendbox

完成啦！

完赛感言

说实话，
一开始本来没有想要参加的，
因为本人一直秉持着，
下班不碰程序，做一个生活与工作保持平衡的人，
事实上好像很难做到．．．

在同事的鼓吹下决定参赛，
到开赛前也是勉强凑出五篇文，
一开始每天写也觉得没什麽，
但当白天的工作负担变重，
晚上又腾不出时间的时候，
真的是很痛苦，哈哈哈哈
懊悔自己为什麽要做这种不明智的决定XD

要说真的完赛，我觉得自己还是差了一点，
毕竟有几篇不是真的有写出来....
再次赞叹可以完整写出 30 篇的铁人们。

感谢状

虽然很可惜当初鼓吹参赛的夥伴，
已成为前同事 ?，
还是很感谢他们，
在他们身上看到对程序充满热情的样貌，
也觉得自己好像有被鼓舞到 ?

祝福 各位伙伴们未来都开开心心！