--- In [email protected], "Francis Hemsher" <fhemsher@...> wrote: > > > > David Daley Wrote: > > Better yet, rather than spend the energy doing these (the last one in > > particular will be fun), why not devote similar energies into enhancing > > either FakeSMIL or SMILScript (or helping to convince our friends at > > Microsoft to do so), so that authors who don't want to spend the 7x > > investment of time writing JavaScript instead of SMIL won't have to. > > > > I've never been fan of animation because most SMIL animations seemed > juvenile. However there is a need to present a richer method of SVG > animation. Since yesterday, after I got into a tissy fit with dark3251 on his > animation, I have wandered the web looking to evaluate animation methods that > could be easily applied to SVG. So far, I am encouraged in my journey. > > Regards, > Francis >
I found a site that has some nice JavaScript animation. I adapted it so you can see how it applies to SVG. Below is an HTML5 file with inline SVG: <!DOCTYPE html> <html> <head> <title></title> </head> <body> <center> <svg id="mySVG" width="300" height="300" > <rect x="0" y="0" width="100%" height="100%" rx="20" ry="20" fill="yellow" /> <circle id="myCircle" cx="150" cy="150" r="20" fill="red"/> </svg> <br /> <button onClick=move(myCircle,deltaLinear,1000)>Linear</button> <button onClick=move(myCircle,deltaQuad2,1000)>Quad 2nd degree</button> <button onClick=move(myCircle,deltaQuad5,1000)>Quad 5th degree</button> <button onClick=move(myCircle,deltaCirc,1000)>Circle Chord</button> <button onClick=move(myCircle,deltaBack,1000)>bounce back</button> <button onClick=dropBall()>drop</button> <button onClick=rollBall()>roll</button> <button onClick=highlight(myCircle,deltaLinear)>highlight</button> <br /> The animation javascript was created by: Ilya Kantor<br /> at:<a href="http://javascript.info/tutorial/animation";>http://javascript.info/tutorial/animation</a><br /> Adapted to SVG by Francis Hemsher </center> <script> //---animate constructor--- function animate(opts) { var start = new Date var id = setInterval(function() { var timePassed = new Date - start var progress = timePassed / opts.duration if (progress > 1) progress = 1 var delta = opts.delta(progress) opts.step(delta) if (progress == 1) { clearInterval(id) } }, opts.delay || 10) } //---Means that the animation progress is uniform over time. var deltaLinear = function linear(progress) {return progress} //---Means that the animation progress is quadritic over time. var deltaQuad2 = function quad(progress) {return Math.pow(progress, 2)} var deltaQuad5 = function quad(progress) {return Math.pow(progress, 5)} //---Means that the animation progress is circular(1 quadrant) over time. var deltaCirc =function circ(progress){return 1 - Math.sin(Math.acos(progress))} var deltaBack=function back(progress, x){x=1.5;return Math.pow(progress, 2) * ((x + 1) * progress - x)} function move(elem,delta,duration) { myCircle.cy.baseVal.value =150 myCircle.cx.baseVal.value =150 var to = 130 animate({ delay: 10, duration: duration || 1000, // 1 sec by default delta: delta, step: function(delta) { elem.r.baseVal.value =20+ to*delta } }) } function bounce(progress) { for(var a = 0, b = 1, result; 1; a += b, b /= 2) { if (progress >= (7 - 4 * a) / 11) { return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2); } } } function makeEaseOut(delta) { return function(progress) { return 1 - delta(1 - progress) } } //var bounceEaseOut = makeEaseOut(bounce) function dropBall() { //---start values reset myCircle.r.baseVal.value =20 myCircle.cy.baseVal.value =150 myCircle.cx.baseVal.value =150 var from =150 var to = 130 animate({ delay: 20, duration: 1000, delta: makeEaseOut(bounce), step: function(delta) { myCircle.cy.baseVal.value = to*delta +from } }) } function rollBall() { //---start values reset myCircle.r.baseVal.value =20 myCircle.cy.baseVal.value =150 myCircle.cx.baseVal.value =150 var from =150 var to = 130 animate({ delay: 20, duration: 1000, delta: makeEaseOut(bounce), step: function(delta) { myCircle.cx.baseVal.value = to*delta +from } }) } function highlight(elem) { var linear=function linear(progress) {return progress} //---red to blue--- var from = [255,0,0], to = [0,0,255] animate({ delay: 10, duration: 1000, delta: linear, step: function(delta) { elem.setAttribute("fill",'rgb(' + Math.max(Math.min(parseInt((delta * (to[0]-from[0])) + from[0], 10), 255), 0) + ',' + Math.max(Math.min(parseInt((delta * (to[1]-from[1])) + from[1], 10), 255), 0) + ',' + Math.max(Math.min(parseInt((delta * (to[2]-from[2])) + from[2], 10), 255), 0) + ')') } }) } </script> </body> </html> ------------------------------------ ----- 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/
