Saturday, March 24, 2012

Condition Animation Slow

Here is the code. I also had OnMouseOver event that had a condition ofdocument.getElementById('SreryBio').style.display!='block'" then change pic. This was also slow I had to keep the ouse over target for a while til the pic changed.
 
Any ideas how to make this faster?
 
 
1<Condition ConditionScript="document.getElementById('SreryBio').style.display=='block'">2 <Parallel AnimationTarget="SreryBio" Duration=".5" Fps="30">3 <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />4 <FadeOut />5 <ScriptAction Script="document.getElementById('ctl00_Side_SreryLink').src='Images/BSCI_-team_srery.jpg';" />6 </Parallel>78 <Condition ConditionScript="document.getElementById('RoderickBio').style.display=='block'">9 <Parallel AnimationTarget="RoderickBio" Duration=".5" Fps="30">10 <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />11 <FadeOut />12 <ScriptAction Script="document.getElementById('ctl00_Side_RoderickLink').src='Images/BSCI_-team_roderick.jpg';" />13 </Parallel>1415 <Condition ConditionScript="document.getElementById('HarrisonBio').style.display=='block'">16 <Parallel AnimationTarget="HarrisonBio" Duration=".5" Fps="30">17 <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />18 <FadeOut />19 <ScriptAction Script="document.getElementById('ctl00_Side_HarrisonLink').src='Images/BSCI_-team_harrison.jpg';" />20 </Parallel>21 <Condition ConditionScript="document.getElementById('YeakelBio').style.display=='block'">22 <Parallel AnimationTarget="YeakelBio" Duration=".5" Fps="30">23 <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />24 <FadeOut />25 <ScriptAction Script="document.getElementById('ctl00_Side_YeakelLink').src='Images/BSCI_-team_yeakel.jpg';" />26 </Parallel>27 <Condition ConditionScript="document.getElementById('MaldoBio').style.display=='block'">28 <Parallel AnimationTarget="MaldoBio" Duration=".5" Fps="30">29 <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />30 <FadeOut />31 <ScriptAction Script="document.getElementById('ctl00_Side_MaldoLink').src='Images/BSCI_-team_maldonado.jpg';" />32 </Parallel>33 <Condition ConditionScript="document.getElementById('YatoomaBio').style.display=='block'">34 <Parallel AnimationTarget="YatoomaBio" Duration=".5" Fps="30">35 <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />36 <FadeOut />37 <ScriptAction Script="document.getElementById('ctl00_Side_YatoomaLink').src='Images/BSCI_-team_yatooma.jpg';" />38 </Parallel>39 <Condition ConditionScript="document.getElementById('RayBio').style.display=='block'">40 <Parallel AnimationTarget="RayBio" Duration=".5" Fps="30">41 <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />42 <FadeOut />43 <ScriptAction Script="document.getElementById('ctl00_Side_RayLink').src='Images/BSCI_-team_ray.jpg';" />44 </Parallel>4546 </Condition>47 </Condition>48 </Condition>49 </Condition>50 </Condition>51 </Condition>52 </Condition>
Hi boricua,

The animation framework wasn't designed to include that much logic. Keep in mind that all that script is dynamically evaled every time the mouse hovers over your element (which is terribly inefficient as it doesn't change, etc.). You should really pull all of that out into regular JavaScript that creates/plays an animation when one of those conditions is satisfied. It looks like the animation is the same for all of them too, so you have the potential to make this really fast/smooth.

Thanks,
Ted

No comments:

Post a Comment