Re: Resetting SMIL animation state without restarting
"Jacob Beard [email protected] [svg-developers]" <[email protected]> Wed, 24 May 2017 15:37:10 -0400
| Newsgroups | gmane.text.xml.svg.devel |
|---|---|
| Message-ID | <[email protected]> |
--Apple-Mail=_B15A9E6B-3F66-425B-B649-2D9E1E6428E6 Content-Transfer-Encoding: quoted-printable Content-Type: text/plain; charset=utf-8 Thank you, Domenico. > On May 24, 2017, at 3:30 PM, 'Domenico Strazzullo' [email protected] [sv= g-developers] <[email protected]> wrote: >=20 >=20 > Hi Jake, >=20=20 > Two ways to achieve that. In path B: >=20=20 > <set attributeName=3D"d" to=3D"M0,33" begin=3D"beginButton.click"/> > <set attributeName=3D"marker-end" to=3D"none" begin=3D"beginButton.click"= /> > <set attributeName=3D"marker-end" to=3D"url(#a:0:marker)" begin=3D"A.endE= vent"/> >=20=20 > or display/visibility: >=20=20 > <set attributeName=3D"display" to=3D"none" begin=3D"beginButton.click"/> > <set attributeName=3D"display" to=3D"block" begin=3D"A.endEvent"/> >=20=20 > The second seems less elegant but does the job. >=20=20 > Domenico >=20=20 >=20=20 > From: Jacob Beard=C2=A0 <>[email protected] <mailto:[email protected].= ca> [svg-developers] > Sent: Wednesday, May 24, 2017 7:37 PM > To: <>[email protected] <mailto:svg-developers@yahoogroups.= com> > Subject: [svg-developers] Resetting SMIL animation state without restarti= ng >=20=20 >=20=20 >=20 > Hi, >=20=20 > Please consider the following scenario: >=20=20 > I have two SMIL animation elements, A and B. Element A has begin=3D=E2=80= =9CbeginButton.click=E2=80=9D and element B has begin=3D=E2=80=9CA.end=E2= =80=9D, so that when you click on the text =E2=80=9CClick to Begin Animatio= n=E2=80=9D, element A begins its animation, and when element A=E2=80=99s an= imation ends, then element B=E2=80=99s animation begins. The problem I am e= ncountering is what happens when the animation is restarted. When element A= is clicked a second time, element A is reset to its beginning state and it= s animation is started; while element B remains in its animation =E2=80=9Ce= nd=E2=80=9D state, until animation A ends, at which point animation B is re= set and restarted. The behavior I would like to achieve is to reset element= B back to it=E2=80=99s beginning state when element A is clicked. At the s= ame time, I would like to defer restarting element B=E2=80=99s animation un= til element A ends.=20 >=20=20 > I considered using JavaScript to intercept the click event on A, and then= call beginEvent() on element B to reset it, but this causes animation B to= begin at the same time as animation A. I reviewed the specification on res= etting animations here, but this only describes how to reset the element st= ate by restarting animation on the element. Is there a way to reset the ani= mation element state without restarting animation on the element? >=20=20 > You can see an example of this scenario here: http://live.echo-flow.com/t= est3.html <http://live.echo-flow.com/test3.html> >=20=20 > I would appreciate any guidance anyone can offer on this. Thank you for y= our help, >=20=20 > Jake >=20 >=20 --Apple-Mail=_B15A9E6B-3F66-425B-B649-2D9E1E6428E6 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable <head> <style type=3D"text/css"> <!-- /* start of attachment style */ .ygrp-photo-title{ clear: both; font-size: smaller; height: 15px; overflow: hidden; text-align: center; width: 75px; } div.ygrp-photo{ background-position: center; background-repeat: no-repeat; background-color: white; border: 1px solid black; height: 62px; width: 62px; } div.photo-title=20 a, div.photo-title a:active, div.photo-title a:hover, div.photo-title a:visited { text-decoration: none;=20 } div.attach-table div.attach-row { clear: both; } div.attach-table div.attach-row div { float: left; /* margin: 2px;*/ } p { clear: both; padding: 15px 0 3px 0; overflow: hidden; } div.ygrp-file { width: 30px; valign: middle; } div.attach-table div.attach-row div div a { text-decoration: none; } div.attach-table div.attach-row div div span { font-weight: normal; } div.ygrp-file-title { font-weight: bold; } /* end of attachment style */ --> </style> </head> <html><head><meta http-equiv=3D"Content-Type" content=3D"text/html charset= =3Dutf-8"></head><body style=3D"word-wrap: break-word; -webkit-nbsp-mode: s= pace; -webkit-line-break: after-white-space;" class=3D""> <!-- |**|begin egp html banner|**| --> <br><br> <!-- |**|end egp html banner|**| --> Thank you, Domenico.<div class=3D""><br class=3D""><div><blockquote type=3D= "cite" class=3D""><div class=3D"">On May 24, 2017, at 3:30 PM, 'Domenico St= razzullo' <a href=3D"mailto:[email protected]" class=3D"">[email protected]= om</a> [svg-developers] <<a href=3D"mailto:[email protected]= m" class=3D"">[email protected]</a>> wrote:</div><br class= =3D"Apple-interchange-newline"><div class=3D""><div id=3D"ygrp-mlmsg" style= =3D"font-size: 13px; font-family: Arial, helvetica, clean, sans-serif; font= -style: normal; font-variant-caps: normal; font-weight: normal; letter-spac= ing: normal; orphans: auto; text-align: start; text-indent: 0px; text-trans= form: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-t= ext-stroke-width: 0px; background-color: rgb(255, 255, 255); position: rela= tive;" class=3D""><div id=3D"ygrp-msg" style=3D"line-height: 1.22em; z-inde= x: 1;" class=3D""><div id=3D"ygrp-text" style=3D"line-height: 1.22em; font-= family: Georgia;" class=3D""><div style=3D"line-height: 1.22em; margin: 0px= 0px 1em;" class=3D""><br class=3D"webkit-block-placeholder"></div><div dir= =3D"ltr" style=3D"line-height: 1.22em;" class=3D""><div style=3D"line-heigh= t: 1.22em; font-size: 12pt; font-family: Calibri;" class=3D""><div style=3D= "line-height: 1.22em;" class=3D"">Hi Jake,</div><div style=3D"line-height: = 1.22em;" class=3D""> </div><div style=3D"line-height: 1.22em;" class= =3D"">Two ways to achieve that. In path B:</div><div style=3D"line-height: = 1.22em;" class=3D""> </div><div style=3D"line-height: 1.22em;" class= =3D""><set attributeName=3D"d" to=3D"M0,33" begin=3D"beginButton.click"/= ></div><div style=3D"line-height: 1.22em;" class=3D""><set attributeN= ame=3D"marker-end" to=3D"none" begin=3D"beginButton.click"/></div><div s= tyle=3D"line-height: 1.22em;" class=3D""><set attributeName=3D"marker-en= d" to=3D"url(#a:0:marker)" begin=3D"A.endEvent"/></div><div style=3D"lin= e-height: 1.22em;" class=3D""> </div><div style=3D"line-height: 1.22em= ;" class=3D"">or display/visibility:</div><div style=3D"line-height: 1.22em= ;" class=3D""> </div><div style=3D"line-height: 1.22em;" class=3D"">&l= t;set attributeName=3D"display" to=3D"none" begin=3D"beginButton.click"/>= ;</div><div style=3D"line-height: 1.22em;" class=3D""><set attributeName= =3D"display" to=3D"block" begin=3D"A.endEvent"/></div><div style=3D"line= -height: 1.22em;" class=3D""> </div><div style=3D"line-height: 1.22em;= " class=3D"">The second seems less elegant but does the job.</div><div styl= e=3D"line-height: 1.22em;" class=3D""> </div><div style=3D"line-height= : 1.22em;" class=3D"">Domenico</div><div style=3D"line-height: 1.22em; font= -size: small; text-decoration: none; font-family: Calibri; font-weight: nor= mal; font-style: normal;" class=3D""><div style=3D"line-height: normal; fon= t-style: normal; font-variant-caps: normal; font-weight: normal; font-size:= 10pt; font-family: tahoma;" class=3D""><div style=3D"line-height: 1.22em;"= class=3D""><font size=3D"3" face=3D"Calibri" style=3D"line-height: 1.22em;= " class=3D""></font> </div><div style=3D"line-height: 1.22em;" class= =3D""><font size=3D"3" face=3D"Calibri" style=3D"line-height: 1.22em;" clas= s=3D""></font> </div><div style=3D"line-height: 1.22em; background-col= or: rgb(245, 245, 245); background-position: initial initial; background-re= peat: initial initial;" class=3D""><div style=3D"line-height: 1.22em;" clas= s=3D""><b style=3D"line-height: 1.22em;" class=3D"">From:</b><span class=3D= "Apple-converted-space"> </span><a title=3D"svg-developers@yahoogroups= .com" style=3D"line-height: 1.22em;" class=3D"">Jacob Beard<span class=3D"A= pple-converted-space"> </span></a><a href=3D"mailto:[email protected].= ca" style=3D"line-height: 1.22em;" class=3D"">[email protected]</a><span= class=3D"Apple-converted-space"> </span>[svg-developers]</div><div st= yle=3D"line-height: 1.22em;" class=3D""><b style=3D"line-height: 1.22em;" c= lass=3D"">Sent:</b><span class=3D"Apple-converted-space"> </span>Wedne= sday, May 24, 2017 7:37 PM</div><div style=3D"line-height: 1.22em;" class= =3D""><b style=3D"line-height: 1.22em;" class=3D"">To:</b><span class=3D"Ap= ple-converted-space"> </span><a title=3D"[email protected]= m" style=3D"line-height: 1.22em;" class=3D""></a><a href=3D"mailto:svg-deve= [email protected]" style=3D"line-height: 1.22em;" class=3D"">svg-devel= [email protected]</a></div><div style=3D"line-height: 1.22em;" class=3D= ""><b style=3D"line-height: 1.22em;" class=3D"">Subject:</b><span class=3D"= Apple-converted-space"> </span>[svg-developers] Resetting SMIL animati= on state without restarting</div></div></div><div style=3D"line-height: 1.2= 2em;" class=3D""> </div></div><div style=3D"line-height: 1.22em; font-= size: small; text-decoration: none; font-family: Calibri; font-weight: norm= al; font-style: normal;" class=3D""><span style=3D"line-height: 1.22em;" cl= ass=3D""> </span><div id=3D"ygrp-text" style=3D"line-height: 1.22em; f= ont-family: Georgia;" class=3D""><div style=3D"line-height: 1.22em; margin:= 0px 0px 1em;" class=3D""><br class=3D"webkit-block-placeholder"></div><div= style=3D"line-height: 1.22em;" class=3D""><div style=3D"line-height: 1.22e= m;" class=3D"">Hi,</div><div style=3D"line-height: 1.22em;" class=3D"">&nbs= p;</div><div style=3D"line-height: 1.22em;" class=3D"">Please consider the = following scenario:</div><div style=3D"line-height: 1.22em;" class=3D"">&nb= sp;</div><div style=3D"line-height: 1.22em;" class=3D"">I have two SMIL ani= mation elements, A and B. Element A has begin=3D=E2=80=9CbeginButton.click= =E2=80=9D and element B has begin=3D=E2=80=9CA.end=E2=80=9D, so that when y= ou click on the text =E2=80=9CClick to Begin Animation=E2=80=9D, element A = begins its animation, and when element A=E2=80=99s animation ends, then ele= ment B=E2=80=99s animation begins. The problem I am encountering is what ha= ppens when the animation is restarted. When element A is clicked a second t= ime, element A is reset to its beginning state and its animation is started= ; while element B remains in its animation =E2=80=9Cend=E2=80=9D state, unt= il animation A ends, at which point animation B is reset and restarted. The= behavior I would like to achieve is to reset element B back to it=E2=80=99= s beginning state when element A is clicked. At the same time, I would like= to defer restarting element B=E2=80=99s animation until element A ends.<sp= an class=3D"Apple-converted-space"> </span></div><div style=3D"line-he= ight: 1.22em;" class=3D""> </div><div style=3D"line-height: 1.22em;" c= lass=3D"">I considered using JavaScript to intercept the click event on A, = and then call beginEvent() on element B to reset it, but this causes animat= ion B to begin at the same time as animation A. I reviewed the specificatio= n on resetting animations<span class=3D"Apple-converted-space"> </span= ><span style=3D"line-height: 1.22em; text-decoration: underline; color: rgb= (0, 105, 217);" class=3D"">here</span>, but this only describes how to rese= t the element state by restarting animation on the element. Is there a way = to reset the animation element state without restarting animation on the el= ement?</div><div style=3D"line-height: 1.22em;" class=3D""> </div><div= style=3D"line-height: 1.22em;" class=3D"">You can see an example of this s= cenario here:<span class=3D"Apple-converted-space"> </span><a href=3D"= http://live.echo-flow.com/test3.html" style=3D"line-height: 1.22em;" class= =3D"">http://live.echo-flow.com/test3.html</a></div><div style=3D"line-heig= ht: 1.22em;" class=3D""> </div><div style=3D"line-height: 1.22em;" cla= ss=3D"">I would appreciate any guidance anyone can offer on this. Thank you= for your help,</div><div style=3D"line-height: 1.22em;" class=3D""> <= /div><div style=3D"line-height: 1.22em;" class=3D"">Jake</div></div></div><= /div></div></div><div style=3D"line-height: 1.22em; margin: 0px 0px 1em;" c= lass=3D""><br class=3D"webkit-block-placeholder"></div></div><div style=3D"= line-height: 1.22em; color: rgb(255, 255, 255); height: 0px;" class=3D""></= div></div></blockquote></div><br class=3D""></div> <!-- |**|begin egp html banner|**| --> <br> <br> <!-- |**|end egp html banner|**| --> <div width=3D"1" style=3D"color: white; clear: both;"/>__._,_.___</div> =20=20=20=20=20=20 =20=20 =20=20=20=20 <div id=3D"fromDMARC" style=3D"clear:both; margin-top: 10px;"> <hr style=3D"height:2px ; border-width:0; color:#E3E3E3; backgroun= d-color:#E3E3E3;"> Posted by: Jacob Beard <[email protected]> <hr st= yle=3D"height:2px ; border-width:0; color:#E3E3E3; background-color:#E3E3E3= ;"> </div> <!-- Start Recommendations --> <!-- End Recommendations --> <!-- |**|begin egp html banner|**| --> <br><br> <tt> -----<BR> To unsubscribe send a message to: [email protected]= m<BR> -or-<BR> visit <a href=3D"http://groups.yahoo.com/group/svg-developers">http://group= s.yahoo.com/group/svg-developers</a> and click "edit my membership&quo= t;<BR> ----</tt> <br><br> <!-- |**|end egp html banner|**| --> <!-- |**|begin egp html banner|**| --> <img src=3D"http://geo.yahoo.com/serv?s=3D97476590/grpId=3D1298421/grpspI= d=3D1706030390/msgId=3D66569/stime=3D1495654632" width=3D"1" height=3D"1"> = <br> <!-- |**|end egp html banner|**| --> =20=20=20=20 <!-- |**|begin egp html banner|**| --> <br> =20=20=20 =20=20=20=20=20 =20 <!-- |**|begin egp html banner|**| --> <div id=3D"ygrp-vital" style=3D"background-color: #f2f2f2; font-fam= ily: Verdana; font-size: 10px; margin-bottom: 10px; padding: 10px;"> <span id=3D"vithd" style=3D"font-weight: bold; color: #333; text-tr= ansform: uppercase; "><a href=3D"https://groups.yahoo.com/neo/groups/svg-de= velopers/info;_ylc=3DX3oDMTJlZWFmZWhsBF9TAzk3MzU5NzE0BGdycElkAzEyOTg0MjEEZ3= Jwc3BJZAMxNzA2MDMwMzkwBHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTQ5NTY1NDYzMg--" sty= le=3D"text-decoration: none;">Visit Your Group</a></span> <ul style=3D"list-style-type: none; margin: 0; padding: 0; display: in= line;"> <li style=3D"border-right: 1px solid #000; font-weight: 700; di= splay: inline; padding: 0 5px; margin-left: 0;"> <span class=3D"cat"><a href=3D"https://groups.yahoo.com/neo/groups/sv= g-developers/members/all;_ylc=3DX3oDMTJmcTRjczVyBF9TAzk3MzU5NzE0BGdycElkAzE= yOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwN2dGwEc2xrA3ZtYnJzBHN0aW1lAzE0OTU2NT= Q2MzI-" style=3D"text-decoration: none;">New Members</a></span> <span class=3D"ct" style=3D"color: #ff7900;">1</span> </li> </ul> </div> <div id=3D"ft" style=3D"font-family: Arial; font-size: 11px; margin-top: 5p= x; padding: 0 2px 0 0; clear: both;"> <a href=3D"https://groups.yahoo.com/neo;_ylc=3DX3oDMTJkbmF2aWdkBF9TAzk3ND= c2NTkwBGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwNmdHIEc2xrA2dmcARzd= GltZQMxNDk1NjU0NjMy" style=3D"float: left;"><img src=3D"http://l.yimg.com/r= u/static/images/yg/img/email/new_logo/logo-groups-137x15.png" height=3D"15"= width=3D"137" alt=3D"Yahoo! Groups" style=3D"border: 0;"/></a> <div style=3D"color: #747575; float: right;"> • <a href=3D"https://i= nfo.yahoo.com/privacy/us/yahoo/groups/details.html" style=3D"text-decoratio= n: none;">Privacy</a> • <a href=3D"mailto:svg-developers-unsubscribe@y= ahoogroups.com?subject=3DUnsubscribe" style=3D"text-decoration: none;">Unsu= bscribe</a> • <a href=3D"https://info.yahoo.com/legal/us/yahoo/utos/te= rms/" style=3D"text-decoration: none;">Terms of Use</a> </div> </div> <!-- |**|end egp html banner|**| --> </div> <!-- ygrp-msg --> =20=20=20 <br> <!-- |**|end egp html banner|**| --> <div style=3D"color: white; clear: both;"/>__,_._,___</div> </body></html> --Apple-Mail=_B15A9E6B-3F66-425B-B649-2D9E1E6428E6--