使用GSAP制作动画视频

GSAP

3Blue1Brown 给我留下了深刻印象。利用动画制作视频,内容简洁,演示清晰。前两天刚好碰到一件事,我就顺便学习了一下怎么用代码做动画。

javascrip为例,有两个动画引擎,GSAPAnimajs。由于网速的原因,询问了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帧

导致高速动画效果惨不忍睹,要是没有大会员,那观看起来真的不太好

相关推荐
鸢_3 天前
【Threejs】相机控制器动画
javascript·实时互动·动画·webgl
Smoothzjc3 天前
requestAnimationFrame与setInterval的抉择
前端·javascript·性能优化·动画
柴柴的小记3 天前
前端实现json动画(附带示例)
javascript·动画·lottie
冷眼Σ(-᷅_-᷄๑)5 天前
WPF缩放动画和平移动画叠加后会发生什么?
wpf·动画
Liquor14197 天前
JavaScript知识点梳理及案例实践
开发语言·前端·javascript·python·css3·html5·js
fury_1237 天前
base64文本div中增加一个img标签,img标签实时渲染后端返回的base64数据成对应图片
java·服务器·前端·js
我命由我123458 天前
CesiumJS 案例 P18:检测文本、删除所有文本、隐藏与显示文本、改变文本
前端·javascript·前端框架·html·css3·html5·js
海上彼尚9 天前
根据JSON绘制3D地区
前端·3d·js
我命由我123459 天前
CesiumJS 案例 P19:添加矩形、监听鼠标左击、监听鼠标右击、监听鼠标移动
前端·javascript·前端框架·html·css3·html5·js
满分观测网友z10 天前
ExpandingCard扩展卡片
web·js