Difference between revisions of "Animations"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
| (7 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| − | <span onClick="p.visit([-1. | + | <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> | <span onClick="p.moveTo([-1.5,1.5],1000)" style="color:red">Click here, to start animation 2</span> | ||
</html> | </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. | + | 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=== | ===The JavaScript code=== | ||
<source lang="xml"> | <source lang="xml"> | ||
| − | <span onClick="p.visit([-1. | + | <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> | <span onClick="p.moveTo([-1.5,1.5],1000)" style="color:red">Click here, to start animation 2</span> | ||
<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. | + | 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> | ||
| + | </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> | </source> | ||
[[Category:Examples]] | [[Category:Examples]] | ||
Latest revision as of 13: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>
