- From: Dailey, David P. <david.dailey@sru.edu>
- Date: Tue, 30 Mar 2010 08:46:58 -0400
- To: Robin Berjon <robin@berjon.com>, Alex Danilo <alex@abbra.com>
- CC: Patrick Dengler <patd@microsoft.com>, SVG IG List <public-svg-ig@w3.org>
Perhaps I am beginning to understand a bit better, what the discussions are about. In my book [1] I covered only the fraction of the stuff that I actually use, or can imagine a possible use for, stating parenthetically [2] that "The reader may be pleased to know that the author has taken some effort to present only the best stuff. You need only to worry about things that might be useful to a typical developer." [1] http://srufaculty.sru.edu/david.dailey/cs427/StateOfArt-Dailey.html#SMIL_animations [2] http://srufaculty.sru.edu/david.dailey/cs427/StateOfArt-Dailey.html#footnote24sym I think a reasonable subset of SMIL could be identified as "higher priority" with a fair amount of agreement between implementers and developers. a. animation of any attribute or set of attributes: <animate attributeName=AnyOnething begin="G.click" end="S.click" dur="4s" values="10; 110; 10" repeatCount="indefinite"/> <animate attributeName=AnyTwothing dur="4s" values="'red','blue','yellow'" repeatCount="3"/> b. keyTimes : <animate attributeName="cy" dur="10" values="5%;95%;5%" keyTimes="0; .1; 1" repeatCount="indefinite" /> c. conditional dependencies: <animate attributeName=AnyTwothing begin="other.end" dur="4s" values="10; 110; 10" repeatCount="indefinite"/> d. keySplines? (It's pretty complex stuff, and interesting, but how many people would miss it?) e. animation of multi-valued attributes <animate attributeName="d" dur="2s" repeatCount="indefinite" values= "M 100 200 C 100 150 250 150 100 100 C 0 50 100 400 100 200 ; M 100 200 C 100 150 250 150 100 100 C 0 50 100 100 100 200 ; M 100 200 C 100 150 250 150 100 100 C 0 50 100 400 100 200 " /> f. animate motion and mpath: This would be completely painful for a developer to implement in JavaScript -- and it would look unsmooth; please save them the effort! <ellipse cx="7" cy="-5" rx="20" ry="14" fill="#aaa" stroke="#666" stroke-width="2" opacity=".8"> <animateMotion dur="2s" rotate="auto" repeatCount="indefinite" > <mpath xlink:href="#curve"/> </animateMotion> </ellipse> g. animateTransform -- it oughta be available for HTML as well: <animateTransform attributeName="transform" type="rotate" dur="2.5" from="360,280,175" to="0,280,175" repeatCount="indefinite"/> h. animation of non-numeric values: <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"> <animate attributeName="mode" dur="5s" values="screen;multiply;lighten;darken;" repeatCount="indefinite"/> </feBlend> i) set <text x="35%" y="35%" font-size="30" fill="grey"> <animate attributeName="font-size" begin="click" values="8;50;8" dur="6" repeatCount="indefinite"/> <set attributeName="fill" to="black" begin="mouseover" /> <set attributeName="fill" to="grey" begin="mouseout" /> Click</text> j) simple arithmetic in timing: <animateMotion dur="2s" begin="One.begin+1" id="M" end="stop.click" fill="freeze" rotate="auto" repeatCount="indefinite" > k) SMIL to and from JavaScript: <ellipse fill="lightgreen" cx="40" cy="100" rx="22" ry="14" stroke="#804" stroke-width="5"> <animate attributeName="cx" dur="3s" onend="stuff(evt)" values="40;400;40"/> l) function start(id){ D.getElementById(id).beginElement() } Others? A simple illustration of something easy with SMIL and script but beyond SMIL and difficult with script alone, is seen at http://srufaculty.sru.edu/david.dailey/svg/bezierovals.svg It runs just fine in Opera and IE/ASV and has the path animation working just fine in webkit, though not the <mpath>, the "onend" or the "beginElement()". It might be another good candidate for an acid test, while we're on that subject. It has about a dozen lines of script and not much more markup. I would challenge my students, if anyone likes, to do this, without SMIL, using less than 100 lines of script, or taking less than 4 hours of programming. I'd be surprised if they (or I) could do it, though I will confess to never having tried. In truth there are some additions to SMIL I'd love to see, like the ability to insert random numbers (for attribute values) declaratively and without script, the ability to display current time without script, simple object-to-object messaging so that an object moving along a path could avoid another one or influence the color of the other, etc. Now, once video and audio events start arriving from HTML <video> and <audio> it would of course be fun to be able to use those events to trigger new animation in SVG, but perhaps that is for a later time. Perhaps having a SMIL 2013 standard and a SMIL 2020 standard would make sense? The first might be a subset of the existing stuff (maybe with declarative random attribute values thrown in by way of compromise) and the 2020 would be an improved superset of the subset? Just musing .... David (P.S. while we're at it, can we add a wave distortion thingy to SVG sort of like in http://srufaculty.sru.edu/david.dailey/javascript/ani/waves.html ? You need IE to run this as it uses stuff like <img src="adf9.jpg" id="p4" onclick="runn[3]=!runn[3]" style="position:absolute; top=55; left=0; clip:rect(75 300 150 150); filter:Wave(Add=false, Freq=1, LightStrength=0, Phase=1, Strength=0); " height=150 width=300> ) -----Original Message----- From: public-svg-ig-request@w3.org [mailto:public-svg-ig-request@w3.org] On Behalf Of Robin Berjon Sent: Tuesday, March 30, 2010 5:29 AM To: Alex Danilo Cc: Patrick Dengler; SVG IG List Subject: Re: acid test stuff On Mar 30, 2010, at 01:55 , Alex Danilo wrote: > Perhaps the reluctance to embrace SMIL at this stage is > in reponse to the lessons learnt by building if for IE5 and seeing > that work wasted. Perhaps that is an issue we could alleviate by simplifying the stuff? I'd be curious to know how much of the animation code in implementations is almost never exercised and is only there to pass the test suite. -- Robin Berjon - http://berjon.com/
Received on Tuesday, 30 March 2010 12:48:54 UTC