Animations: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(13 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<html>
<html>
<span onClick="p.visit([-1.5,-1.5],500,2)">Click here, to start animation</span>
<span onClick="p.visit([-1.8,-0.5],3000,{repeat: 2, effect: '<>'});" style="color:blue">Click here, to start animation 1</span>
<span onClick="p.moveTo([-1.5,1.5],1000)" style="color:red">Click here, to start animation 2</span>
</html>
<jsxgraph width="500" height="500">
<jsxgraph width="500" height="500">
brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-2,2,2,-2], keepaspectratio:true, axis:true});
brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-2,2,2,-2], keepaspectratio:true, axis:true});
p = brd.createElement('point',[1.5,1.5],{face:'o', size:8, strokeColor:'red', fillOpacity:0.6, strokeOpacity: 0.6});
p = brd.create('point',[1.5,1.5],{face:'o', size:8, strokeColor:'red', fillOpacity:0.6, strokeOpacity: 0.6});
brd.create('segment',[[0,0],p],{dash:3});
</jsxgraph>
</jsxgraph>
===The JavaScript code===
<source lang="xml">
<span onClick="p.visit([-1.8,-0.5],1000,2)" style="color:blue">Click here, to start animation 1</span>
<span onClick="p.moveTo([-1.5,1.5],1000)" style="color:red">Click here, to start animation 2</span>
<jsxgraph width="500" height="500">
brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-2,2,2,-2], keepaspectratio:true, axis:true});
p = brd.create('point',[1.5,1.5],{face:'o', size:8, strokeColor:'red', fillOpacity:0.6, strokeOpacity: 0.6});
brd.create('segment',[[0,0],p],{dash:3});
</jsxgraph>
</source>
<source lang="html4strict">
<span onClick="p.visit([-1.8,-0.5],1000,2)" style="color:blue">Click here, to start animation 1</span>
<span onClick="p.moveTo([-1.5,1.5],1000)" style="color:red">Click here, to start animation 2</span>
</source>
[[Category:Examples]]

Latest revision as of 11:31, 12 November 2020

Click here, to start animation 1 Click here, to start animation 2

The JavaScript code

<span onClick="p.visit([-1.8,-0.5],1000,2)" style="color:blue">Click here, to start animation 1</span>
<span onClick="p.moveTo([-1.5,1.5],1000)" style="color:red">Click here, to start animation 2</span>
<jsxgraph width="500" height="500">
brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-2,2,2,-2], keepaspectratio:true, axis:true});
p = brd.create('point',[1.5,1.5],{face:'o', size:8, strokeColor:'red', fillOpacity:0.6, strokeOpacity: 0.6});
brd.create('segment',[[0,0],p],{dash:3});
</jsxgraph>
<span onClick="p.visit([-1.8,-0.5],1000,2)" style="color:blue">Click here, to start animation 1</span>
<span onClick="p.moveTo([-1.5,1.5],1000)" style="color:red">Click here, to start animation 2</span>