Skip to content

Commit

Permalink
fixes
Browse files Browse the repository at this point in the history 
demos on using path
  • Loading branch information
@intersel
intersel committed Jan 8, 2017
1 parent daa6f59 commit 36a562b
Show file tree
Hide file tree
Showing 9 changed files with 180 additions and 38 deletions.
Binary file added examples/images/petal-vert-605-871.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/images/petale-bleu-605-1032.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/images/petale-jaune-700-871.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/images/petale-violet-766-965.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/images/petales.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
117 changes: 117 additions & 0 deletions examples/index-animation-following-path.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<title>Elements following a bezier path</title>
<!--meta name="viewport" content="width=device-width,initial-scale=1.0"-->
<meta name="viewport" content="width=device-width">
<meta content="" name="description">
<link rel="stylesheet" href="structure.css" media="all">
<script type="text/javascript" src="../extlib/jquery-2.2.4.js"></script>
<script type="text/javascript" src="../extlib/jquery.path/jquery.path.js"></script>
<script type="text/javascript" src="../extlib/jquery.path/jquery.cssHooks.transform.js"></script>

<!-- include of the iFSM Animation tool -->
<script type="text/javascript" src="../iFSMAnimation.js"></script>
<!-- include of iFSM - see https://github.com/intersel/iFSM/ -->
<script type="text/javascript" src="../extlib/iFSM/iFSM.js"></script>
</head>
<body>
<header id="header" role="banner">
</header>
<div id="animation">

<section id="animation-objectsonpath"
data-delay-before-restart="3500"
data-box-size-reference="2000,2000"
data-box-responsive="true"
data-div-class="animationDiv"
data-loader-class="animationLoader"
data-keep-height-visible="true"
>
<article id="petale_vert"
data-animation="specialAnimateNoWait,3000,{path : greenLogoPath}"
data-enter-animation="display, 0, 775,775,775,775"
data-exit-animation="smoothHide,0,-1210,0"
>
<img src="images/petal-vert-605-871.png">
</article>
<article id="petale_bleu"
data-animation="specialAnimateNoWait,3000,{path : blueLogoPath}"
data-enter-animation="display, 0, 774,1040,774,1040"
data-exit-animation="smoothHide,0,-1210,0"
>
<img src="images/petale-bleu-605-1032.png">
yes I<br> follow<br>
a Bezier<br> path!<br>
and rotate<br>
accordingly
</article>
<article id="petale_orange"
data-animation="specialAnimateNoWait,3000,{path : orangeLogoPath}"
data-enter-animation="display, 0, 923,775,923,775"
data-exit-animation="smoothHide,0,-1210,0"
>
<img src="images/petale-jaune-700-871.png">
with the dotted path
</article>
<article id="petale_violet"
data-animation="specialAnimateNoWait,3000,{path : violetLogoPath}"
data-enter-animation="display, 0, 1024,930,1024,930"
data-exit-animation="smoothHide,0,-1210,0"
>
<img src="images/petale-violet-766-965.png">
</article>
</section>
</div>
<audio id="music" src="musique/bethlem-jazz.mp3" preload="auto"></audio>
<button id="onoff_music"></button>
<footer id="footer"></footer>
<script>

//give the global box of the paths
$().iFSMAsetGeneralSize($('#animation-objectsonpath').attr('data-box-size-reference'));


var greenLogoPath = new $.path.bezier({
start: { x:775, y:775, angle: -50},
end: {x:900,y:950, angle: 15},
rotator: new $.path.rotators.setRotation(45),
trace:false
});
var blueLogoPath = new $.path.bezier({
start: { x:774, y:1040, angle: -80},
end: {x:-320,y:1013, angle: 60},
rotator: new $.path.rotators.followPath(),
trace:false
});
var orangeLogoPath = new $.path.bezier({
start: { x:923, y:775, angle: -80},
end: {x:2320,y:805, angle: 60},
rotator: new $.path.rotators.setRotation(45),
trace:true
});
var violetLogoPath = new $.path.bezier({
start: { x:1024, y:930, angle: -80},
end: {x:1200,y:2320, angle: 60},
rotator: new $.path.rotators.setRotation(75),
trace:false
});

$(document).ready(function() {
$('section#animation-objectsonpath')
.iFSMAnimation(
{ debug:false
,logFSM:'FSM_1,FSM_20,FSM_37'
});

//Button
$("#music").iFSM(musicMachine,{debug:true});
$("#onoff_music").iFSM(buttonOnOffMachine,{sendTo:$('#music'),text:{on:'Sound On',off:'Sound Off'},debug:true});

});
</script>

</body>
</html>
75 changes: 38 additions & 37 deletions examples/index2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,59 +29,60 @@
<h2>Some animation examples using iFMSAnimation :-)</h2>
</header>
<div style="float:left;width:551px;">
<section id="animation-objects"
data-delay-before-restart="3000"
data-box-responsive="true"
data-div-class="animation"
data-box-size-reference="551,551"
>
<article id="HappyNewYear_B"
data-animation="loop, 2000, 190, 204, 90, 104, 0, 3000"
data-enter-animation="display, 2000, 90, 104, 90, 0"
data-exit-animation="smoothHide,1000,90,104"
style="width:50px;"
>
<img src="images/B.png"><br>
I'm looping forth and back....
</article>
<article id="HappyNewYear_A"
data-animation="specialAnimate,3000,{path : aPath}"
data-enter-animation="display,2000,335,275,335,235"
data-exit-animation="smoothHide,1000,383,168,383,168"
style="width:50px;"
>
<img src="images/A.png">I'm turning following an arc path...
</article>
</section>
<section id="animation-objects"
data-delay-before-restart="3000"
data-box-responsive="true"
data-div-class="animation"
data-box-size-reference="551,551"
>
<article id="HappyNewYear_B"
data-animation="loop, 2000, 190, 204, 90, 104, 0, 3000"
data-enter-animation="display, 2000, 90, 104, 90, 0"
data-exit-animation="smoothHide,1000,90,104"
style="width:50px;"
>
<img src="images/B.png"><br>
I'm looping forth and back....
</article>
<article id="HappyNewYear_A"
data-animation="specialAnimate,3000,{path : aPath}"
data-enter-animation="display,2000,335,275,335,235"
data-exit-animation="smoothHide,1000,383,168,383,168"
style="width:50px;"
>
<img src="images/A.png">I'm turning following an arc path...
</article>
</section>
</div>
<div id="animation2" class="animated_section" data-box-size-reference="551,451">
<div id="hello"
class="anim2"
data-animation="loop, 2000, 300, 0, 50, 0, 3000"
data-enter-animation="display, 100, -100, 0">
hello
data-enter-animation="display, 1000, 300,0,-100, 0, easeOutBounce">
hello coming forth and back
</div>
<div id="hello2"
class="anim2"
data-animation="loop, 2000, 0, 100, 180, 300, 5"
data-enter-animation="display, 100, -100, 0" >
hello2
</div>
<div id="hello3"
<div id="waypoints"
class="anim2"
data-animation="specialAnimateNoWait,12000,{path : myFirstFollowLinePath},,,,easeInOutQuint"
data-enter-animation="display, 1000, 60, 40, -100, 0">hello3</div>
<div id="world"
data-enter-animation="display, 1000, 60, 44, -100, 0">
Following a waypoint path<br>
with an 'easeInOutQuint' effect
</div>
<div id="arc"
class="anim2"
data-animation="specialAnimateNoWait,3000,{path : aPath2},,,,easeInElastic"
data-enter-animation="display, 1500, 350, 190, -100, 0" >World!</div>
data-enter-animation="display, 1500, 350, 190, -100, 0" >Along an arc,<br>with elastic effect!</div>
</div>
<footer id="footer" role="footer">
<p>
<a class="signature" href="http://www.intersel.fr/">Intersel</a>
</p>
</footer>
<script>

//give the global box of the paths
$().iFSMAsetGeneralSize($('#animation-objects').attr('data-box-size-reference'));

var arc_params = {
center: [285,185],
radius: 100,
Expand All @@ -93,7 +94,7 @@ <h2>Some animation examples using iFMSAnimation :-)</h2>
var arc_params2 = {
center: [200,200],
radius: 150,
start: 100,
start: 92,
end: 90,
dir: 1
}
Expand Down
10 changes: 9 additions & 1 deletion examples/structure.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,16 @@ body {
/* background-color: #1c3970;*/
}

section#animation-objects article {
#animation-objectsonpath {
background: #fff;
}


section article,div#animation2 div {
opacity : 0;
color : orange;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
font-size : 12px;
/* width:1300px;
height:500px;
*/
Expand Down
16 changes: 16 additions & 0 deletions extlib/jquery.path/jquery.path.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,10 @@
initAtan2 = Math.atan2(initVector.y, initVector.x);
angle = 0;
}
if (initVector.x == prevState.vectx && initVector.y == prevState.vecty)
{
angle = 0;
}
else
{
angle = Math.atan2(prevState.vecty, prevState.vectx) - initAtan2;
Expand Down Expand Up @@ -231,6 +235,18 @@
if($.path.rotators.isRotator(fx.end.rotator))
{
var myElem = $(fx.elem);

if (fx.pos == 0)
{
myElem.attr('prevState_x',0);
myElem.attr('prevState_y',0);
myElem.attr('prevState_vectx',0);
myElem.attr('prevState_vecty',0);
myElem.attr('prevState_orix',0);
myElem.attr('prevState_oriy',0);
myElem.attr('prevState_rotate',0);
}

var prevState = {
x:myElem.attr('prevState_x'),
y:myElem.attr('prevState_y'),
Expand Down

0 comments on commit 36a562b

Please sign in to comment.