qq_42224790
qq_42224790
2021-02-23 16:28

初学TweenMax动画问题描述

  • html5
  • javascript

效果类似于多液体推动移动

最终目标:可以从左边注入任意种流体,整个流动路径上的流体是连续移动的,即:
(1)后注入的流体推动已有的流体向前移动,
(2)某段到达另一端出口后流出(逐渐缩短消失)

我自己写的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/DrawSVGPlugin.min.js"></script>
        <script type="text/javascript" src="js/TweenMax.min.js"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    </head>
    <body>
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 400">
                  <path class="lin" id="lin1" fill="none" stroke="green" stroke-width="2" d="M80 10 l0 20 l0 20 l0 20 l0 20 Q 90 95 100 95" />
                  <path class="lin" id="lin2" fill="none" stroke="red" stroke-width="3" d="M100 95 l0 -20 l0 -20 l0 -20 l0 -20 l0 -5" />
                  <path class="lin" id="lin3" fill="none" stroke="black" stroke-width="3" d="M100 95 l0 -10" />
            </svg>
        </div>
        
        <script type="text/javascript">
              var lin4 = $("#lin1").clone().attr('id', 'lin4').insertAfter("#lin1");     //创建新的路径lin4
              lin4.attr('stroke','yellow');
              var tl = new TimelineMax({repeat: 0,repeatDelay: 1});
              tl.from("#lin4", 6, {drawSVG:"0%"});
              
              var lin5 = $("#lin3").clone().attr('id', 'lin5').insertAfter("#lin3");    //创建新的路径lin5
              lin5.attr('stroke','green');
              TweenMax.from("#lin5",6,{drawSVG:"0%"});
              
              var line = document.getElementById("lin2");                              //路径3移动
            var length = line.getTotalLength();
            var tl = new TimelineMax();
              var tween = {x: 0};
              tl.to(tween,85, {
                x: length,
                onUpdate: function() {
                    var point = line.getPointAtLength(tween.x);
                    var y = point.y - 95;
                    TweenMax.set("#lin3",{
                        y: y
                    });
                }
            });
            
            var line1 = document.getElementById("lin2");                              //路径5移动
            var length1 = line.getTotalLength();
            var tll = new TimelineMax({delay: 5});
              var tweenn = {x1: 0};
              tll.to(tweenn,85, {
                x1: length1,
                onUpdate: function() {
                    var point1 = line1.getPointAtLength(tweenn.x1);
                    var y1 = point1.y - 95;
                    TweenMax.set("#lin5",{
                        y: y1
                    });
                }
            });
            
            var lin6 = $("#lin2").clone().attr('id', 'lin6').insertAfter("#lin2");     //创建新的路径lin6
              lin6.attr('stroke','yellow');
              var t = new TimelineMax({delay:5});
              t.from("#lin6", 85, {drawSVG:"0%"});
            
        </script>
    </body>
</html>

因为是自己学习,所以代码写的不是很规范,也只想把最终的效果给模拟出来

请求解惑的问题

导师给我的参考思路:
(1)有两条固定的控制轨迹线,一条作为向下流动的控制线;另一条作为向上流动的控制线;
(2)复制一条控制曲线,to/fromto方法,使其长度变化,在to/fromto的回调函数,动态构建若干条新线段(svg path):
1)根据新线段在井眼中的位置(起点-终点),从控制线上取若干个点(作为 path的d属性,也就是坐标点);
2)下一条动态线段的起点就是上一条的终点,根据其占的控制线的百分比长度,从控制线上取点生成其path的d属性

我觉得我并没有按照他给的要求做完这个效果,所以有没有大佬能给点建议应该怎么做这个啊

  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

0条回答