/// <summary>Creates a new UIAnimation for animating CSS and immediately animates it.
/// See <see cref="PowerUI.HtmlElement.animate"/>.</summary>
/// <param name="animating">The element being animated.</param>
/// <param name="properties">The CSS property string. Each property should define the value it will be when the animation is done.</param>
/// <param name="duration">How long this animation lasts for.</param>
/// <param name="timeCurve">A curve used to describe animation progression.</param>
public UIAnimation(Node animating, string properties, float duration, Blaze.VectorPath timeCurve)
{
if (string.IsNullOrEmpty(properties))
{
Dom.Log.Add("No properties given to animate!");
return;
}
Style style = null;
if (!properties.Contains(":"))
{
// Targeting a selector, e.g. #fadedBox
// First, get the selector style:
Style selector = (animating.document as ReflowDocument).getStyleBySelector(properties);
if (selector == null)
{
return;
}
// Animate each property:
style = selector;
}
else
{
// Create a holding style:
style = Style.Create(properties, animating);
}
// Animate with it:
Setup(animating, style, duration, timeCurve);
}
/// <summary>
/// Sets a time curve which progresses the overall slides animation.
/// Almost always linear but change it for advanced effects.</summary>
public void setTimingFunction(Css.Value timingFunc)
{
// The function to use:
Blaze.VectorPath path = null;
if (timingFunc != null)
{
// Get the defined vector path:
path = timingFunc.GetPath(
style == null? null : style.RenderData,
Css.Properties.TimelineTimingFunction.GlobalProperty
);
}
if (path == null)
{
progressSampler = null;
}
else
{
if (!(path is Blaze.RasterVectorPath))
{
Blaze.RasterVectorPath rvp = new Blaze.RasterVectorPath();
path.CopyInto(rvp);
rvp.ToStraightLines();
path = rvp;
}
progressSampler = new Blaze.CurveSampler(path);
progressSampler.Reset();
}
}
/// <summary>Animates this property now.</summary>
/// <param name="animation">The animation that this property is a part of.</param>
/// <param name="targetValue">The parsed value that this property will be when the animation is over.</param>
/// <param name="timeCurve">Optional curve used to describe the progression of the animation.
/// X is time, Y is value. Null acts like linear (a line from 0,0 to 1,1).</param>
/// <param name="updateCss">True if this particular property should flush its changes to css/the screen.</param>
public void Animate(UIAnimation animation, Css.Value targetValue, Blaze.VectorPath timeCurve, bool updateCss)
{
Animation = animation;
CurrentTime = 0f;
UpdateCss = updateCss;
RawTarget = targetValue;
if (timeCurve == null)
{
ProgressSampler = null;
}
else
{
if (!(timeCurve is Blaze.RasterVectorPath))
{
Blaze.RasterVectorPath rvp = new Blaze.RasterVectorPath();
timeCurve.CopyInto(rvp);
rvp.ToStraightLines();
timeCurve = rvp;
}
ProgressSampler = new Blaze.CurveSampler(timeCurve);
ProgressSampler.Reset();
}
}
/// <summary>Animates css properties on this element.</summary>
/// <param name="css">A set of target css properties, e.g. "rotate-x:45deg;scale-y:110%;".</param>
/// <param name="duration">The time, in seconds, to take animating the properties.</param>
/// <param name="cssTimeFunction">The timing function (CSS).
/// Can be anything that's valid CSS; e.g. "steps(3)" or "ease". Note that "ease" is the default in CSS.</summary>
/// <returns>An animation instance which can be used to track progress.</returns>
public UIAnimation animate(string css, float duration, string cssTimeFunction)
{
// Load the CSS function:
Css.Value value = Css.Value.Load(cssTimeFunction);
Blaze.VectorPath timeFunc = null;
if (value != null)
{
// Get as a path:
timeFunc = value.GetPath(null, null);
}
return(new UIAnimation(this, css, duration, timeFunc));
}
/// <summary>Sets up general information for a particular animation and starts running it.</summary>
private void Setup(Node animating, Style style, float duration, Blaze.VectorPath timeCurve)
{
Animating = animating;
ComputedStyle = (animating as IRenderableNode).ComputedStyle;
if (duration <= 0f)
{
duration = 0f;
}
Duration = duration;
TimeCurve = timeCurve;
// Start animating the properties now.
foreach (KeyValuePair <CssProperty, Css.Value> kvp in style.Properties)
{
// Get the value:
Css.Value value = kvp.Value;
// Get the property:
CssProperty property = kvp.Key;
// Grab the type:
Css.ValueType type = value.Type;
// Animate it (note that we don't need to copy it):
if (property == Css.Properties.TransformProperty.GlobalProperty)
{
// Special case for animating transform.
AnimateTransform(value);
}
else if (type == Css.ValueType.Set)
{
int count = value.Count;
for (int i = 0; i < count; i++)
{
// Get the correct aliased property and animate it:
Animate(property.GetAliased(i, true), value[i], (i == (count - 1)));
}
}
else
{
Animate(property, value, true);
}
}
}
/// <summary>Runs the current frame.</summary>
private void Run()
{
// Get the frame:
KeyframesKeyframe frame = RawAnimation.GetFrame(CurrentFrame);
float duration;
if (Backwards)
{
duration = Duration * frame.AfterDelay;
}
else
{
duration = Duration * frame.BeforeDelay;
}
// The function to use:
Blaze.VectorPath path = null;
if (TimingFunction != null)
{
// Get the defined vector path:
path = TimingFunction.GetPath(
Style.RenderData,
Css.Properties.AnimationTimingFunction.GlobalProperty
);
}
if (path == null)
{
// Use ease:
path = Css.Keywords.Ease.SharedPath;
}
// Create the UI animation:
Animation = new UIAnimation(Style.Element, frame.Style, duration, path);
// Add ondone callback:
Animation.OnDone(Advance);
}
/// <summary>Animates css properties on this element.</summary>
/// <param name="css">A set of target css properties, e.g. "rotate-x:45deg;scale-y:110%;".</param>
/// <param name="constantSpeedTime">The time, in seconds, to take animating the properties at a constant speed.</param>
/// <param name="timeToAccelerate">The time, in seconds, to take accelerating.</param>
/// <param name="timeToDecelerate">The time, in seconds, to take decelerating.</param>
/// <returns>An animation instance which can be used to track progress.</returns>
public UIAnimation animate(string css, float constantSpeedTime, float timeToAccelerate, float timeToDecelerate)
{
// Increase total duration:
constantSpeedTime += timeToAccelerate + timeToDecelerate;
// The graph is an ease curve (cubic bezier):
Blaze.VectorPath path = new Blaze.VectorPath();
path.CurveTo(
// First control point (on the left):
timeToAccelerate / constantSpeedTime, 0f,
// Second control point (on the right):
1f - (timeToDecelerate / constantSpeedTime), 1f,
// End point:
1f, 1f
);
return(new UIAnimation(this, css, constantSpeedTime, path));
}
/// <summary>Animates css properties on this element.</summary>
/// <param name="css">A set of target css properties, e.g. "rotate-x:45deg;scale-y:110%;".</param>
/// <param name="duration">The time, in seconds, to take animating the properties.</param>
/// <param name="timeFunction">A (0,0) to (1,1) graph which describes the timing function.
/// Linear is the default.</param>
/// <returns>An animation instance which can be used to track progress.</returns>
public UIAnimation animate(string css, float duration, Blaze.VectorPath timeFunction)
{
return(new UIAnimation(this, css, duration, timeFunction));
}
/// <summary>Creates an animation with the given style as the set of target properties.</summary>
public UIAnimation(Node animating, Style properties, float duration, Blaze.VectorPath timeCurve)
{
Setup(animating, properties, duration, timeCurve);
}
