void TouchArea_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
{
// reset the animation
// todo: wonder if there should be a method to remove a certain key frame?
// so I'd only need to remove the keyframe (_animation.InsertKeyFrame(1.0f, new Vector3());)
// rather than create a new animation instance
_x = 0.0f;
_animation = _compositor.CreateVector3KeyFrameAnimation();
_animation.InsertExpressionKeyFrame(0.0f, "touch.Offset");
_animation.SetReferenceParameter("touch", _touchAreaVisual);
}
private CompositionAnimationGroup CreateOffsetAnimation()
{
//Define Offset Animation for the ANimation group
Vector3KeyFrameAnimation offsetAnimation = _compositor.CreateVector3KeyFrameAnimation();
offsetAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
offsetAnimation.Duration = TimeSpan.FromSeconds(.4);
//Define Animation Target for this animation to animate using definition.
offsetAnimation.Target = "Offset";
ScalarKeyFrameAnimation fadeAnimation = _compositor.CreateScalarKeyFrameAnimation();
fadeAnimation.InsertKeyFrame(1f, 0.8f);
fadeAnimation.Duration = TimeSpan.FromSeconds(.4);
fadeAnimation.Target = "Opacity";
//Define Rotation Animation for Animation Group.
ScalarKeyFrameAnimation rotationAnimation = _compositor.CreateScalarKeyFrameAnimation();
rotationAnimation.InsertKeyFrame(.5f, 0.160f);
rotationAnimation.InsertKeyFrame(1f, 0f);
rotationAnimation.Duration = TimeSpan.FromSeconds(.4);
//Define Animation Target for this animation to animate using definition.
rotationAnimation.Target = "RotationAngle";
//Add Animations to Animation group.
CompositionAnimationGroup animationGroup = _compositor.CreateAnimationGroup();
animationGroup.Add(offsetAnimation);
animationGroup.Add(rotationAnimation);
animationGroup.Add(fadeAnimation);
return(animationGroup);
}
private CompositionAnimationGroup CreateOffsetAnimation()
{
Vector3KeyFrameAnimation offsetAnimation = _compositor.CreateVector3KeyFrameAnimation();
offsetAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
offsetAnimation.Duration = TimeSpan.FromSeconds(.25);
offsetAnimation.Target = "Offset";
ScalarKeyFrameAnimation fadeAnimation = _compositor.CreateScalarKeyFrameAnimation();
fadeAnimation.InsertKeyFrame(1f, 0.9f);
fadeAnimation.Duration = TimeSpan.FromSeconds(.25);
fadeAnimation.Target = "Opacity";
CompositionAnimationGroup animationGroup = _compositor.CreateAnimationGroup();
animationGroup.Add(offsetAnimation);
animationGroup.Add(fadeAnimation);
return(animationGroup);
}
/// <summary>
/// Creates a <see cref="ScalarKeyFrameAnimation"/> instance with the given parameters to on a target element, using an expression animation
/// </summary>
/// <param name="compositor">The current <see cref="Compositor"/> instance used to create the animation</param>
/// <param name="from">The optional starting value for the animation</param>
/// <param name="to">A string that indicates the final value for the animation</param>
/// <param name="duration">The animation duration</param>
/// <param name="delay">The optional initial delay for the animation</param>
/// <param name="ease">The optional easing function for the animation</param>
public static Vector3KeyFrameAnimation CreateVector3KeyFrameAnimation(
this Compositor compositor,
Vector3?from, string to,
TimeSpan duration, TimeSpan?delay,
CompositionEasingFunction ease = null)
{
// Set duration and delay time
Vector3KeyFrameAnimation ani = compositor.CreateVector3KeyFrameAnimation();
ani.Duration = duration;
if (delay.HasValue)
{
ani.DelayTime = delay.Value;
}
// Insert "to" and "from" keyframes
ani.InsertExpressionKeyFrame(1, to, ease ?? compositor.CreateLinearEasingFunction());
if (from.HasValue)
{
ani.InsertKeyFrame(0, from.Value);
}
return(ani);
}
private CompositionAnimationGroup CreateOffsetAnimation()
{
Vector3KeyFrameAnimation offsetAnimation = _compositor.CreateVector3KeyFrameAnimation();
offsetAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue");
offsetAnimation.Duration = TimeSpan.FromSeconds(.4);
offsetAnimation.Target = "Offset";
ScalarKeyFrameAnimation rotationAnimation = _compositor.CreateScalarKeyFrameAnimation();
rotationAnimation.InsertKeyFrame(.5f, 0.160f);
rotationAnimation.InsertKeyFrame(1f, 0f);
rotationAnimation.Duration = TimeSpan.FromSeconds(.4);
rotationAnimation.Target = "RotationAngle";
CompositionAnimationGroup animationGroup = _compositor.CreateAnimationGroup();
animationGroup.Add(offsetAnimation);
animationGroup.Add(rotationAnimation);
return(animationGroup);
}
private void CreateAnimationTemplates(Compositor compositor)
{
//
// Near-slide and far-slide animations.
//
_nearSlideOffsetAnimation = compositor.CreateVector3KeyFrameAnimation();
_nearSlideOffsetAnimation.InsertExpressionKeyFrame(0.0f, "this.StartingValue");
_nearSlideOffsetAnimation.InsertExpressionKeyFrame(1.0f, "vector3(0,0,0) - myViewportCenter");
_farSlideOffsetAnimation = compositor.CreateVector3KeyFrameAnimation();
_farSlideOffsetAnimation.InsertExpressionKeyFrame(0.0f, "this.StartingValue");
_farSlideOffsetAnimation.InsertExpressionKeyFrame(0.9f, "vector3(0,0,0) - myViewportCenter");
_farSlideOffsetAnimation.InsertExpressionKeyFrame(1.0f, "vector3(0,0,0) - myViewportCenter");
_slideCenterAnimation = compositor.CreateVector3KeyFrameAnimation();
_slideCenterAnimation.InsertExpressionKeyFrame(0.0f, "this.StartingValue");
_slideCenterAnimation.InsertExpressionKeyFrame(1.0f, "myTargetCenterPoint");
_nearSlideScaleAnimation = compositor.CreateVector3KeyFrameAnimation();
_nearSlideScaleAnimation.InsertExpressionKeyFrame(0.00f, "this.StartingValue");
_nearSlideScaleAnimation.InsertExpressionKeyFrame(1.00f, "myScale");
_farSlideScaleAnimation = compositor.CreateVector3KeyFrameAnimation();
_farSlideScaleAnimation.InsertExpressionKeyFrame(0.00f, "this.StartingValue");
_farSlideScaleAnimation.InsertKeyFrame(0.30f, new Vector3(1.0f, 1.0f, 1.0f));
_farSlideScaleAnimation.InsertKeyFrame(1.00f, new Vector3(1.0f, 1.0f, 1.0f));
TimeSpan time4sec = TimeSpan.FromSeconds(4);
TimeSpan time8sec = TimeSpan.FromSeconds(8);
_nearSlideOffsetAnimation.Duration = time4sec;
_farSlideOffsetAnimation.Duration = time8sec;
_slideCenterAnimation.Duration = time4sec;
_nearSlideScaleAnimation.Duration = time4sec;
_farSlideScaleAnimation.Duration = time4sec;
//
// Zoom animations.
//
_zoomScaleAnimation = compositor.CreateVector3KeyFrameAnimation();
_zoomScaleAnimation.InsertExpressionKeyFrame(0.00f, "this.StartingValue");
_zoomScaleAnimation.InsertKeyFrame(0.40f, new Vector3(1.0f, 1.0f, 1.0f));
_zoomScaleAnimation.InsertKeyFrame(0.60f, new Vector3(1.0f, 1.0f, 1.0f));
_zoomScaleAnimation.InsertExpressionKeyFrame(1.00f, "myScale");
_zoomCenterAnimation = compositor.CreateVector3KeyFrameAnimation();
_zoomCenterAnimation.InsertExpressionKeyFrame(0.00f, "this.StartingValue");
_zoomCenterAnimation.InsertExpressionKeyFrame(0.40f, "this.StartingValue");
_zoomCenterAnimation.InsertExpressionKeyFrame(0.60f, "myTargetCenterPoint");
_zoomCenterAnimation.InsertExpressionKeyFrame(1.00f, "myTargetCenterPoint");
_zoomOffsetAnimation = compositor.CreateVector3KeyFrameAnimation();
_zoomOffsetAnimation.InsertExpressionKeyFrame(0.00f, "this.StartingValue");
_zoomOffsetAnimation.InsertExpressionKeyFrame(1.00f, "vector3(0,0,0) - myViewportCenter");
TimeSpan time12sec = TimeSpan.FromSeconds(12);
_zoomScaleAnimation.Duration = time12sec;
_zoomCenterAnimation.Duration = time12sec;
_zoomOffsetAnimation.Duration = time12sec;
//
// Stack animations.
//
CubicBezierEasingFunction flyInEasing;
CubicBezierEasingFunction flyOutEasing;
flyInEasing = compositor.CreateCubicBezierEasingFunction(new Vector2(0.0f, 1.0f), new Vector2(0.8f, 1.0f));
_stackFlyInAnimation = compositor.CreateVector3KeyFrameAnimation();
_stackFlyInAnimation.InsertExpressionKeyFrame(0.00f, "stackVisual.Offset + startDelta");
_stackFlyInAnimation.InsertExpressionKeyFrame(1.00f, "stackVisual.Offset + endDelta", flyInEasing);
_stackFlyInAnimation.Duration = TimeSpan.FromSeconds(2);
flyOutEasing = compositor.CreateCubicBezierEasingFunction(new Vector2(0.0f, 0.4f), new Vector2(1.0f, 0.6f));
_stackFlyOutAnimation = compositor.CreateVector3KeyFrameAnimation();
_stackFlyOutAnimation.InsertExpressionKeyFrame(0.00f, "this.StartingValue", flyOutEasing);
_stackFlyOutAnimation.InsertExpressionKeyFrame(0.50f, "this.StartingValue + delta", flyOutEasing);
_stackFlyOutAnimation.InsertExpressionKeyFrame(1.00f, "originalOffset", flyOutEasing);
_stackFlyOutAnimation.Duration = TimeSpan.FromSeconds(2);
_stackScaleAnimation = compositor.CreateVector3KeyFrameAnimation();
_stackScaleAnimation.InsertExpressionKeyFrame(0.00f, "this.StartingValue");
_stackScaleAnimation.InsertExpressionKeyFrame(1.00f, "myScale");
_stackScaleAnimation.Duration = TimeSpan.FromSeconds(6);
//
// Color flashlight expression animation.
//
// This expression returns a computes between 0 and 1 as a function of on how close the
// center of the frame is to the center of the window.
// - If the frame is at the center of the window, the expression computes 0 (no
// desaturation).
// - If the frame is more than 300px away from the center of the window, the
// expression computes 1 (full desaturation).
// - If the frame is within 300px from the center of the window, the expression
// computes a value between 0 and 1 relative to how far the frame is from the 300px
// boundary (partial desaturation).
_colorFlashlightAnimation = compositor.CreateExpressionAnimation(
"1.0 - min("
+ " 1.0,"
+ " ("
+ " ("
+ " ( frame.Offset.x + (frame.Size.x * 0.5) + grid.Offset.x - (windowWidth * 0.5) )"
+ " * ( frame.Offset.x + (frame.Size.x * 0.5) + grid.Offset.x - (windowWidth * 0.5) )"
+ " ) + ("
+ " ( frame.Offset.y + (frame.Size.y * 0.5) + grid.Offset.y - (windowHeight * 0.5) )"
+ " * ( frame.Offset.y + (frame.Size.y * 0.5) + grid.Offset.y - (windowHeight * 0.5) )"
+ " )"
+ " ) / ( radius * radius )"
+ ")");
_colorFlashlightAnimation.SetReferenceParameter("grid", _layoutManager.GridVisual);
_colorFlashlightAnimation.SetScalarParameter("radius", 300);
_colorFlashlightAnimation.SetScalarParameter("windowWidth", _windowWidth);
_colorFlashlightAnimation.SetScalarParameter("windowHeight", _windowHeight);
}
public void Start(UIElement newParent, CompositionImage targetImage, ScrollViewer scrollViewer, UIElement animationTarget)
{
Visual transitionVisual = ElementCompositionPreview.GetElementChildVisual(_parent);
ElementCompositionPreview.SetElementChildVisual(_parent, null);
//
// We need to reparent the transition visual under the new parent. This is important to ensure
// it's propertly clipped, etc.
//
GeneralTransform coordinate = newParent.TransformToVisual(_parent);
Point position = coordinate.TransformPoint(new Point(0, 0));
Vector3 currentOffset = transitionVisual.Offset;
currentOffset.X -= (float)position.X;
currentOffset.Y -= (float)position.Y;
transitionVisual.Offset = currentOffset;
_parent = newParent;
_targetImage = targetImage;
// Move the transition visual to it's new parent
ElementCompositionPreview.SetElementChildVisual(_parent, transitionVisual);
// Hide the target Image now since the handoff visual is still transitioning
targetImage.Opacity = 0f;
// Load image if necessary
_imageLoaded = targetImage.IsContentLoaded;
if (!_imageLoaded)
{
targetImage.ImageOpened += CompositionImage_ImageOpened;
}
//
// Create a scoped batch around the animations. When the batch completes, we know the animations
// have finished and we can cleanup the transition related objects.
//
Compositor compositor = transitionVisual.Compositor;
_scopeBatch = compositor.CreateScopedBatch(CompositionBatchTypes.Animation);
//
// Determine the offset between the parent and the target UIElement. This will be used to calculate the
// target position we are animating to.
//
coordinate = targetImage.TransformToVisual(_parent);
position = coordinate.TransformPoint(new Point(0, 0));
TimeSpan totalDuration = TimeSpan.FromMilliseconds(1000);
Vector3KeyFrameAnimation offsetAnimation = compositor.CreateVector3KeyFrameAnimation();
if (scrollViewer != null)
{
CompositionPropertySet scrollProperties = ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scrollViewer);
// Include the scroller offset as that is a factor
position.X += scrollViewer.HorizontalOffset;
position.Y += scrollViewer.VerticalOffset;
//
// Since the target position is relative to the target UIElement which can move, we need to construct
// an expression to bind the target's position to the end position of our animation.
//
string expression = "Vector3(scrollingProperties.Translation.X, scrollingProperties.Translation.Y, 0) + itemOffset";
offsetAnimation.InsertExpressionKeyFrame(1f, expression);
offsetAnimation.SetReferenceParameter("scrollingProperties", scrollProperties);
offsetAnimation.SetVector3Parameter("itemOffset", new Vector3((float)position.X, (float)position.Y, 0));
offsetAnimation.Duration = totalDuration;
}
else
{
offsetAnimation.InsertKeyFrame(1, new Vector3((float)position.X, (float)position.Y, 0));
offsetAnimation.Duration = totalDuration;
}
// Create size animation to change size of the visual
Vector2KeyFrameAnimation sizeAnimation = compositor.CreateVector2KeyFrameAnimation();
sizeAnimation.InsertKeyFrame(1f, new Vector2((float)targetImage.ActualWidth, (float)targetImage.ActualHeight));
sizeAnimation.Duration = totalDuration;
// Create the fade in animation for the other page content
if (animationTarget != null)
{
Visual fadeVisual = ElementCompositionPreview.GetElementVisual(animationTarget);
ScalarKeyFrameAnimation fadeIn = compositor.CreateScalarKeyFrameAnimation();
fadeIn.InsertKeyFrame(0f, 0.0f);
fadeIn.InsertKeyFrame(1f, 1.0f);
fadeIn.Duration = totalDuration;
fadeVisual.StartAnimation("Opacity", fadeIn);
}
//Start Animations
_sprite.StartAnimation("Size", sizeAnimation);
_sprite.StartAnimation("Offset", offsetAnimation);
//Scoped batch completed event
_scopeBatch.Completed += ScopeBatch_Completed;
_scopeBatch.End();
// Clear the flag
_animationCompleted = false;
}
private void SetupInteraction()
{
if (DesignMode.DesignModeEnabled)
{
return;
}
if (Compositor == null)
{
return;
}
if (ContentBorderVisual == null)
{
return;
}
m_tracker = InteractionTracker.CreateWithOwner(Compositor, this);
var height = (float)ContentBorder.ActualHeight;
m_tracker.MaxPosition = new Vector3(0f, 0f, 0f);
m_tracker.MinPosition = new Vector3(0f, -height, 0f);
m_source = VisualInteractionSource.Create(ContentBorderVisual);
m_source.IsPositionYRailsEnabled = true;
m_source.ManipulationRedirectionMode = VisualInteractionSourceRedirectionMode.CapableTouchpadOnly;
m_source.PositionYChainingMode = InteractionChainingMode.Auto;
m_source.PositionYSourceMode = InteractionSourceMode.EnabledWithoutInertia;
m_tracker.InteractionSources.Add(m_source);
m_open = InteractionTrackerInertiaRestingValue.Create(Compositor);
m_open.Condition = Compositor.CreateExpressionAnimation("this.Target.NaturalRestingPosition.Y > -host.Size.Y / 3");
m_open.RestingValue = Compositor.CreateExpressionAnimation("0");
m_open.Condition.SetReferenceParameter("host", ContentBorderVisual);
m_open.RestingValue.SetReferenceParameter("host", ContentBorderVisual);
m_close = InteractionTrackerInertiaRestingValue.Create(Compositor);
m_close.Condition = Compositor.CreateExpressionAnimation("this.Target.NaturalRestingPosition.Y <= -host.Size.Y / 3");
m_close.RestingValue = Compositor.CreateExpressionAnimation("-host.Size.Y");
m_close.Condition.SetReferenceParameter("host", ContentBorderVisual);
m_close.RestingValue.SetReferenceParameter("host", ContentBorderVisual);
//Release模式会爆炸
//var modifiers = new InteractionTrackerInertiaRestingValue[] { m_open, m_close };
//m_tracker.ConfigurePositionYInertiaModifiers(modifiers);
ContentOffsetExp = Compositor.CreateExpressionAnimation("Max(-15f, -tracker.Position.Y)");
ContentOffsetExp.SetReferenceParameter("tracker", m_tracker);
ContentBorderVisual.StartAnimation("Translation.Y", ContentOffsetExp);
LightDismissLayerOpacityExp = Compositor.CreateExpressionAnimation("Clamp(1 + (tracker.Position.Y / host.Size.Y),0,1)");
LightDismissLayerOpacityExp.SetReferenceParameter("tracker", m_tracker);
LightDismissLayerOpacityExp.SetReferenceParameter("host", ContentBorderVisual);
LightDismissLayerVisual.StartAnimation("Opacity", LightDismissLayerOpacityExp);
OpenAnimation = Compositor.CreateVector3KeyFrameAnimation();
OpenAnimation.InsertExpressionKeyFrame(0f, "Vector3(0f, -host.Size.Y, 0f)");
OpenAnimation.InsertKeyFrame(1f, new Vector3(0f, 15f, 0f));
OpenAnimation.SetReferenceParameter("host", ContentBorderVisual);
OpenAnimation.Duration = TimeSpan.FromSeconds(0.3d);
ToOpenAnimation = Compositor.CreateVector3KeyFrameAnimation();
ToOpenAnimation.InsertKeyFrame(1f, new Vector3(0f, 5f, 0f));
ToOpenAnimation.SetReferenceParameter("host", ContentBorderVisual);
ToOpenAnimation.Duration = TimeSpan.FromSeconds(0.3d);
CloseAnimation = Compositor.CreateVector3KeyFrameAnimation();
CloseAnimation.InsertExpressionKeyFrame(1f, "Vector3(0f, -host.Size.Y, 0f)");
CloseAnimation.SetReferenceParameter("host", ContentBorderVisual);
CloseAnimation.Duration = TimeSpan.FromSeconds(0.3d);
}