Re: Resetting SMIL animation state without restarting
"'Domenico Strazzullo' [email protected] [svg-developers]" <[email protected]> Wed, 24 May 2017 21:30:00 +0200
| Newsgroups | gmane.text.xml.svg.devel |
|---|---|
| Message-ID | <E036AE0183B24EEA88BC1B325ACB7AB4@RAPAXTO> |
------=_NextPart_000_0297_01D2D4D4.E6521520 Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable Hi Jake, Two ways to achieve that. In path B: <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.endEve= nt"/> or display/visibility: <set attributeName=3D"display" to=3D"none" begin=3D"beginButton.click"/> <set attributeName=3D"display" to=3D"block" begin=3D"A.endEvent"/> The second seems less elegant but does the job. Domenico From: Jacob Beard [email protected] [svg-developers]=20 Sent: Wednesday, May 24, 2017 7:37 PM To: [email protected]=20 Subject: [svg-developers] Resetting SMIL animation state without restarting =20=20 Hi, Please consider the following scenario: 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 I considered using JavaScript to intercept the click event on A, and then c= all beginEvent() on element B to reset it, but this causes animation B to b= egin at the same time as animation A. I reviewed the specification on reset= ting animations here, but this only describes how to reset the element stat= e by restarting animation on the element. Is there a way to reset the anima= tion element state without restarting animation on the element? You can see an example of this scenario here: http://live.echo-flow.com/tes= t3.html I would appreciate any guidance anyone can offer on this. Thank you for you= r help, Jake ------=_NextPart_000_0297_01D2D4D4.E6521520 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></HEAD> <BODY style=3D"BACKGROUND-COLOR: #fff" dir=3Dltr> <!-- |**|begin egp html banner|**| --> <br><br> <!-- |**|end egp html banner|**| --> <DIV dir=3Dltr> <DIV style=3D"FONT-SIZE: 12pt; FONT-FAMILY: 'Calibri'; COLOR: #000000"> <DIV>Hi Jake,</DIV> <DIV> </DIV> <DIV>Two ways to achieve that. In path B:</DIV> <DIV> </DIV> <DIV><set attributeName=3D"d" to=3D"M0,33" begin=3D"beginButton.click"/&= gt;</DIV> <DIV><set attributeName=3D"marker-end" to=3D"none"=20 begin=3D"beginButton.click"/></DIV> <DIV><set attributeName=3D"marker-end" to=3D"url(#a:0:marker)"=20 begin=3D"A.endEvent"/></DIV> <DIV> </DIV> <DIV>or display/visibility:</DIV> <DIV> </DIV> <DIV><set attributeName=3D"display" to=3D"none"=20 begin=3D"beginButton.click"/></DIV> <DIV><set attributeName=3D"display" to=3D"block" begin=3D"A.endEvent"/&g= t;</DIV> <DIV> </DIV> <DIV>The second seems less elegant but does the job.</DIV> <DIV> </DIV> <DIV>Domenico</DIV> <DIV=20 style=3D'FONT-SIZE: small; TEXT-DECORATION: none; FONT-FAMILY: "Calibri"; F= ONT-WEIGHT: normal; COLOR: #000000; FONT-STYLE: normal; DISPLAY: inline'> <DIV style=3D"FONT: 10pt tahoma"> <DIV><FONT size=3D3 face=3DCalibri></FONT> </DIV> <DIV><FONT size=3D3 face=3DCalibri></FONT> </DIV> <DIV style=3D"BACKGROUND: #f5f5f5"> <DIV style=3D"font-color: black"><B>From:</B> <A=20 [email protected]>Jacob Beard [email protected]=20 [svg-developers]</A> </DIV> <DIV><B>Sent:</B> Wednesday, May 24, 2017 7:37 PM</DIV> <DIV><B>To:</B> <A=20 [email protected]>[email protected]</A> <= /DIV> <DIV><B>Subject:</B> [svg-developers] Resetting SMIL animation state withou= t=20 restarting</DIV></DIV></DIV> <DIV> </DIV></DIV> <DIV=20 style=3D'FONT-SIZE: small; TEXT-DECORATION: none; FONT-FAMILY: "Calibri"; F= ONT-WEIGHT: normal; COLOR: #000000; FONT-STYLE: normal; DISPLAY: inline'><S= PAN=20 style=3D"DISPLAY: none"> </SPAN>=20 <DIV id=3Dygrp-text> <P> <DIV> <DIV>Hi,</DIV> <DIV> </DIV> <DIV>Please consider the following scenario:</DIV> <DIV> </DIV> <DIV>I have two SMIL animation elements, A and B. Element A has=20 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=20 click on the text =E2=80=9CClick to Begin Animation=E2=80=9D, element A beg= ins its animation,=20 and when element A=E2=80=99s animation ends, then element B=E2=80=99s anima= tion begins. The=20 problem I am encountering is what happens when the animation is restarted. = When=20 element A is clicked a second time, element A is reset to its beginning sta= te=20 and its animation is started; while element B remains in its animation =E2= =80=9Cend=E2=80=9D=20 state, until animation A ends, at which point animation B is reset and=20 restarted. The behavior I would like to achieve is to reset element B back = to=20 it=E2=80=99s beginning state when element A is clicked. At the same time, I= would like=20 to defer restarting element B=E2=80=99s animation until element A ends. </D= IV> <DIV> </DIV> <DIV>I considered using JavaScript to intercept the click event on A, and t= hen=20 call beginEvent() on element B to reset it, but this causes animation B to = begin=20 at the same time as animation A. I reviewed the specification on resetting= =20 animations <SPAN=20 style=3D"TEXT-DECORATION: underline; COLOR: rgb(0,105,217)">here</SPAN>, bu= t this=20 only describes how to reset the element state by restarting animation on th= e=20 element. Is there a way to reset the animation element state without restar= ting=20 animation on the element?</DIV> <DIV> </DIV> <DIV>You can see an example of this scenario here: <A=20 href=3D"http://live.echo-flow.com/test3.html">http://live.echo-flow.com/tes= t3.html</A></DIV> <DIV> </DIV> <DIV>I would appreciate any guidance anyone can offer on this. Thank you fo= r=20 your help,</DIV> <DIV> </DIV> <DIV>Jake</DIV></DIV></DIV><!-- end group email --></DIV></DIV></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: "Domenico Strazzullo" <[email protected]&= gt; <hr style=3D"height:2px ; border-width:0; color:#E3E3E3; backgr= ound-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=3D66568/stime=3D1495654238" 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=3DX3oDMTJlaWJlNmpxBF9TAzk3MzU5NzE0BGdycElkAzEyOTg0MjEEZ3= Jwc3BJZAMxNzA2MDMwMzkwBHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTQ5NTY1NDIzOA--" 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=3DX3oDMTJmcGdtMWs3BF9TAzk3MzU5NzE0BGdycElkAzE= yOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwN2dGwEc2xrA3ZtYnJzBHN0aW1lAzE0OTU2NT= QyMzg-" 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=3DX3oDMTJkdGxhMXVvBF9TAzk3ND= c2NTkwBGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwNmdHIEc2xrA2dmcARzd= GltZQMxNDk1NjU0MjM4" 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> ------=_NextPart_000_0297_01D2D4D4.E6521520--