Resetting SMIL animation state without restarting
"Jacob Beard [email protected] [svg-developers]" <[email protected]> Wed, 24 May 2017 13:37:31 -0400
| Newsgroups | gmane.text.xml.svg.devel |
|---|---|
| Message-ID | <[email protected]> |
--Apple-Mail=_6227FDC1-E40A-477B-82DB-C0A6D94F174B
Content-Transfer-Encoding: quoted-printable
Content-Type: text/plain;
charset=utf-8
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 <http://live.echo-flow.com/test3.html>
I would appreciate any guidance anyone can offer on this. Thank you for you=
r help,
Jake
--Apple-Mail=_6227FDC1-E40A-477B-82DB-C0A6D94F174B
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|**| -->
<div dir=3D"auto" style=3D"word-wrap: break-word; -webkit-nbsp-mode: space;=
-webkit-line-break: after-white-space;" class=3D""><div class=3D"">Hi,</di=
v><div class=3D""><br class=3D""></div><div class=3D"">Please consider the =
following scenario:</div><div class=3D""><br class=3D""></div><div class=3D=
"">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 Anima=
tion=E2=80=9D, element A begins its animation, and when element A=E2=80=99s=
animation ends, then element B=E2=80=99s animation begins. The problem I a=
m encountering is what happens when the animation is restarted. When elemen=
t A is clicked a second time, 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, until animation A ends, at which point animation B i=
s reset and restarted. The behavior I would like to achieve is to reset ele=
ment B back to it=E2=80=99s beginning state when element A is clicked. At t=
he same time, I would like to defer restarting element B=E2=80=99s animatio=
n until element A ends. </div><div class=3D""><br class=3D""></div><di=
v class=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 ani=
mation B to begin at the same time as animation A. I reviewed the specifica=
tion on resetting animations <span style=3D"color: rgb(0, 105, 217); t=
ext-decoration: underline;" class=3D"">here</span>, but this only describes=
how to reset the element state by restarting animation on the element. Is =
there a way to reset the animation element state without restarting animati=
on on the element?</div><div class=3D""><br class=3D""></div><div class=3D"=
">You can see an example of this scenario here: <a href=3D"http://live=
.echo-flow.com/test3.html" class=3D"">http://live.echo-flow.com/test3.html<=
/a></div><div class=3D""><br class=3D""></div><div class=3D"">I would appre=
ciate any guidance anyone can offer on this. Thank you for your help,</div>=
<div class=3D""><br class=3D""></div><div class=3D"">Jake</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: 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=3D66567/stime=3D1495647454" 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=3DX3oDMTJlOTgxZ2sxBF9TAzk3MzU5NzE0BGdycElkAzEyOTg0MjEEZ3=
Jwc3BJZAMxNzA2MDMwMzkwBHNlYwN2dGwEc2xrA3ZnaHAEc3RpbWUDMTQ5NTY0NzQ1NA--" 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=3DX3oDMTJmbDc3dmFtBF9TAzk3MzU5NzE0BGdycElkAzE=
yOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwN2dGwEc2xrA3ZtYnJzBHN0aW1lAzE0OTU2ND=
c0NTQ-" 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=3DX3oDMTJkcmxhdDJiBF9TAzk3ND=
c2NTkwBGdycElkAzEyOTg0MjEEZ3Jwc3BJZAMxNzA2MDMwMzkwBHNlYwNmdHIEc2xrA2dmcARzd=
GltZQMxNDk1NjQ3NDU0" 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=_6227FDC1-E40A-477B-82DB-C0A6D94F174B--