Jump to content
Search Community

DNaoures

Members
  • Posts

    8
  • Joined

  • Last visited

Posts posted by DNaoures

  1. Hello everybody, 

     

    i've a SVG file with lot of objects and I want to animate them in a Timeline.

    These objects can be complex (a group with 2 or 3 shapes and paths) and i want create a function for each type of object (arrow, people, explanation,...) and call function in a timeline (with object in parameter).

     

     

    For exemple,  a arrow object :

    <g id="fleche2">
    	<g>
    		<path class="st0" d="M56,237.5v43v31v23v53c0,5.5,4.4,10,9.9,10h87.9c5.4,0,9.9-4.5,9.9-10v-97c0-5.5,4.4-10,9.9-10h116.5"/>
    		<g>
    			<polygon class="st1" points="287.3,276.8 288.9,280.5 287.3,284.2 296,280.5 			"/>
    		</g>
    	</g>
    </g>

     

     

    To animate the arrows, I use this function (with 2 parameters : arrow id and rotation angle) :

    function animeArrow(flecheInput,angle){
                  
            var fleche=flecheInput
            var arrow = fleche.find('path')
            var arrowHead = fleche.find ('polygon')
    
            var motionPath = MorphSVGPlugin.pathDataToBezier(arrow, {align:arrowHead});
    
            TweenLite.set(arrowHead, {xPercent:-50, yPercent:-50,  transformOrigin:"center center"});
            TweenLite.to(arrowHead, 15, {bezier:{values:motionPath, type:"cubic", autoRotate: angle}});
            TweenMax.fromTo(arrow, 15  , {drawSVG: '0% 0%'}, {drawSVG: '0 100%'})
        }

     

    and to set it in a timeline :

     var tl = new TimelineMax();
            tl
                .call(animeArrow,[($("#fleche1")),270],this, 1)
                .call(animeArrow,[($("#fleche2")),0],this, 15)
                .call(animeArrow,[($("#fleche3")),90],this, 30)
                .call(animeArrow,[($("#fleche4")),180],this, 45)
                .add( function(){ console.log( this.progress() ) } )
                .call(animeArrow,[($("#fleche5")),45],this, 50)

     

    This option works well but i'm not sure if it's the best way to manage Timeline (play, reverse, progress) and I must put manually the delay for each arrow.
    And to add and manage other animation in this timeline, it's not easy...

     

    Have you some ideas or example to improve my option  ?

    Thanks a lot !

     

     

  2. Very thanks for your answer !

     

    I use the MorphSVGPlugin.pathDataToBezier() method to create a path for the arrowhead.

    It's ok but i have a litte problem, the arrowhead is not aligned with the path direction. (same problem with  autoRotate : true)

     

    my js :

    $(document).ready(function(){
        $("#schema").load("schema2.svg", function(d) {
          var tween,
          opacity = false,
          motionPath = MorphSVGPlugin.pathDataToBezier("#arrow", {align:"#arrowHead"});
    
          TweenLite.set("#arrowHead", {xPercent:-50, yPercent:-50});
          tween = TweenLite.to("#arrowHead", 6, {bezier:{values:motionPath, type:"cubic",autoRotate: false}});
    
        })
    
    
    });
    

    and my svg  file :

    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
    <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
    <style type="text/css">
    
    .st7{fill:none;stroke:#000000;stroke-miterlimit:10;}
    </style>
    
     <g id="fleche99">
      <g>
        <path id="arrow" class="st7" d="M105.7,33h107.2c2.5,0,4.6,2.1,4.6,4.6v32.8c0,2.5-2.1,4.6-4.6,4.6h-33.4"/>   
        <g><polygon id="arrowHead" points="175,75 181.4,72.4 179.9,75 181.4,77.6 "/></g>
      </g>
     </g>
    </svg>

    Thanks for your help ! 

  3. Hello Everybody, 
     
    I've created an SVG file in Illustrator with arrows and export it as SVG.(see the .png file)
     
    The arrows are exported like this :

    <g id="arrow99">
     <g>
       <path class="st7" d="M105.7,33h107.2c2.5,0,4.6,2.1,4.6,4.6v32.8c0,2.5-2.1,4.6-4.6,4.6h-33.4"/>
       <g> <polygon points="175,75 181.4,72.4 179.9,75 181.4,77.6 "/></g>
     </g>
    </g>
    

    and I try to animate this arrow.
    My problem is to position, at the beginning of animation,  the <polygon> (the end of the arrow) at the beginning of <path> with the right rotation.
     
    Thanks a lot for your help (and sorry for my "poor" english  :oops: )
     
    For your information, i use this method to animate path :  

    post-53077-0-25263500-1493996776_thumb.png

    See the Pen CDHoB by anon (@anon) on CodePen

×
×
  • Create New...