Databases
StackOverflow2013
Postsdbo
POAcceleration/Deceleration Ratio equivalent with KeyFrame
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAcceleration/Deceleration Ratio equivalent with KeyFrame
    text
    copied!<p>Is there a formula to translate <a href="http://msdn.microsoft.com/en-us/library/system.windows.media.animation.timeline.accelerationratio.aspx" rel="nofollow">AccelerationRatio</a> or <a href="http://msdn.microsoft.com/en-us/library/system.windows.media.animation.timeline.decelerationratio.aspx" rel="nofollow">DecelerationRatio</a> to Bezier control points for use in a <code>KeySpline</code> in a <code>SplineDoubleKeyFrame</code>? For example, an "Ease Out" may be <code>DecelerationRatio=0.5</code>, but this doesn't seem equivalent to <code>KeySpline="0.0,0.0 0.5,1.0"</code> or <code>KeySpline="0.5,0 1,0.5"</code>.</p> <p>Would this involve multiple <code>SplineDoubleKeyFrame</code> to achieve <code>DecelerationRatio=0.5</code>? Or is their a particular formula that makes them equivalent in a single frame?</p> <p>Or is this not to be achieved via a <code>SplineDoubleKeyFrame</code> but a <code>EasingDoubleKeyFrame</code> instead (if so, what is the EasingFunction/EasingMode/Other Attributes)?</p> <p>Essentially, I'm trying to achieve <code>&lt;DoubleAnimation Storyboard.TargetName="deceleratedRectangle" Storyboard.TargetProperty="(Rectangle.Width)" DecelerationRatio="0.5" Duration="0:0:10" From="20" To="400" /&gt;</code> with KeyFrames as there will be multiple frames that target the same property path and accelerate/decelerate it.</p> <hr> <p><strong>UPDATE:</strong> According to the <a href="http://wpfslguidance.codeplex.com/releases/view/28278" rel="nofollow">Microsoft WPF-Silverlight Comparison Whitepaper.pdf</a> on page 7:</p> <blockquote> <p>The linear interpolation can be modified somewhat by adding AccelerationRatio and DecelerationRatio properties to the animation. These attributes essentially create three linear interpolations for the entire animation in order to modify the starting and stopping speeds. For example, a designer would use these attributes to have an object gradually pick up speed or stop suddenly. Unfortunately, Silverlight does not implement these two attributes, but the effect can be duplicated using keyframe animations with linear interpolation.</p> </blockquote> <p>So I guess this means it <em>can</em> be done with just 3 key frames, but what the formula is I have no idea.</p> <hr> <p><strong>SOLUTION:</strong> For others that may come along that need this, posting the ECMAScript solution crafted by Peter Taylor:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Acceleration or deceleration with Bezier splines&lt;/title&gt; &lt;script type="text/javascript"&gt;&lt;!-- function calcBezier() { var res = new Array(); var y0 = +document.getElementById("y0").value; var y1 = +document.getElementById("y1").value; var t0 = +document.getElementById("t0").value; var t1 = +document.getElementById("t1").value; var ra = +document.getElementById("ra").value; var rd = +document.getElementById("rd").value; var ta = t0 + ra * (t1 - t0); if (ra &gt; 0) res.push("ta = " + ta + "&lt;br /&gt;"); var td = t1 - rd * (t1 - t0); if (rd &gt; 0) res.push("td = " + td + "&lt;br /&gt;"); var vm = 2 * (y1 - y0) / (t1 + td - ta - t0); res.push("vm = " + vm + "&lt;br /&gt;"); var ya = y0 + vm * (ta - t0) / 2 if (ra &gt; 0) res.push("ya = " + ya + "&lt;br /&gt;"); var yd = y1 - vm * (t1 - td) / 2 if (rd &gt; 0) res.push("yd = " + yd + "&lt;br /&gt;"); res.push('&amp;lt;DiscreteDoubleKeyFrame KeyTime="'+t0+'" Value="'+y0+'" /&amp;gt;&lt;br /&gt;'); if (ra &gt; 0) { // y - ya = (t - ta) * vm =&gt; t = ta + (y - ya) / vm var p1t = ta - (ya - y0) / vm; // Scale for spline params: (t0,y0):(0,0) and (ta,ya):(1,1) p1t = (p1t - t0) / (ta - t0); // Lift to cubic. res.push('&amp;lt;SplineDoubleKeyFrame KeyTime="'+ta+'" Value="'+ya+'" KeySpline="'+((2*p1t)/3)+',0 '+((2*p1t+1)/3)+','+(1/3)+'" /&amp;gt;&lt;br /&gt;'); } if (ra + rd &lt; 1) { res.push('&amp;lt;LinearDoubleKeyFrame KeyTime="'+td+'" Value="'+yd+'" /&amp;gt;&lt;br /&gt;'); } if (rd &gt; 0) { var q1y = 1; var q1t = td + (y1 - yd) / vm; q1t = (q1t - td) / (t1 - td); res.push('&amp;lt;SplineDoubleKeyFrame KeyTime="'+t1+'" Value="'+y1+'" KeySpline="'+((2*q1t)/3)+','+(2/3)+' '+((2*q1t+1)/3)+',1" /&amp;gt;&lt;br /&gt;'); } document.getElementById("results").innerHTML = res.join(""); } //--&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Interpolate y from &lt;input id="y0" /&gt; to &lt;input id="y1" /&gt;.&lt;/p&gt; &lt;p&gt;Start time: &lt;input id="t0" /&gt;; end time: &lt;input id="t1" /&gt;.&lt;/p&gt; &lt;p&gt;Acceleration ratio: &lt;input id="ra" /&gt;; deceleration ratio: &lt;input id="rd" /&gt;.&lt;/p&gt; &lt;p&gt;&lt;input type="submit" value="Calculate" onclick="calcBezier();" /&gt;&lt;/p&gt; &lt;p id="results"&gt;&amp;nbsp;&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload