Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
matefun
Frontend
Commits
b973d68c
Commit
b973d68c
authored
Oct 07, 2018
by
Diego Rey
Browse files
Updated animation 2D to use requestAnimationFrame
parent
33edb4db
Changes
3
Hide whitespace changes
Inline
Side-by-side
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html
View file @
b973d68c
...
...
@@ -133,7 +133,7 @@
<i
class=
"fa fa-plus"
></i>
</button>
<span
class=
"speed-value"
>
{{animation.speedX | number:'1.
1
'}}x
{{animation.speedX | number:'1.
0
'}}x
</span>
</div>
</div>
...
...
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts
View file @
b973d68c
...
...
@@ -40,17 +40,25 @@ export class Graph2DComponent {
// Animation state
animation
:
Animation
=
{
data
:
[],
timer
:
null
,
init
:
false
,
currentFrame
:
0
,
speed
:
1000
,
speedX
:
1.0
,
fps
:
10
,
playing
:
false
,
init
:
false
,
timeout
:
null
,
animationFrame
:
null
,
speedX
:
10
,
boton
:
true
,
zoo
:
2000
};
//Nuevo
public
easeInOutCubic
=
function
(
fps
)
{
var
t
=
fps
<
6
?
6
:
fps
;
var
k
=
t
/
60
;
var
animation
=
k
<
.
5
?
60
*
(
4
*
k
*
k
*
k
)
:
60
*
((
k
-
1
)
*
(
2
*
k
-
2
)
*
(
2
*
k
-
2
)
+
1
);
console
.
log
(
animation
);
return
animation
;
}
public
setZoom
=
()
=>
{
this
.
animation
.
zoo
=
this
.
animation
.
zoo
;
...
...
@@ -309,13 +317,15 @@ export class Graph2DComponent {
* @name updateFrame
* @desc update data for Function Plot and redraw the graph
*/
public
updateFrame
=
function
(
d
)
{
if
(
this
.
instance
)
{
this
.
instance
.
options
.
data
=
d
;
this
.
instance
.
draw
();
public
updateFrame
=
function
()
{
var
$this
=
this
;
var
$data
=
$this
.
animation
.
data
[
$this
.
animation
.
currentFrame
];
if
(
$this
.
instance
)
{
$this
.
instance
.
options
.
data
=
$data
;
$this
.
instance
.
draw
();
}
else
{
let
bounding
=
this
.
getBounding
();
this
.
instance
=
functionPlot
({
let
bounding
=
$
this
.
getBounding
();
$
this
.
instance
=
functionPlot
({
target
:
'
#graph2D-container
'
,
width
:
bounding
.
width
,
height
:
bounding
.
height
,
...
...
@@ -327,47 +337,48 @@ export class Graph2DComponent {
type
:
'
discrete
'
}
},
data
:
d
data
:
$data
})
}
// Update Frame
this
.
animation
.
currentFrame
=
(
this
.
animation
.
currentFrame
+
1
)
%
this
.
animation
.
data
.
length
;
$this
.
animation
.
timeout
=
setTimeout
(
function
()
{
$this
.
animation
.
currentFrame
=
(
$this
.
animation
.
currentFrame
+
1
)
%
$this
.
animation
.
data
.
length
;
$this
.
animation
.
animationFrame
=
requestAnimationFrame
(
$this
.
updateFrame
.
bind
(
$this
));
},
1000
/
this
.
easeInOutCubic
(
$this
.
animation
.
fps
));
}
/**
* @name runAnimation
* @desc Run Shapes Animation
*/
public
runAnimation
=
function
()
{
if
(
this
.
animation
.
playing
)
return
;
var
$this
=
this
;
if
(
$this
.
animation
.
timer
!==
null
)
return
;
$this
.
updateFrame
(
$this
.
animation
.
data
[
$this
.
animation
.
currentFrame
]);
$this
.
animation
.
timer
=
setInterval
(
function
(){
$this
.
updateFrame
(
$this
.
animation
.
data
[
$this
.
animation
.
currentFrame
]);
},
$this
.
animation
.
speed
);
$this
.
animation
.
playing
=
true
;
$this
.
updateFrame
();
}
/**
* @name pauseAnimation
* @desc Pause Shapes Animation
*/
public
pauseAnimation
=
function
()
{
var
$this
=
this
;
clearInterval
(
$this
.
animation
.
timer
);
$this
.
animation
.
timer
=
null
;
cancelAnimationFrame
(
$this
.
animation
.
animationFrame
);
clearTimeout
(
$this
.
animation
.
timeout
);
$this
.
animation
.
timeout
=
null
;
$this
.
animation
.
playing
=
false
;
}
/**
* @name stopAnimation
* @desc Stop Shapes Animation
*/
public
stopAnimation
=
function
()
{
var
$this
=
this
;
clearInterval
(
$this
.
a
nimation
.
timer
);
$this
.
pauseA
nimation
(
);
$this
.
animation
.
data
=
[];
$this
.
animation
.
timer
=
null
;
$this
.
animation
.
currentFrame
=
0
;
$this
.
animation
.
speed
=
1000
;
$this
.
animation
.
playing
=
false
;
$this
.
animation
.
init
=
false
;
this
.
instance
.
removeAllGraphs
();
}
...
...
@@ -377,9 +388,18 @@ export class Graph2DComponent {
* @desc Decrease Speed Animation
*/
public
decreaseSpeed
=
function
()
{
if
(
this
.
animation
.
speedX
>
0.19
)
{
this
.
animation
.
speed
*=
1.1
;
this
.
animation
.
speedX
-=
0.1
;
var
decrease
=
false
;
if
(
this
.
animation
.
fps
>
6
)
{
decrease
=
true
;
}
if
(
decrease
)
{
if
(
this
.
animation
.
fps
>
10
)
{
this
.
animation
.
fps
-=
1
;
this
.
animation
.
speedX
=
this
.
animation
.
fps
/
10
;
}
else
{
this
.
animation
.
fps
-=
1
;
this
.
animation
.
speedX
=
this
.
animation
.
fps
/
10
;
}
this
.
pauseAnimation
();
this
.
runAnimation
();
}
...
...
@@ -390,7 +410,7 @@ export class Graph2DComponent {
* @desc Increase Speed Animation
*/
public
restoreSpeed
=
function
()
{
this
.
animation
.
speed
=
10
00
;
this
.
animation
.
fps
=
10
;
this
.
animation
.
speedX
=
1
;
this
.
pauseAnimation
();
this
.
runAnimation
();
...
...
@@ -401,9 +421,18 @@ export class Graph2DComponent {
* @desc Increase Speed Animation
*/
public
increaseSpeed
=
function
()
{
if
(
this
.
animation
.
speedX
<
10
)
{
this
.
animation
.
speed
*=
0.9
;
this
.
animation
.
speedX
+=
0.1
;
var
increase
=
false
;
if
(
this
.
animation
.
fps
<
60
)
{
increase
=
true
;
}
if
(
increase
)
{
if
(
this
.
animation
.
fps
>=
10
)
{
this
.
animation
.
fps
+=
1
;
this
.
animation
.
speedX
=
this
.
animation
.
fps
/
10
;
}
else
{
this
.
animation
.
fps
+=
1
;
this
.
animation
.
speedX
=
this
.
animation
.
fps
/
10
;
}
this
.
pauseAnimation
();
this
.
runAnimation
();
}
...
...
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.helper.ts
View file @
b973d68c
export
interface
Animation
{
data
?:
any
,
timer
?:
an
y
,
init
:
boole
an
,
currentFrame
:
number
,
speed
:
number
,
speedX
:
number
,
fps
:
number
,
playing
:
boolean
,
init
:
boolean
,
timeout
?:
any
,
animationFrame
?:
any
,
speedX
:
number
,
boton
:
boolean
,
zoo
:
number
,
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment