动画库 TweenMax

约定不等于承诺〃 2022-10-25 11:21 353阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70]

<script type="text/javascript" src="https://img1.tiancitycdn.com/project1/csol/event/2021/04/cs210428sale/js/TweenMax.min.latest.js"></script>

TweenMax.to($('.theme'),1,{ opacity:1})
    TweenMax.to($('.line'),0.8,{ height:677,delay:1})

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 1]

<script type="text/javascript" src="https://image.tiancity.com/common/js/jquery-1.9.1.min.js"></script>
    <div id="y" class="y"></div>
    <style type="text/css">
    .y{ 
    	width: 126px;
    	height: 100px;
    	background: url(https://img1.tiancitycdn.com/mh/event/2021/tessa-pre/images/deco.png) no-repeat -617px 0 #222;
    	position: absolute;
    	top:0px;
    	left:0px;
    }
    </style>
    <script type="text/javascript" src="https://img1.tiancitycdn.com/mh/event/2021/tessa-pre/js/TweenMax.min.latest.js"></script>
    <script type="text/javascript">
    $(function(){ 
    	$(window).on("mousemove",function(e){ 
    		TweenMax.to("#y",0.2,{ 
    			top: e.pageY - ($("#y").height() / 2 ),
    			left: e.pageX - ($("#y").width() / 2 ),
    		})
    	})
    })
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 2]

<script type="text/javascript" src="https://image.tiancity.com/common/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://img1.tiancitycdn.com/mh/event/2021/tessa-pre/js/TweenMax.min.latest.js"></script>
    <style type="text/css">
    .obj { position: absolute;left: 50%;display: block;z-index: 3;}
    /*---- ----------*/
    #go_top a,#obindex,#go_more a,.tessa .sa1,.tessa .sa2,.tessa .sa3,#video,.stit span,.btn_left,.btn_right,.btn_story{  display:block; text-indent: -9999px; overflow: hidden;}
    .ic{ background: url(https://img1.tiancitycdn.com/mh/event/2021/tessa-pre/images/spr_common.png) no-repeat; display:block; text-indent: -9999px; overflow: hidden;}
    /*---- ----------*/
    #box1 #bgvideo{ position: fixed; top: 50%; left: 50%; z-index: 1; min-width: 100%; min-height: 100%; width: auto; height: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);overflow: hidden;}
    #box1 .cover{  position: fixed;left:0;top:0;width: 100%;height: 100%;z-index: 2;display: block;background:url(https://img1.tiancitycdn.com/mh/event/2021/tessa-pre/images/bg_cover1.png) no-repeat center top; background-size: cover;}
    #box1 .mark{  position: fixed;left:0;top:0;width: 100%;height: 100%;z-index: 2;display: block;background:url(https://img1.tiancitycdn.com/mh/event/2021/tessa-pre/images/mark.png) repeat;}
    #box1 .white{ position: absolute;left:50%;top:-120px;margin-left:0;width: 1047px;height: 1180px;display: block;z-index: 2;opacity: 0;background:url(https://img1.tiancitycdn.com/mh/event/2021/tessa-pre/images/white.png) no-repeat}
    /*---- ----------*/
    #box1 .cha { top:22px; margin-left:-1280px;width: 2103px;height: 1355px;background: url(https://img1.tiancitycdn.com/mh/event/2021/tessa-pre/images/tessa1.png) no-repeat;}
    #box1 .shadow { top:0; margin-left:-888px;width: 1539px;height: 1300px;background: url(https://img1.tiancitycdn.com/mh/event/2021/tessa-pre/images/bg_shadow.png) no-repeat;}
    #box1 .swan { top:-105px;margin-left:-853px;width: 1598px;height: 1440px;background:url(https://img1.tiancitycdn.com/mh/event/2021/tessa-pre/images/swan1.png) no-repeat;}
    /*---- ----------*/
    #box1 .solgan { position: absolute;left:50%;top:155px;margin-left:-590px;width: 716px;height: 544px;z-index: 5; }
    /*---- ----------*/
    .solgan .light { position: absolute;left:450px;top:42px;width: 255px;height: 104px;background:url(https://img1.tiancitycdn.com/mh/event/2021/tessa-pre/images/light1.png) no-repeat;}
    /*---- ----------*/
    .feather1 span, .feather2 span,.twinkle1 span, .twinkle2 span, .twinkle3 span, .twinkle4 span{ position: absolute;left:50%;background-image: url(https://img1.tiancitycdn.com/mh/event/2021/tessa-pre/images/deco.png);background-repeat: no-repeat;z-index: 3;opacity: 0;}
    .feather1 .f1_1 { top:172px;margin-left:-390px;width: 326px;height: 294px;background-position: 0 0;}
    .feather1 .f1_2 { top:304px;margin-left:-123px;width: 239px;height: 165px;background-position: -352px 0;}
    .feather1 .f1_3 { top:416px;margin-left:-22px;width: 124px;height: 111px;background-position: -617px 0;}
    /*---- ----------*/
    #video{  position: absolute;left:263px;top:330px; display: block;width: 186px;height: 194px; background-position: 0 -267px; text-indent: -9999px;z-index: 10;}
    #video:hover{  background-position: 0 -489px;}
    /*---- ----------*/
    .bg1 { position: absolute;left:0;top:0; display: block;width: 100%;height: 100%;background:url(https://img1.tiancitycdn.com/mh/event/2021/tessa-pre/images/bg_box1.jpg) no-repeat center top;background-size: cover;z-index: 0;}
    .tessa { position: absolute;left:0;top:80px; display: block;width: 716px;height: 194px;text-indent: -9999px;z-index: 10;}
    .tessa .sa1 { position: absolute;top:19px;left:108px;width: 208px;height: 64px; background-position: -324px -282px;z-index: 10;}
    .tessa .sa2 { position: absolute;top:82px;left:1px;width: 320px;height: 101px; background-position: -228px -378px;z-index: 10;}
    .tessa .sa3 { position: absolute;top:-2px;left:307px;width: 405px;height: 194px; background-position: -183px -499px;z-index: 10;}
    .tessa .line { position: absolute;top:85px;left:110px;width: 201px;height: 20px; background: url(https://img1.tiancitycdn.com/mh/event/2021/tessa-pre/images/line.png) no-repeat;z-index: 10;}
    /*---- ----------*/
    #box1 .stit{  position: absolute;left:119px;top:0px; display: block;width: 516px;height: 45px;z-index: 10;}
    #box1 .stit span { position: absolute;top:0;width: 55px;height: 45px;background-position-y: -198px;}
    #box1 .stit .st1 { left:0;background-position-x: 0;}
    #box1 .stit .st2 { left:56px;background-position-x: -55px;}
    #box1 .stit .st3 { left:111px;background-position-x: -111px;}
    #box1 .stit .st4 { left:166px;background-position-x: -166px;}
    #box1 .stit .st5 { left:221px;background-position-x: -221px;}
    #box1 .stit .st6 { left:276px;background-position-x: -276px;}
    #box1 .stit .st7 { left:331px;background-position-x: -331px;}
    #box1 .stit .st8 { left:386px;background-position-x: -386px;}
    #box1 .stit .st9 { left:441px; width: 69px; background-position-x: -441px;}
    </style>
    <div class="section" id="box1">
    	<video id="bgvideo" preload="auto" autoplay="autoplay" loop="loop" muted="muted">
    		<source src="https://img1.tiancitycdn.com/mh/event/2021/tessa-pre/images/sp.mp4" type="video/mp4">
    	</video>
    	<span class="cover"></span><span class="white"></span><span class="mark"></span>
    	<div class="solgan">
    		<a id="video" class="ic" href="javascript:;">洛奇英雄传官网</a>
    		<div class="tessa">
    			<span class="sa1 ic"></span>
    			<span class="sa2 ic"></span>
    			<span class="sa3 ic"></span>
    			<span class="line"></span>
    			<span class="light"></span>
    		</div>
    		<span class="stit"></span>
    	</div>
    	<span class="bg1"></span>
    	<span class="obj swan"></span>
    	<span class="obj cha ic"></span>
    	<span class="obj shadow"></span>
    	<span class="feather feather1"></span>
    </div>
    <script type="text/javascript">
    $(function(){ 
    	addObj()
    	var cut1Tl = new TimelineMax({ 
            paused: true
        });
        cut1Tl.set($('.light'),{ scale:1,opacity:0})
    	.set($('.line'),{ opacity:0})
    	.set($('.swan'),{ scale:1.05,x:150,rotation:0.01})
    	.set($('.f1_1'),{ scale:0,rotation:60})
    	.set($('.f1_2, .f1_3'),{ scale:0,rotation:-50})
    	.to($('.swan'),3,{ scale:1,x:0,rotation:0,force3D:true,ease:Sine.easeOut},"+=0.5")
    	.to($('.light'),0.1,{ opacity:1},"-=1.44")
    	.to($('.light'),2.2,{ scale:0,ease:Elastic.easeOut.config(400,17)},"-=1.44")
    	.to($('.light'),1.6,{ x:-350,rotation:0.01,force3D:true,ease:Elastic.easeInOut.config(1000,950)},"-=2.2")
    	.to($('.light'),1,{ opacity:0,ease:Sine.easeOut},"-=1.4")
    	.to($('.line'),0.8,{ opacity:1,ease:Sine.easeOut},"-=1.2")
    		.from($('.cha'),2.4,{ opacity:0,x:-360,rotation:0.01,force3D:true,ease:Elastic.easeInOut.config(100,250)},"-=3")
    	.to($('.white'),1.5,{ opacity:1},"-=2.4")
    	.to($('.f1_1'),2.6,{ y:500,scale:1,rotation:0,opacity:1,force3D:true,ease:Sine.easeOut},"-=2.2")
    	.to($('.f1_1'),1.2,{ x:-250,repeat:2,yoyo:true,ease:Sine.easeInOut},"-=2.4")
    	.to($('.f1_2'),2.6,{ y:400,scale:1,rotation:0,opacity:1,force3D:true,ease:Sine.easeOut},"-=3.4")
    	.to($('.f1_2'),1.2,{ x:-100,repeat:2,yoyo:true,ease:Sine.easeInOut},"-=3.6")
    	.to($('.f1_3'),2.4,{ y:-384,left:"53%",scale:1,rotation:0,opacity:1,force3D:true,ease:Sine.easeOut},"-=3.2")
    	.to($('.f1_3'),1,{ x:60,repeat:2,yoyo:true,ease:Sine.easeInOut},"-=3.3")
    		.from($('#go_top'),1.6,{ x:-160,opacity:0,rotation:0.01,force3D:true,ease:Sine.easeOut},"-=3.3");
    	var stitTl = new TimelineMax({ 
            paused: true
        });
        stitTl.set($('.stit span, .scroll'),{ y:-200,opacity:0,rotation:0.01})
    	.set($('#video'),{ scale:0,opacity:0,rotation:0.01})
    	.staggerTo($('.stit span'),1.4,{ y:0,opacity:1,rotation:0,force3D:true,ease:Sine.easeOut},0.07,"+=2.3")
    	.staggerTo($('#video'),1,{ scale:1,opacity:1,rotation:0,force3D:true,ease:Elastic.easeOut.config(20,500)},0.3,"-=2.2");
        var mtitWTl = new TimelineMax({ 
            paused: true
        });
        mtitWTl.set($('.sa3'),{ opacity:0,x:-150})
    	.set($('.sa1'),{ opacity:0,y:50})
    	.set($('.sa2'),{ opacity:0,y:-50})
    	.to($('.sa3'),1,{ opacity:1,x:0,force3D:true,ease:Elastic.easeInOut.config(1000,950)},"+=1.5")
    	.to($('.sa1,.sa2'),1,{ opacity:1,y:0,force3D:true,ease:Elastic.easeInOut.config(1000,950)},);
    	cut1Tl.play (1.2) ;
    	stitTl.play (1.2) ;
    	mtitWTl.play (1.2) ;
    })
    function addObj() { 
        for (i = 1; i <= 9; i++) { 
            $('.stit').append('<span class="st' + i + ' ic"></span>')
        }
        for (i = 1; i <= 3; i++) { 
            $('.feather1').append('<span class="f1_' + i + '"></span>')
        }
        for (i = 1; i <= 12; i++) { 
            $('.twinkle2, .twinkle4').append('<span></span>')
        }
        for (i = 1; i <= 18; i++) { 
            $('.twinkle3').append('<span></span>')
        }
        $('.feather2').append('<span class="f2_1"></span><span class="f2_2"></span>')
    }
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 3]

<script type="text/javascript" src="https://image.tiancity.com/common/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://img1.tiancitycdn.com/mh/event/2021/tessa-pre/js/TweenMax.min.latest.js"></script>
    <span class="obj white"></span>
    <style type="text/css">
    body{ background:#000;}
    .obj { position: absolute;left: 0;display: block;z-index: 3;}
    .white{ display:block;position: absolute;left:0;top:0px;margin-left:0;width: 1047px;height: 1180px;display: block;z-index: 2;background:url(https://img1.tiancitycdn.com/mh/event/2021/tessa-pre/images/white.png) no-repeat}
    *{ box-shadow:0px 0px 0px 1px #fff;}
    </style>
    <script type="text/javascript">
    $(function(){ 
    	itrMotion()
    })
    </script>
    <script type="text/javascript">
    function itrMotion() { 
        TweenMax.from($('.white'), 1, { 
            scale: 0.8,
            x: 0,
            repeat: -1,
            yoyo: true,
            rotation: 0.1,
            force3D: true,
            ease: Sine.easeInOut
        })
    }
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 4]

<script type="text/javascript" src="https://image.tiancity.com/common/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://img1.tiancitycdn.com/mh/event/2021/tessa-pre/js/TweenMax.min.latest.js"></script>
    
    <span class="twinkle2 tw2_1"></span>
    <span class="twinkle2 tw2_2"></span>
    
    <span class="twinkle3 tw3_1"></span>
    <span class="twinkle3 tw3_2"></span>
    <style type="text/css">
    body{ background:#000;height:1500px;}
    .twinkle2 span,.twinkle3 span{ position: absolute;left:50%;background-image: url(https://img1.tiancitycdn.com/mh/event/2021/tessa-pre/images/deco.png);background-repeat: no-repeat;z-index: 3;opacity: 0;}
    .twinkle2 span,.twinkle3 span { left:auto;width: 91px;height: 68px;background-position: -191px -337px;z-index: 2;}
    /*---- twinkle2 ----------*/
    .tw2_1 { position: absolute;left:50%;top:0px;margin-left:-704px;width: 300px;height: 800px;display: block;z-index: 2;opacity: 1;}
    .tw2_2 { position: absolute;left:50%;top:0px;margin-left:390px;width: 300px;height: 800px;display: block;z-index: 2;opacity: 1;}
    /*---- twinkle3 ----------*/
    .tw3_1 { position: absolute;left:50%;top:490px;margin-left:-940px;width: 400px;height: 800px;display: block;z-index: 2;opacity: 1;transform: rotateY(180deg);transform-origin: center top;}
    .tw3_1 span:nth-of-type(n+6) { display: none;}
    .tw3_2 { position: absolute;left:50%;top:490px;margin-left:134px;width: 700px;height: 800px;display: block;z-index: 2;opacity: 1;}
    /*---- twinkle4 ----------*/
    .tw4_1 { position: absolute;left:50%;top:180px;margin-left:-780px;width: 150px;height: 400px;display: block;z-index: 2;opacity: 1;transform: rotateY(180deg);}
    .tw4_2 { position: absolute;left:50%;top:220px;margin-left:684px;width: 150px;height: 800px;display: block;z-index: 2;opacity: 1;}
    .tw4_1 span:nth-of-type(n+9) { display: none;}
    .tw4_2 span:nth-of-type(n+9) { display: none;}
    *{ box-shadow:0px 0px 0px 1px #fff;}
    </style>
    <script type="text/javascript">
    $(function(){ 
    	addObj();
    	twinkle2_1();
    	twinkle2_2();
    	twinkle3();
    })
    </script>
    <script type="text/javascript">
    function addObj() { 
        for (i = 1; i <= 9; i++) { 
            $('.stit').append('<span class="st' + i + '"></span>')
        }
        for (i = 1; i <= 3; i++) { 
            $('.feather1').append('<span class="f1_' + i + '"></span>')
        }
        //----- twinkle2 ---------------------------
        for (i = 1; i <= 12; i++) { 
            $('.twinkle2, .twinkle4').append('<span></span>')
        }
        //----- twinkle3 ---------------------------
        for (i = 1; i <= 18; i++) { 
            $('.twinkle3').append('<span></span>')
        }
        $('.feather2').append('<span class="f2_1"></span><span class="f2_2"></span>')
    }
    function R(min, max) { 
        return min + Math.random() * (max - min)
    }
    function twinkle2_1() { 
        var particles = $(".tw2_1"),
            ptc = particles.find('span');
        ptc.each(function() { 
            var w = $(this).parent().width(),h = $(this).parent().height();
            var fallTl = new TimelineMax({ repeat: -1,delay: R(0, 2)});
            fallTl.set($(this), { x: R(w, w - 50),y: R(-140, h - 50),scale: 0})
    	  .to($(this), 0.2, { opacity: 0.6})
    	  .to($(this), R(3, 7), { x: R(0, -150),y: "+=50",scale: R(0.1, 1),ease: Linear.easeNone}, "-=0.2")
    	  .to($(this), 1, { opacity: 0}, "-=1");
            ptcDetail(particles)
        })
    }
    function twinkle2_2() { 
        var particles = $(".tw2_2"),ptc = particles.find('span');
        ptc.each(function() { 
            var w = $(this).parent().width(),h = $(this).parent().height();
            var fallTl = new TimelineMax({ repeat: -1,delay: R(0, 2)});
            fallTl.set($(this), { x: R(0, 100),y: R(-140, h - 50),scale: 0})
    	  .to($(this), 0.2, { opacity: 0.6})
    	  .to($(this), R(3, 7), { x: R(w - 50, w + 150),y: "+=50",scale: R(0.1, 1),ease: Linear.easeNone}, "-=0.2")
    	  .to($(this), 1, { opacity: 0}, "-=1");
            ptcDetail(particles)
        })
    }
    function twinkle3() { 
        var particles = $(".twinkle3"),ptc = particles.find('span');
        ptc.each(function() { 
            var w = $(this).parent().width(),h = $(this).parent().height();
            var fallTl = new TimelineMax({ repeat: -1,delay: R(0, 2)});
            fallTl.set($(this), { x: R(-150, -50),y: R(-140, h - 50),scale: 0})
    	    .to($(this), 0.2, { opacity: 1})
    	    .to($(this), R(3, 7), { x: R(w, w + 250),y: "+=50",scale: R(0.2, 0.65),ease: Linear.easeNone}, "-=0.2")
    	    .to($(this), 0.6, { opacity: 0}, "-=0.6");
            ptcDetail(particles)
        })
    }
    function ptcDetail(el) { 
        var p1 = el.find('span:odd'),p2 = el.find('span:even');
        p1.each(function() { 
            TweenMax.to($(this), R(1, 1.5), { 
                top: "+=40",
                repeat: -1,
                yoyo: true,
                ease: Sine.easeInOut
            })
        })
    }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70]: /images/20221024/c923a65a0acf486aba688139efa9daed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 1]: /images/20221024/5346404ceae54632b32aafcc6e734664.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 2]: /images/20221024/1e83f0e177fb410693bdee99706b36ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 3]: /images/20221024/5d05d9a705f54e9d9ddecc9b91458ae4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 4]: /images/20221024/5f45fdc19e7643478d851e20f07553cf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，353人围观）

还没有评论，来说两句吧...

相关阅读

相关 H5 动画大师 TweenMax.js/GSAP

手写过 CSS3 做 H5 动画，那过程很累，很低级。于是这次改用 TweenMax 库，感觉非常不错，原来它是做动画的老行尊，失敬失敬，早在 Adobe Flash 时代，这

爱被打了一巴掌/ 2023年06月17日 03:58/ 0 赞/ 15 阅读

相关动画库

动画分析过程 1.分析动画运动轨迹 2.想一下那些css 属性可以实现注意的效果 3.根据轨迹变化，进行百分比划分(不一定是等分) 划分方式，找到几个特殊的\[

朱雀/ 2023年06月12日 09:21/ 0 赞/ 15 阅读

相关动画库 TweenMax

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

约定不等于承诺〃/ 2022年10月25日 11:21/ 0 赞/ 354 阅读

相关 tweenMax下载和使用

官网下载地址：[https://www.tweenmax.com.cn/source/][https_www.tweenmax.com.cn_source] 官方文档：

我不是女神ヾ/ 2022年09月12日 14:45/ 0 赞/ 208 阅读

相关 js匀速动画及动画库

<table> <tbody> <tr> <td><b>准备知识</b></td> </tr> </tbody> </table> <table

今天药忘吃喽~/ 2022年06月07日 00:53/ 0 赞/ 296 阅读

相关 TweenMax学习笔记整理

因为要做一个案例，里面用到了很多动画，TweenMax真的是一个很强大的动画库，所以就学了一点里面的方法，现在整理出来官网：https://greensock.com/tw

刺骨的言语ヽ痛彻心扉/ 2022年05月22日 06:47/ 0 赞/ 309 阅读

相关 TweenMax（二）按钮点击小动画

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

今天药忘吃喽~/ 2022年04月18日 04:07/ 0 赞/ 274 阅读

相关 TweenMax（一）基础语法

偶然发现一个很强大打的动画库，果断了解一下。 <script src = 'https://cdnjs.cloudflare.com/ajax/libs/gsap/2

小灰灰/ 2022年04月18日 03:48/ 0 赞/ 218 阅读

相关 TweenMax 参数说明(中文翻译)

TweenMax 建立在 TweenLite 和TweenFilterLite 基础之上，因此，又揉合了这二者的功能，使得功能更加的齐备，但是如果说易用性，觉得还是 Tween

系统管理员/ 2021年10月23日 14:12/ 0 赞/ 597 阅读

相关轻量级JavaScript动画库

地址: [https://www.animejs.cn/][https_www.animejs.cn] [https_www.animejs.cn]: https://ww

傷城~/ 2021年07月26日 14:13/ 0 赞/ 467 阅读