dark3251@wrote: > > > > > OK, show me a SMIL animation. I'll present comparable JavaScript that > will do the same, but better. > > > > > Deal. I had some key values laying around from a project I did a while > ago. I will be happy to look at how efficiently (and quickly) you can > make this animation using JavaScript alone. Hell, maybe I will learn > something.
I can see that your keys.svg was basically a test of keySplines and keyTimes and not intended for primetime;) In any case, it did not have an intuitive response: it finished larger that its original size after ballooning out and going thru a few in/out iterations and 'popped' to its final size. However, it gave me an idea that I could expand the circle, then release its r(radius) so it would find its original size as if the circumfrence were attached to a spring. The animation uses baseVal for the radius, rather than scaling. The javaScript to create a spring-like response was created by Matthaeus Krenn, see: http://thingsfromthefuture.com/mspring/ I placed the animation in an HTML5 file with inline SVG, and the needed script. A remote .js file has the spring constructors. <!DOCTYPE HTML> <html> <body> <center> <svg xmlns="http://www.w3.org/2000/svg"; width="300" height="300" > <rect x="0" y="0" fill="blue" width="100%" height="100%" /> <circle onmouseover="startAnim()" id="myCircle" cx="150" cy="150" stroke-width="5" stroke="red" fill="lime" r="20"/> </svg> <br />Move cursor over circle </center> <script> var FPS=50 //---frames per second--- var IntervalTimer var diff=.1 var Finished=true //---onmouseover--- function startAnim() { if(Finished==true) { diff=.1 IntervalTimer= setInterval("pullSpring()",1000/FPS) Finished=false } } function pullSpring() { if(diff<60) { diff++ myCircle.r.baseVal.value=20+diff } else //---release spring--- { clearInterval(IntervalTimer) //--release point, start spring function--- var mySpring = new mSpring({ onSpringStart: function() { myCircle.r.baseVal.value=80 //---release value--- }, onSpringChange: function(massPos, springData) { myCircle.r.baseVal.value = massPos }, onSpringRest: function() { myCircle.r.baseVal.value=20 Finished=true } }); mySpring.setSpringParameters(5,30, 0.3); var newAnchorPos = 20 //--original r value mySpring.start(undefined, undefined, undefined, newAnchorPos); } } </script> <script src=MatthaeusKrennSpring.js /></script> </body> </html> MatthaeusKrennSpring.js /* /////////////////////////////////////////////////////////////////////////////////////////////////// Author Matthaeus Krenn http://thingsfromthefuture.com May 2011 /////////////////////////////////////////////////////////////////////////////////////////////////// */ function mSpring(options) { var spring = this; this.options = options; //triggers one calculation cycle to change the spring. this.stepTrigger = false; //initiates the spring Class spring.init(); //assings the function that is called each time the spring starts from rest state. spring.onSpringStart = options.onSpringStart; //assings the function that is called each time the spring changes. spring.onSpringChange = options.onSpringChange; //assigns the funtion that is called when the spring goes to a rest state. spring.onSpringRest = options.onSpringRest; } mSpring.prototype.init = function () { var spring = this; spring.anchor = 0; spring.interval = 0; spring.end = 0; spring.acceleration = 0; spring.distance = 0; spring.speed = 0; spring.springForce = 0; spring.dampingForce = 0; spring.totalForce = 0; spring.anchorPos = 0; spring.massPos = 0; //sets the constant spring parameters to a useful standard, 120, 10, 3 spring.setSpringParameters(120, 10, 3); } //this gives the spring an impulse //impulses can also be given while spring is in motion in order to alter its state mSpring.prototype.start = function (acceleration, massPos, speed, anchorPos) { var spring = this; spring.onSpringStart(); spring.massPos = (typeof massPos != 'undefined') ? massPos : spring.massPos; spring.speed = (typeof speed != 'undefined') ? speed : spring.speed; spring.speed += acceleration*10 || 0; spring.anchorPos = (typeof anchorPos != 'undefined') ? anchorPos : spring.anchorPos; spring.step(); } //one step is one recalculation of all spring variables when in motion mSpring.prototype.step = function () { var spring = this; spring.distance = spring.massPos - spring.anchorPos; spring.dampingForce = -spring.friction * spring.speed; spring.springForce = -spring.stiffness * spring.distance; spring.totalForce = spring.springForce + spring.dampingForce; spring.acceleration = spring.totalForce / spring.mass; spring.speed += spring.acceleration; spring.massPos += spring.speed/100; if (Math.round(spring.massPos) == spring.anchorPos && Math.abs(spring.speed) < 0.2) { spring.removeStepTrigger(); } else { spring.onSpringChange(Math.round(spring.massPos), { distance: spring.distance, acceleration: spring.acceleration, speed: spring.speed }); spring.setStepTrigger(); } } //use this to change the spring parameters mSpring.prototype.setSpringParameters = function (stiffness, mass, friction) { var spring = this; spring.stiffness = stiffness; spring.mass = mass; spring.friction = friction; } //use this to get the spring parameters mSpring.prototype.getSpringParameters = function () { var spring = this; return { stiffness: spring.stiffness, mass: spring.mass, friction: spring.friction }; } //this sets the timer for the next step mSpring.prototype.setStepTrigger = function () { var spring = this; clearTimeout(spring.stepTrigger); spring.stepTrigger = setTimeout(function () {spring.step()}, spring.interval); } //this stops the spring from performing the next step mSpring.prototype.removeStepTrigger = function () { var spring = this; spring.stepTrigger = false; //removeTimeout(spring.step(), 10); spring.onSpringRest(); } //this assigns a new function to be called when the spring starts to move mSpring.prototype.setOnSpringStart = function (onSpringStart) { var spring = this; spring.onSpringStart = onSpringStart; } //this assigns a new function to be called at each spring calculation cycle mSpring.prototype.setOnSpringChange = function (onSpringChange) { var spring = this; spring.onSpringChange = onSpringChange; } //this assigns a new function to be called when the spring stops moving mSpring.prototype.setOnSpringRest = function (onSpringRest) { var spring = this; spring.onSpringChange = onSpringRest; } ------------------------------------ ----- To unsubscribe send a message to: [email protected] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: [email protected] [email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
