iT邦幫忙

2021 iThome 鐵人賽

DAY 30
1
Modern Web

Canvas 小錦囊系列 第 30

Day 30 - 用 canvas 與 lottie 發揮 /// 完賽!

前述

終於來到最後一天!
今天就不寫程式了,
帶大家認識 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 篇的鐵人們。

感謝狀

雖然很可惜當初鼓吹參賽的夥伴,
已成為前同事 ?,
還是很感謝他們,
在他們身上看到對程式充滿熱情的樣貌,
也覺得自己好像有被鼓舞到 ?

祝福 各位伙伴們未來都開開心心!

/images/emoticon/emoticon07.gif


上一篇
Day 29 - 用 canvas 與 fabricjs 做文件簽名(下)
系列文
Canvas 小錦囊30

1 則留言

0
Jing.tech
iT邦新手 4 級 ‧ 2021-10-16 01:02:09

恭喜完賽!每天都很期待看到 demo! 讚嘆 /images/emoticon/emoticon07.gif

雪莉 iT邦新手 5 級 ‧ 2021-10-16 13:58:08 檢舉

你才是最強的!!!
/images/emoticon/emoticon08.gif

我要留言

立即登入留言