GSAP
3Blue1Brown給我留下了深刻印象。利用動畫製作影片，內容簡潔，演示清晰。前兩天剛好碰到一件事，我就順便學習了一下怎麼用程式碼做動畫。
以javascrip為例，有兩個動畫引擎，GSAP和Animajs。由於網速的原因，詢問了GPT後，我選擇了GSAP來製作我的第一個動畫影片。
製作動畫影片不同於動畫，要協調多個動作，還需要對齊時間，所以使用時間線Timeline是必要的。
需要兩條時間線分別播放字幕和動畫，這需要協調好他們
而且很多片段需要後期調整，所以也必須使用相對時間>，<,label這三種模式。
製作動畫重要的是想好指令碼，然後宣告HTML元素，再恰當時刻將元素呈現出來
預覽
程式碼
程式碼無需開啟web伺服器，可以直接再瀏覽器中開啟
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/TextPlugin.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/fontawesome.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/js/all.min.js"></script>
<style>
#screen{
height: 720px;
width: 1280px;
position: relative;
background-color: black;
}
#screen > *{
position: absolute;
display: inline-block;
}
.person_{
top:20px;
color: white;
transform: scale(0,0);
}
#person3_{
left: 905px;
}
#person2_{
left: 590px;
}
#person1_{
left: 290px;
}
#person1,#person2,#person3{
width: 50px;
height: 50px;
background-color: green;
border: 5px;
color: white;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
padding: 5px;
top: 50px;
left: -100px;
}
#text{
position: absolute;
width: 100%;
text-align: center;
color: white;
bottom: 10px;
}
.year{
position: absolute;
width: 120px;
height: 30px;
left:130px;
color: white;
font-size: 18px;
transform:scale(0,0)
}
#year2000{
top:120px;
}
#year2000_{
top:200px;
}
#year2001{
top:600px;
}
.food{
color: bisque;
width: 50px;
height: 30px;
transform: scale(0,0);
}
#food1{
top:120px;
left: 290px;
}
#food2{
top:120px;
left: 560px;
}
#food3{
top:120px;
left: 890px;
}
#food4{
top:120px;
left: 290px;
}
#food5{
top:120px;
left: 560px;
}
#food6{
top:120px;
left: 890px;
}
#food7,#food8,#food9,#food10{
top:200px;
left: 290px;
}
#food11{
top:600px;
left: 290px;
}
#food12{
top:600px;
left: 560px;
}
#food13{
top:600px;
left: 890px;
}
#food14{
top:600px;
left: 890px;
}
.coins{
color: gold;
width: 50px;
height: 30px;
transform: scale(0,0);
}
.iconnum{
padding-left: 5px;
}
#coin1{
top: 120px;
left: 610px;
}
#coin2{
top: 120px;
left: 610px;
}
#coin3{
top: 200px;
left: 610px;
}
#coin4{
top: 280px;
left: 610px;
}
#coin5{
top: 600px;
left: 610px;
}
.industry{
color: rgb(204, 203, 203);
width: 50px;
height: 30px;
transform: scale(0,0);
}
#ind1{
top: 120px;
left: 340px;
}
#ind2{
top: 120px;
left: 660px;
}
#ind3{
top: 120px;
left: 940px;
}
#ind4{
top: 120px;
left: 340px;
}
#ind5{
top: 120px;
left: 660px;
}
#ind6{
top: 120px;
left: 940px;
}
#ind7{
top: 200px;
left: 940px;
}
#ind8{
top: 200px;
left: 940px;
}
#ind9{
top: 600px;
left: 340px;
}
#ind10{
top: 600px;
left: 660px;
}
.yearnext{
color: white;
width: 50px;
height: 50px;
transform: scale(1,0);
left: 160px;
}
#yn1{
top: 140px;
}
#yn2{
top: 220px;
}
.yearnext_{
color: white;
width: 50px;
height: 50px;
transform: scale(1,0);
}
#yn1_1{
left: 120px;
top:160px;
}
#yn1_2{
left: 180px;
top:160px;
}
#yn2_3{
left: 120px;
top:300px;
}
.changeline{
color: white;
transform: scale(0,1);
}
#cl1{
top: 285px;
left: 530px;
}
#cl2{
top: 285px;
left: 710px;
}
#cl3{
top: 290px;
left: 900px;
}
#cl4{
top: 340px;
left: 340px;
}
#cl5{
top: 350px;
left: 900px;
}
#curve{
top: 455px;
left: -180px;
transform: scale(1,0);
}
#complete{
color: white;
left: 50px;
top:340px;
transform: scale(0);
}
</style>
</head>
<body>
<div id="screen">
<div id="person1_" class="person_">租地農場主</div>
<div id="person2_" class="person_">領主、地主</div>
<div id="person3_" class="person_">工廠主</div>
<div id="person1" class="person">生產階級</div>
<div id="person2" class="person">土地所有者</div>
<div id="person3" class="person">非生產階級</div>
<div id="text"></div>
<div class="year" id="year2000">1758 年初</div>
<div class="year" id="year2000_">1758 年末</div>
<div class="year" id="year2001">1759 年初</div>
<div class="coins" id="coin1"><i class="fa-solid fa-coins"></i><span class="iconnum">20</span></div>
<div class="coins" id="coin2"><i class="fa-solid fa-coins"></i><span class="iconnum">20</span></div>
<div class="coins" id="coin3"><i class="fa-solid fa-coins"></i><span class="iconnum" id="coin3_num">20</span></div>
<div class="coins" id="coin4"><i class="fa-solid fa-coins"></i><span class="iconnum" id="coin4_num">10</span></div>
<div class="coins" id="coin5"><i class="fa-solid fa-coins"></i><span class="iconnum" id="coin5_num">20</span></div>
<div class="industry" id="ind1"><i class="fa-solid fa-gears"></i><span class="iconnum">10</span></div>
<div class="industry" id="ind2"><i class="fa-solid fa-gears"></i><span class="iconnum">10</span></div>
<div class="industry" id="ind3"><i class="fa-solid fa-gears"></i><span class="iconnum">10</span></div>
<div class="industry" id="ind4"><i class="fa-solid fa-gears"></i><span class="iconnum" id="ind4_num">10</span></div>
<div class="industry" id="ind5"><i class="fa-solid fa-gears"></i><span class="iconnum" id="ind5_num">10</span></div>
<div class="industry" id="ind6"><i class="fa-solid fa-gears"></i><span class="iconnum" id="ind6_num">0</span></div>
<div class="industry" id="ind7"><i class="fa-solid fa-gears"></i><span class="iconnum" id="ind7_num">10</span></div>
<div class="industry" id="ind8"><i class="fa-solid fa-gears"></i><span class="iconnum" id="ind8_num">10</span></div>
<div class="industry" id="ind9"><i class="fa-solid fa-gears"></i><span class="iconnum" id="ind9_num">10</span></div>
<div class="industry" id="ind10"><i class="fa-solid fa-gears"></i><span class="iconnum" id="ind10_num">10</span></div>
<div class="food" id="food1"><i class="fa-solid fa-wheat-awn"></i><span class="iconnum">20</span></div>
<div class="food" id="food2"><i class="fa-solid fa-wheat-awn"></i><span class="iconnum">10</span></div>
<div class="food" id="food3"><i class="fa-solid fa-wheat-awn"></i><span class="iconnum">20</span></div>
<div class="food" id="food4"><i class="fa-solid fa-wheat-awn"></i><span class="iconnum" id="food4_num">20</span></div>
<div class="food" id="food5"><i class="fa-solid fa-wheat-awn"></i><span class="iconnum" id="food5_num">10</span></div>
<div class="food" id="food6"><i class="fa-solid fa-wheat-awn"></i><span class="iconnum" id="food6_num">10</span></div>
<div class="food" id="food7"><i class="fa-solid fa-wheat-awn"></i><span class="iconnum" id="food7_num">10</span></div>
<div class="food" id="food8"><i class="fa-solid fa-wheat-awn"></i><span class="iconnum" id="food8_num">10</span></div>
<div class="food" id="food9"><i class="fa-solid fa-wheat-awn"></i><span class="iconnum" id="food9_num">10</span></div>
<div class="food" id="food10"><i class="fa-solid fa-wheat-awn"></i><span class="iconnum" id="food10_num">20</span></div>
<div class="food" id="food11"><i class="fa-solid fa-wheat-awn"></i><span class="iconnum" id="food11_num">20</span></div>
<div class="food" id="food12"><i class="fa-solid fa-wheat-awn"></i><span class="iconnum" id="food12_num">10</span></div>
<div class="food" id="food13"><i class="fa-solid fa-wheat-awn"></i><span class="iconnum" id="food13_num">10</span></div>
<div class="food" id="food14"><i class="fa-solid fa-wheat-awn"></i><span class="iconnum" id="food14_num">10</span></div>
<div class="yearnext" id="yn1"><i class="fa-solid fa-arrow-down-long"></i></div>
<div class="yearnext" id="yn2"><i class="fa-solid fa-arrow-down-long"></i></div>
<div class="yearnext_" id="yn1_1">生產</div>
<div class="yearnext_" id="yn1_2">消費</div>
<div class="yearnext_" id="yn2_3">流通</div>
<div class="changeline" id="cl1"><i class="fa-solid fa-minus"></i></div>
<div class="changeline" id="cl2"><i class="fa-solid fa-minus"></i></div>
<div class="changeline" id="cl3"><i class="fa-solid fa-minus"></i></div>
<div class="changeline" id="cl4"><i class="fa-solid fa-minus"></i></div>
<div class="changeline" id="cl5"><i class="fa-solid fa-minus"></i></div>
<div id="complete">完成迴圈</div>
<div id="curve">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- 定義箭頭樣式 -->
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
<path d="M0,0 L0,6 L9,3 z" fill="white" />
</marker>
</defs>
<path d="M300 150 Q 150 75, 300 0 " style="fill:none;stroke:white;stroke-width:1;marker-end: url(#arrow);" />
</svg>
</div>
</div>
<div style="padding: 10px;">
<input id="seek" type="range" oninput="setcur()" style="width: 800px;"/>
<button onclick="seekto()">跳轉</button>
<span>當前</span>
<input id="cur" type="number" />
<span>總時長</span>
<input id="total" type="number" />
</div>
<!-- 字幕 -->
<script>
let tlzm = gsap.timeline();
tlzm
.to("#text", {
text: {
value: "在魁奈的《經濟表》中",
delimiter:" "
},
duration:0,
ease: "none"
},1)
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=3')
.to("#text", {
text: {
value: "商品貨幣迴圈被一個連線圖表構造出來",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=6')
.to("#text", {
text: {
value: "這個迴圈在3大階級之間進行",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=4')
.to("#text", {
text: {
value: "而階級內部的交換不在考慮範圍內",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=5')
.to("#text", {
text: {
value: "這三個階級分別是",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=4')
.to("#text", {
text: {
value: "非生產階級，可以認為是工廠主和工人",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=5')
.to("#text", {
text: {
value: "土地所有者階級，通常是領主、地主",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=6')
.to("#text", {
text: {
value: "生產階級，可以認為是租地農場主和農業工人",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=7')
.to("#text", {
text: {
value: "所有迴圈都有開端",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=4')
.to("#text", {
text: {
value: "我們把《經濟表》發表的那年作為開端",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=4')
.to("#text", {
text: {
value: "首先是生產階級",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=3')
.to("#text", {
text: {
value: "生產階級手中擁有價值20億利弗爾的農產品，作為種子和食物",
delimiter:" "
},
duration:6,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=7')
.to("#text", {
text: {
value: "同時，他們還擁有價值100億利弗爾的工業品作為生產資料和生活用品",
delimiter:" "
},
duration:0,
ease: "none"
},'>+1')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=8')
.to("#text", {
text: {
value: "分攤到每一年，生產資料和生活用品會損耗或消耗10億利弗爾",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=7')
.to("#text", {
text: {
value: "然後是土地所有者階級",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=3')
.to("#text", {
text: {
value: "他們有價值10億利弗爾的食物，20億利弗爾貨幣和價值10億利弗爾的工業品",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=7')
.to("#text", {
text: {
value: "最後是非生產階級",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=4')
.to("#text", {
text: {
value: "他們的初始條件是價值20億利弗爾的農業品原料和食物",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=8')
.to("#text", {
text: {
value: "在這一年內，三大階級進行了生產和消費，直到年末",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=8')
.to("#text", {
text: {
value: "生產階級消耗工業品和農產品，生產出價值50億利弗爾的農產品原料",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=8')
.to("#text", {
text: {
value: "土地所有者階級則什麼也沒生產，只是消費。最終剩下的是20億利弗爾貨幣",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=8')
.to("#text", {
text: {
value: "非生產階級則消耗20億利弗爾農產品，生產出20億利弗爾的工業品",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=7')
.to("#text", {
text: {
value: "生產消費階段結束，接下來是交換階段",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=5')
.to("#text", {
text: {
value: "我們把各階級的產品和貨幣各自劃分為若干份",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=5')
.to("#text", {
text: {
value: "以方便接下來的交換",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=5')
.to("#text", {
text: {
value: "首先發起交換的，只能是擁有貨幣的土地所有者階級",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=6')
.to("#text", {
text: {
value: "他們用10億利弗爾貨幣從生產階級那交換等價的農產品",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=6')
.to("#text", {
text: {
value: "再用剩下的10億利弗爾貨幣從非生產階級那交換等價的工業品",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=7')
.to("#text", {
text: {
value: "之後土地所有者階級退出流通環節",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=5')
.to("#text", {
text: {
value: "接下來非生產者階級使用手中的10億利弗爾貨幣，從生產階級那裡交換10億利弗爾的農產品",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=9')
.to("#text", {
text: {
value: "然後他們就耗盡貨幣，只能等待生產階級先發起交換",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=6')
.to("#text", {
text: {
value: "生產階級花費10億利弗爾貨幣從非生產階級那裡交換10億利弗爾的工業品",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=8')
.to("#text", {
text: {
value: "非生產階級再次獲得10億利弗爾貨幣",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=5')
.to("#text", {
text: {
value: "他們將用來交換到最後所需的農產品原料和糧食",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=5')
.to("#text", {
text: {
value: "至此三大階級交換完成，貨幣和產品都到了所需的人手中",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=7')
.to("#text", {
text: {
value: "接下來就是領主和地主老爺的收稅和收租環節",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=5')
.to("#text", {
text: {
value: "生產階級交換所得到的貨幣又作為租金，回到了土地所有者階級手中",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=7')
.to("#text", {
text: {
value: "好了，現在其實整個經濟迴圈已經回到了初始狀態，但為了明顯一點，讓我們整理一下",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=8')
.to("#text", {
text: {
value: "將各階級的產品和貨幣各自彙總",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=5')
.to("#text", {
text: {
value: "和上一年初的初始狀態對比一下會發現他們並沒有什麼變化",
delimiter:" "
},
duration:0,
ease: "none"
},'>')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=6')
.to("#text", {
text: {
value: "馬克思評價說",
delimiter:" "
},
duration:0,
ease: "none"
},'>+=4')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=3')
.to("#text", {
text: {
value: "魁奈的《經濟表》用幾根粗線條表明，國民生產的具有一定價值的年產品",
delimiter:" "
},
duration:0,
ease: "none"
},'>+=1')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=8')
.to("#text", {
text: {
value: "要怎樣透過流通進行分配，才能在其他條件不變的情況下，使它的的簡單再生產（即原有規模的再生產）進行下去",
delimiter:" "
},
duration:0,
ease: "none"
},'>+=1')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=9')
.to("#text", {
text: {
value: "上一年的收穫，當然構成生產期間的起點",
delimiter:" "
},
duration:0,
ease: "none"
},'>+=1')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=5')
.to("#text", {
text: {
value: "無數單個流通（交換）行為，從一開始就被綜合為，根據他們所具有的社會特徵劃分出來的大體量運動。——幾個巨大的、職能確定的、經濟上的社會階級之間的流通",
delimiter:" "
},
duration:0,
ease: "none"
},'>+=1')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=15')
.to("#text", {
text: {
value: "《經濟表》提醒我們，價值的創造固然重要，但在目前的商品社會中，商品和貨幣的迴圈也是極其重要的、為生產創造條件的活動",
delimiter:" "
},
duration:0,
ease: "none"
},'>+=1')
.to("#text", { text: { value: "", delimiter:" " }, duration:0, },'>+=12')
</script>
<!-- 動畫 -->
<script>
gsap.registerPlugin(TextPlugin)
// 建立Timeline型別的例項
let tl = gsap.timeline();
function seekto(){
var cur=document.getElementById("seek").value;
tl.seek(cur);
tlzm.seek(cur);
}
function setcur(){
var cur=document.getElementById("seek").value;
document.getElementById("cur").value=cur;
}
//非生產階級，可以認為是工廠主和工人 4s
tl.to("#person3", {
x: 1000,
duration:1
},3+1+5+1+3+1+4+1+3+1)
tl.to("#person3_", {
scale: 1,
duration:1
},'>+0.5')
//土地所有者階級，通常是領主、地主 5s
.to("#person2", {
x: 700,
duration:1
},'>+2.5')
tl.to("#person2_", {
scale: 1,
duration:1
},'>+0.5')
//生產階級，可以認為是租地農場主和農業工人 6s
.to("#person1", {
x: 400,
duration:1
},'>+3.5')
tl.to("#person1_", {
scale: 1,
duration:0.5
},'>+0.5')
//所有迴圈都有開端 4s
.to("#year2000", {
scale: 1,
duration:0.5
},'>+5')
//首先是生產階級
.to("#food1", {
scale: 1,
duration:0.5
},'>+14')
//同時，他們還擁有價值100億利弗爾的工業品作為生產資料和生活用品
.to("#ind1", {
scale: 1,
duration:0.5
},'>+18')
//然後是土地所有者階級
.to("#food2", {
scale: 1,
duration:0.5
},'>+10')
.to("#coin1", {
scale: 1,
duration:0.5
},'>+1.5')
.to("#ind2", {
scale: 1,
duration:0.5
},'>+1.5')
//最後是非生產階級
.to("#food3", {
scale: 1,
duration:0.5
},'>+8')
//在這一年內，三大階級進行了生產和消費，直到年末
.to("#year2000_", {
scale: 1,
duration:0.5
},'>+8')
.to("#yn1", {
scaleY: 3,
duration:0.5,
transformOrigin: "center 0%"
},'>+1')
.to("#yn1_1", {
scaleY: 1,
duration:0.5,
transformOrigin: "center 0%"
},'>+1')
.to("#yn1_2", {
scaleY: 1,
duration:0.5,
transformOrigin: "center 0%"
},'>+1')
.addLabel("food4")
//生產階級消耗工業品和農產品，生產出價值50億利弗爾的農產品原料
.to("#food4", {
y: 80,
duration:1
},'food4+=3')
.to("#food4", {
scale: 1,
duration:0
},'food4+=3')
.to("#food4_num", {
innerHTML: 50,
snap: 'innerHTML',
duration:1,
ease: "none",
},'food4+=3')
.to("#ind4", {
y: 80,
duration:1
},'food4+=3')
.to("#ind4", {
scale: 1,
duration:0
},'food4+=1')
.to("#ind4_num", {
innerHTML: 0,
snap: 'innerHTML',
duration:1,
ease: "none",
},'food4+=3')
.to("#ind4", {
scale:0,
duration:0.5,
},'>+0.5')
.addLabel("food5")
//土地所有者階級則什麼也沒生產，只是消費。最終剩下的是20億利弗爾貨幣
.to("#food5", {
scale: 1,
duration:0
},'food5+=8')
.to("#food5", {
y: 80,
duration:1
},'food5+=8')
.to("#coin2", {
scale: 1,
duration:0
},'food5+=8')
.to("#coin2", {
y: 80,
duration:1
},'food5+=8')
.to("#ind5", {
scale: 1,
duration:0
},'food5+=8')
.to("#ind5", {
y: 80,
duration:1
},'food5+=8')
.to("#food5_num", {
innerHTML: 0,
snap: 'innerHTML',
duration:1,
ease: "none",
},'food5+=8')
.to("#ind5_num", {
innerHTML: 0,
snap: 'innerHTML',
duration:1,
ease: "none",
},'food5+=8')
.to("#food5", {
scale: 0,
duration:0.5,
},'>+1')
.to("#ind5", {
scale: 0,
duration:0.5,
},'<')
.addLabel("food6")
//非生產階級則消耗20億利弗爾農產品，生產出20億利弗爾的工業品
.to("#food6", {
scale: 1,
duration:0
},'food6+=2')
.to("#food6", {
y: 80,
duration:1
},'food6+=2')
.to("#ind6", {
scale: 1,
duration:0
},'food6+=2')
.to("#ind6", {
y: 80,
duration:1
},'food6+=2')
.to("#food6_num", {
innerHTML: 0,
snap: 'innerHTML',
duration:1,
ease: "none",
},'food6+=2')
.to("#ind6_num", {
innerHTML: 20,
snap: 'innerHTML',
duration:1,
ease: "none",
},'food6+=2')
.to("#food6", {
scale: 0,
duration:0.5
},'>+1')
//生產消費階段結束，接下來是交換階段
.to("#yn2", {
scaleY: 15,
duration:0.5,
transformOrigin: "center 0%"
},'>+5')
.to("#yn2_3", {
scaleY: 1,
duration:0.5,
transformOrigin: "center 0%"
},'>+1')
.addLabel("food7")
//我們把各階級的產品和貨幣各自劃分為若干份
.to("#food7", {
y: 80,
duration:1
},'food7+=2')
.to("#food7", {
scale: 1,
duration:0
},'food7+=2')
.to("#food8", {
y: 140,
duration:1
},'food7+=2')
.to("#food8", {
scale: 1,
duration:0
},'food7+=2')
.to("#food9", {
y: 200,
duration:1
},'food7+=2')
.to("#food9", {
scale: 1,
duration:0
},'food7+=2')
.to("#food10", {
y: 260,
duration:1
},'food7+=2')
.to("#food10", {
scale: 1,
duration:0
},'food7+=2')
.to("#coin3", {
scale: 1,
duration:0
},'>+2')
.to("#coin3", {
y: 80,
duration:1
},'<')
.to("#ind7", {
scale: 1,
duration:0
},'>+2')
.to("#ind7", {
y: 80,
duration:1
},'<')
.to("#ind8", {
scale: 1,
duration:0
},'<')
.to("#ind8", {
y: 140,
duration:1
},'<')
.addLabel("change1")
//首先發起交換的，只能是擁有貨幣的土地所有者階級
//他們用10億利弗爾貨幣從生產階級那交換等價的農產品
.to("#coin3_num", {
text: {
value:10
},
duration:0
},'change1+=12')
.to("#coin4", {
scale:1,
duration:0
},'change1+=12')
.to("#coin4", {
x:-320,
duration:1
},'change1+=12')
.to("#food7", {
x:270,
duration:1
},'change1+=12')
.to("#cl1", {
scaleX:14,
duration:0.5,
transformOrigin: "100% center"
},'change1+=10')
.addLabel("change2")
//再用剩下的10億利弗爾貨幣從非生產階級那交換等價的工業品
.to("#cl2", {
scaleX:14,
duration:0.5,
transformOrigin: "0% center"
},'change2+=3')
.to("#coin3", {
x:335,
duration:1,
},'change2+=4')
.to("#ind7", {
x:-285,
duration:1,
},'change2+=4')
.addLabel("change3")
//生產階級花費10億利弗爾貨幣從非生產階級那裡交換10億利弗爾的工業品
.to("#cl3", {
scaleX:40,
rotation:-5,
duration:0.5,
transformOrigin: "100% center"
},'change3+=11')
.to("#food8", {
x:655,
y:80,
duration:1,
},'change3+=13')
.to("#coin3", {
y:140,
x:-320,
duration:1,
},'change3+=13')
.addLabel("change4")
.to("#cl4", {
scaleX:41,
duration:0.5,
transformOrigin: "0% center"
},'change4+=12')
.to("#coin3", {
y:140,
x:335,
duration:1,
},'change4+=14')
.to("#ind8", {
x:-655,
duration:1,
},'change4+=14')
.addLabel("change5")
//非生產階級再次獲得10億利弗爾貨幣
//他們將用來交換到最後所需的農產品原料和糧食
.to("#cl5", {
scaleX:40,
rotation:-5,
duration:0.5,
transformOrigin: "100% center"
},'change5+=9')
.to("#food9", {
x:655,
y:140,
duration:1,
},'change5+=11')
.to("#coin3", {
x:-320,
y:200,
duration:1,
},'change5+=11')
.addLabel("tex")
//三大階級交換完成
.to("#coin3", {
x:0,
y:80,
duration:1,
},'tex+=12.5')
.to("#coin4", {
x:0,
y:0,
duration:1,
},'tex+=12.5')
.to("#coin4", {
scaleY:0,
duration:0,
},'tex+=13.5')
.to("#coin3_num", {
innerHTML: 20,
snap: 'innerHTML',
duration:1,
ease: "none",
},'tex+=13.5')
//好了，現在其實整個經濟迴圈已經回到了初始狀態，但為了明顯一點，讓我們整理一下
.to("#year2001",{
scale:1,
duration:0.5
},">+5.5")
.to("#food11",{
scale:1,
duration:0
},">+5.5")
.fromTo("#food11",{
y:-140,
},{
y:0,
duration:1
},">")
.to("#ind9",{
scale:1,
duration:0
},">+0.5")
.fromTo("#ind9",{
y:-260,
x:-50,
},{
y:0,
x:0,
duration:1
},">")
.to("#food12",{
scale:1,
duration:0
},">+0.5")
.fromTo("#food12",{
y:-320,
},{
y:0,
duration:1
},">")
.to("#coin5",{
scale:1,
duration:0
},">+0.5")
.fromTo("#coin5",{
y:-320,
},{
y:0,
duration:1
},">")
.to("#ind10",{
scale:1,
duration:0
},">+0.5")
.fromTo("#ind10",{
y:-320,
},{
y:0,
duration:1
},">")
.addLabel("food13")
.to("#food13",{
scale:1,
duration:0
},"food13+=0.5")
.fromTo("#food13",{
y:-320,
x:55
},{
y:0,
x:0,
duration:1
},"food13+=0.5")
.to("#food14",{
scale:1,
duration:0
},"food13+=0.5")
.fromTo("#food14",{
y:-320,
x:55
},{
y:0,
x:0,
duration:0.7
},"food13+=0.5")
.addLabel("food14")
.to("#food14",{
scale:0,
duration:0
},"food14+=0")
.to("#food13_num", {
innerHTML: 20,
snap: 'innerHTML',
duration:1,
ease: "none",
},'food14+=0')
.to("#curve",{
scaleY:3.1,
duration:1,
transformOrigin: "100% 100%"
},">+1")
.to("#complete",{
scale:1,
duration:1
},">+1")
// .to("#coin1", {
// x: 330,
// y:80,
// duration:1
// },'>+1')
let duration=tl.duration();
document.getElementById("total").value=duration;
document.getElementById("seek").max=duration;
document.getElementById("seek").min=0;
document.getElementById("seek").value=0;
</script>
<script type="text/template">
經濟迴圈由3大階級構成
1.租地農場主、土地所有者、工廠主依次進場
</script>
</body>
</html>
影片觀看
B站連結——《經濟表》動畫
我錄製執行結果後，又透過tts給影片配了音，釋出在了bilibili，歡迎來檢視效果
不過要吐槽的是B站把60幀的選項給搞沒了，投上去的720P60幀影片全都變成了30幀
導致高速動畫效果慘不忍睹，要是沒有大會員，那觀看起來真的不太好