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;}//非生产阶级，可以认为是工厂主和工人 4stl.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帧
导致高速动画效果惨不忍睹，要是没有大会员，那观看起来真的不太好
