DNaoures
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by DNaoures
-
-
Hello everybody
An idea to generate (from a basic path) and animate this kind of arrows (with chevrons) ?
Thanks a lot for your help !!
-
Hi Carl,
thanks a lot !
Your explanation is perfect !
David
- 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 !
-
Very thanks for your demo !
With DrawSVG plugin to draw line, it's perfect !!
thanks again !
- 1
-
-
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 !
-
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 )
For your information, i use this method to animate path :
Generate and Animate Arrow
in GSAP
Posted
@PointC, @Cassie thanks a lot your answers !
It's perfect !!
Have a good day !
David