Is there a formula to translate AccelerationRatio or DecelerationRatio to Bezier control points for use in a KeySpline in a SplineDoubleKeyFrame? For example, an “Ease Out” may be DecelerationRatio=0.5, but this doesn’t seem equivalent to KeySpline="0.0,0.0 0.5,1.0" or KeySpline="0.5,0 1,0.5".
Would this involve multiple SplineDoubleKeyFrame to achieve DecelerationRatio=0.5? Or is their a particular formula that makes them equivalent in a single frame?
Or is this not to be achieved via a SplineDoubleKeyFrame but a EasingDoubleKeyFrame instead (if so, what is the EasingFunction/EasingMode/Other Attributes)?
Essentially, I’m trying to achieve <DoubleAnimation Storyboard.TargetName="deceleratedRectangle" Storyboard.TargetProperty="(Rectangle.Width)" DecelerationRatio="0.5" Duration="0:0:10" From="20" To="400" /> with KeyFrames as there will be multiple frames that target the same property path and accelerate/decelerate it.
UPDATE: According to the Microsoft WPF-Silverlight Comparison Whitepaper.pdf on page 7:
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.
So I guess this means it can be done with just 3 key frames, but what the formula is I have no idea.
SOLUTION: For others that may come along that need this, posting the ECMAScript solution crafted by Peter Taylor:
<html>
<head>
<title>Acceleration or deceleration with Bezier splines</title>
<script type="text/javascript"><!--
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 > 0) res.push("ta = " + ta + "<br />");
var td = t1 - rd * (t1 - t0);
if (rd > 0) res.push("td = " + td + "<br />");
var vm = 2 * (y1 - y0) / (t1 + td - ta - t0);
res.push("vm = " + vm + "<br />");
var ya = y0 + vm * (ta - t0) / 2
if (ra > 0) res.push("ya = " + ya + "<br />");
var yd = y1 - vm * (t1 - td) / 2
if (rd > 0) res.push("yd = " + yd + "<br />");
res.push('<DiscreteDoubleKeyFrame KeyTime="'+t0+'" Value="'+y0+'" /><br />');
if (ra > 0) {
// y - ya = (t - ta) * vm => 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('<SplineDoubleKeyFrame KeyTime="'+ta+'" Value="'+ya+'" KeySpline="'+((2*p1t)/3)+',0 '+((2*p1t+1)/3)+','+(1/3)+'" /><br />');
}
if (ra + rd < 1) {
res.push('<LinearDoubleKeyFrame KeyTime="'+td+'" Value="'+yd+'" /><br />');
}
if (rd > 0) {
var q1y = 1;
var q1t = td + (y1 - yd) / vm;
q1t = (q1t - td) / (t1 - td);
res.push('<SplineDoubleKeyFrame KeyTime="'+t1+'" Value="'+y1+'" KeySpline="'+((2*q1t)/3)+','+(2/3)+' '+((2*q1t+1)/3)+',1" /><br />');
}
document.getElementById("results").innerHTML = res.join("");
}
//-->
</script>
</head>
<body>
<p>Interpolate y from <input id="y0" /> to <input id="y1" />.</p>
<p>Start time: <input id="t0" />; end time: <input id="t1" />.</p>
<p>Acceleration ratio: <input id="ra" />; deceleration ratio: <input id="rd" />.</p>
<p><input type="submit" value="Calculate" onclick="calcBezier();" /></p>
<p id="results"> </p>
</body>
</html>
General solution
Update: using the geometric interpretation of calculus as the area under a line, I’ve worked out how to simplify the derivation a lot.
So we’re interpolating from y0 at time t0 to y1 at time t1 with acceleration ratio ra and deceleration ratio rd. The definition of the ratios give us the time at which we stop accelerating, ta = t0 + ra * (t1 – t0), and at which we start decelerating, td = t1 – rd * (t1 – t0).
I understand the documentation you quote to mean that it’s constant acceleration from t0 to ta, and constant deceleration from td to t1. We’ll take the maximum speed reached to be vm.
Then the area of the parallelogram is the distance travelled from t0 to t1, which is y1 – y0. The area of a parallelogram is the product of the height with the average of the parallel sides. So
y1 – y0 = vm * ((t1 – t0) + (td – ta)) / 2
or
vm = 2 * (y1 – y0) / (t1 + td – ta – t0)
Using just the area of the triangles at the end, we can find how far we’ve travelled when we stop accelerating, ya = y(ta), and when we start decelerating, yd = y(td).
ya = y0 + vm * (ta – t0) / 2
yd = y1 – vm * (t1 – td) / 2
Finally we produce a quadratic Bezier for [t0, ta], a straight line (ta, ya) – (td, yd), and a quadratic Bezier for [td, t1].
For the first Bezier, we have the obvious control points P0 = (t0, y0) and P2 = (ta, ya). To find P1 we use the property that P0-P1 is tangent to the curve and P1-P2 is tangent to the curve (in general, for an order-n curve P0-P1 and P(n-1)-Pn are tangent). So P1 is at the intersection of y=y0 and the straight line of the middle segment. Similarly for the other Bezier: Q0 = (td, yd), Q2 = (t1, y1), and Q1 is at the intersection of y=y1 and the straight line of the middle segment.
Worked example:
No fade in (acceleration ratio = 0), deceleration ratio = 0.5, t0 = 0, t1 = 10 (seconds), y0 = 20, y1 = 400. I think this corresponds to your specific question.
ta = 0 (and we can omit the first quadratic Bezier); td = t1 – 0.5 * (t1 – t0) = 5.
vm = 2 * (y1 – y0) / (t1 + td – ta – t0) = 2 * (400 – 20) / (10 + 5 – 0 – 0) = 2 * 380 / 15 = 152 / 3 ~= 50.67.
Ignore ya because we’re skipping that Bezier.
yd = y1 – vm * (t1 – td) / 2 = 400 – 152/3 * (10-5)/2 = 400 – 380/3 = 820/3 ~= 273.3
So the straight line goes from (t=0, y=20) to (t=5, y=273.3). The deceleration Bezier has Q0 = (5, 273.3), Q2 = (10, 400).
To find Q1 we extend the straight line to y=400. The line has equation y – 20 = (t – 0) * (273.3 – 20) / (5 – 0), so t = 5 * (400 – 20) / (273.3 – 20) = 7.5.
So we have straight line (0,20)-(5,273.3) and a quadratic Bezier with control points (5,273.3), (7.5,400) and (10,400).
Translating this into your keyframe
However, there’s a slight hitch, which is that Microsoft hasn’t deigned to give us quadratic splines. We have to lift the quadratic Q0, Q1, Q2, to the cubic Q0, (Q0 + 2 Q1) /3, (2 Q1 + Q2) / 3, Q2.
We also have to rescale the control points to 0-1. If we apply that rescaling first, we have (0,0)-(0.5,1)-(1,1). So the cubic is (0,0)-(0.333,0.667)-(0.667,1)-(1,1).
I know splines, but not WPF. I think that the following will do what you want:
Universality of the transformation
Rescaling the first Bezier, we map (t0, y0) to (0, 0) and (ta, ya) to (1, 1). Therefore we map (P1.t, P1.y) to ((P1.t – t0) / (ta – t0), (P1.y – y0) / (ya – y0)). But P1 is at the intersection of y = y0 with the straight line of gradient vm through (ta, ya), which therefore has equation (y – ya) = (t – ta) * vm. So P1.y = y0 and P1.t = ta + (y0 – ya) / vm = ta – (ya – y0) / vm. Plugging in our identity ya = y0 + vm * (ta – t0) / 2, we get P1.t = ta – (vm * (ta – t0) / 2) / vm = ta – (ta – t0) / 2 = (ta + t0) / 2.
So rescaling we map P1 to (0.5, 0). Therefore when we lift it to a cubic Bezier, the intermediate control points are always at (1/3, 0) and (2/3, 1/3).
Similarly the deceleration spline always has its scaled intermediate points at (1/3, 2/3) and (2/3, 1).