private void ChangeBrushBack(CompositionColorGradientStop target, CompositionColorGradientStop target1)
{
if (target.Color == Colors.Honeydew)
{
target1.StartAnimation(nameof(target1.Color), _colorAnimGradientStop1);
target.StartAnimation(nameof(target.Color), _colorAnimGradientStop2);
}
else if (target.Color == Colors.LightSkyBlue)
{
target1.StartAnimation(nameof(target1.Color), _changeb1stop1);
target.StartAnimation(nameof(target.Color), _changeb1stop2);
}
}
private void AnimateBrushStop1(CompositionColorGradientStop target, CompositionColorGradientStop target1)
{
if (target.Color == Colors.DeepPink)
{
target.StartAnimation(nameof(target.Color), _colorAnimGradientStop1);
target1.StartAnimation(nameof(target1.Color), _colorAnimGradientStop2);
}
else if (target.Color == Colors.Teal)
{
target.StartAnimation(nameof(target.Color), _changeb1stop1);
target1.StartAnimation(nameof(target1.Color), _changeb1stop2);
}
}
private void pointerPressedChangeColors(CompositionColorGradientStop target, CompositionColorGradientStop target1)
{
if (target.Color == Colors.DeepPink || target.Color == Colors.Honeydew)
{
target.StartAnimation(nameof(target.Color), _changeb1stop1);
target1.StartAnimation(nameof(target1.Color), _changeb1stop2);
}
else if (target.Color == Colors.LightSkyBlue || target.Color == Colors.Teal)
{
target1.StartAnimation(nameof(target1.Color), _colorAnimGradientStop1);
target.StartAnimation(nameof(target.Color), _colorAnimGradientStop2);
}
}
// when the first visual is clicked, it switches the brush on the visual from warm to cool colors and animates those color stops
private void OnClick(object sender, RoutedEventArgs e)
{
if (_isAnimationOn == false)
{
// animate the first stop of the first visual
_stop1Anim = _compositor.CreateColorKeyFrameAnimation();
_stop1Anim.InsertKeyFrame(0, _warmColor1);
_stop1Anim.InsertKeyFrame(.5f, _warmColor3);
_stop1Anim.InsertKeyFrame(1, _warmColor1);
_stop1Anim.Duration = TimeSpan.FromSeconds(4);
_stop1Anim.IterationBehavior = AnimationIterationBehavior.Forever;
_MBGradientStop1.StartAnimation("Color", _stop1Anim);
// animate the second stop of the first visual
_stop2Anim = _compositor.CreateColorKeyFrameAnimation();
_stop2Anim.InsertKeyFrame(0, _warmColor3);
_stop2Anim.InsertKeyFrame(1, _warmColor2);
_stop2Anim.Duration = TimeSpan.FromSeconds(2);
_stop2Anim.IterationBehavior = AnimationIterationBehavior.Forever;
_MBGradientStop2.StartAnimation("Color", _stop2Anim);
_isAnimationOn = true;
}
else
{
// animate the first stop of the first visual
_stop1Anim = _compositor.CreateColorKeyFrameAnimation();
_stop1Anim.InsertKeyFrame(0, _coolColor1);
_stop1Anim.InsertKeyFrame(.5f, _coolColor3);
_stop1Anim.InsertKeyFrame(1, _coolColor1);
_stop1Anim.Duration = TimeSpan.FromSeconds(4);
_stop1Anim.IterationBehavior = AnimationIterationBehavior.Forever;
_MBGradientStop1.StartAnimation("Color", _stop1Anim);
// animate the second stop of the first visual
_stop2Anim.InsertKeyFrame(0, _coolColor3);
_stop2Anim.InsertKeyFrame(1, _coolColor2);
_stop2Anim.Duration = TimeSpan.FromSeconds(2);
_stop2Anim.IterationBehavior = AnimationIterationBehavior.Forever;
_MBGradientStop2.StartAnimation("Color", _stop2Anim);
_isAnimationOn = false;
}
}
private void StartOffsetAnimation(CompositionColorGradientStop gradientOffset, float offset)
{
var offsetAnimation = _compositor.CreateScalarKeyFrameAnimation();
offsetAnimation.Duration = TimeSpan.FromSeconds(1);
offsetAnimation.InsertKeyFrame(1.0f, offset);
gradientOffset.StartAnimation(nameof(CompositionColorGradientStop.Offset), offsetAnimation);
}
private void StartColorAnimation(CompositionColorGradientStop gradientOffset, Color color)
{
var colorAnimation = _compositor.CreateColorKeyFrameAnimation();
colorAnimation.Duration = TimeSpan.FromSeconds(2);
colorAnimation.Direction = Windows.UI.Composition.AnimationDirection.Alternate;
colorAnimation.InsertKeyFrame(1.0f, color);
gradientOffset.StartAnimation(nameof(CompositionColorGradientStop.Color), colorAnimation);
}
private void InitLGBAnimation(CompositionColorGradientStop stop, int duration, float offsetAdjustment)
{
ScalarKeyFrameAnimation animateStop = _compositor.CreateScalarKeyFrameAnimation();
animateStop.InsertKeyFrame(0.0f, stop.Offset);
animateStop.InsertKeyFrame(0.5f, stop.Offset + offsetAdjustment);
animateStop.InsertKeyFrame(1.0f, stop.Offset);
animateStop.IterationBehavior = AnimationIterationBehavior.Forever;
animateStop.Duration = TimeSpan.FromSeconds(duration);
stop.StartAnimation(nameof(stop.Offset), animateStop);
}
private void AnimateLinearGradientstopOffset(CompositionColorGradientStop stop, TimeSpan duration, float offsetAdjustment)
{
var animateStop = _compositor.CreateScalarKeyFrameAnimation();
animateStop.InsertKeyFrame(0, stop.Offset);
animateStop.InsertKeyFrame(0.5f, stop.Offset + offsetAdjustment);
animateStop.InsertKeyFrame(1, stop.Offset);
animateStop.IterationBehavior = AnimationIterationBehavior.Forever;
animateStop.Duration = duration;
stop.StartAnimation(nameof(stop.Offset), animateStop);
}
private void UpdateGradients()
{
var relaxGradientStopOffsetAnimation = _compositor.CreateScalarKeyFrameAnimation();
relaxGradientStopOffsetAnimation.Duration = TimeSpan.FromSeconds(1);
// relaxGradientStopOffsetAnimation.DelayTime = TimeSpan.FromSeconds(2);
relaxGradientStopOffsetAnimation.InsertKeyFrame(1.0f, ViewModel.IsInPomodoro ?1.0f : 0.75f);
_relaxGradientStop.StartAnimation(nameof(_relaxGradientStop.Offset), relaxGradientStopOffsetAnimation);
var focusGradientStopOffsetAnimation = _compositor.CreateScalarKeyFrameAnimation();
focusGradientStopOffsetAnimation.Duration = TimeSpan.FromSeconds(1);
//focusGradientStopOffsetAnimation.DelayTime = TimeSpan.FromSeconds(2);
focusGradientStopOffsetAnimation.InsertKeyFrame(1.0f, ViewModel.IsInPomodoro ? 0.25f : 0.0f);
_focusGradientStop.StartAnimation(nameof(_focusGradientStop.Offset), focusGradientStopOffsetAnimation);
}
private SpriteVisual GetRadialGradientVisualWithAnimation(Vector2 size,
Vector2 gradientOrigin,
Vector2 ellipseCenter,
Vector2 ellipseRadius)
{
// Create radial gradient brush.
var gradientBrush = _compositor.CreateRadialGradientBrush();
gradientBrush.GradientOriginOffset = gradientOrigin;
gradientBrush.EllipseCenter = ellipseCenter;
gradientBrush.EllipseRadius = ellipseRadius;
// Add the color stops. The first color stop needs a name so you can refer to it later.
CompositionColorGradientStop ColorStop1 = _compositor.CreateColorGradientStop(0, Colors.Blue);
gradientBrush.ColorStops.Add(ColorStop1);
gradientBrush.ColorStops.Add(_compositor.CreateColorGradientStop(1, Colors.LightBlue));
gradientBrush.ColorStops.Add(_compositor.CreateColorGradientStop(1, Colors.Navy));
gradientBrush.ColorStops.Add(_compositor.CreateColorGradientStop(1, Colors.White));
// Set up animation for ColorStop1's color.
var colorAnimation = _compositor.CreateColorKeyFrameAnimation();
colorAnimation.InsertKeyFrame(0.0f, Colors.Blue);
colorAnimation.InsertKeyFrame(0.5f, Colors.LightBlue);
colorAnimation.InsertKeyFrame(0.75f, Colors.Navy);
colorAnimation.InsertKeyFrame(1.0f, Colors.Blue);
colorAnimation.Duration = TimeSpan.FromSeconds(5);
colorAnimation.IterationBehavior = AnimationIterationBehavior.Forever;
ColorStop1.StartAnimation("Color", colorAnimation);
// SpriteVisual to be painted with gradated content.
var gradientVisual = _compositor.CreateSpriteVisual();
gradientVisual.Size = size;
// Set brush on the SpriteVisual.
gradientVisual.Brush = gradientBrush;
return(gradientVisual);
}
private void Page_Loaded(object sender, RoutedEventArgs e)
{
// create the compositor
_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
// create what captures the pointer position
_hoverPositionPropertySet = ElementCompositionPreview.GetPointerPositionPropertySet(r2);
// create the two visuals
_vis = _compositor.CreateSpriteVisual();
_pulseVis = _compositor.CreateSpriteVisual();
// create the main brush with warm colors
_mainBrush = _compositor.CreateRadialGradientBrush();
_mainBrush.EllipseCenter = new Vector2(.5f, .5f);
_mainBrush.EllipseRadius = new Vector2(.5f, .5f);
_MBGradientStop1 = _compositor.CreateColorGradientStop();
_MBGradientStop1.Offset = 0;
_MBGradientStop1.Color = _warmColor1;
_MBGradientStop2 = _compositor.CreateColorGradientStop();
_MBGradientStop2.Offset = .1f;
_MBGradientStop2.Color = _warmColor2;
_MBGradientStop3 = _compositor.CreateColorGradientStop();
_MBGradientStop3.Offset = 1;
_MBGradientStop3.Color = _warmColor3;
_mainBrush.ColorStops.Add(_MBGradientStop1);
_mainBrush.ColorStops.Add(_MBGradientStop2);
_mainBrush.ColorStops.Add(_MBGradientStop3);
// create the brush for the pulse visual
_pulseBrush = _compositor.CreateRadialGradientBrush();
_pulseBrush.EllipseCenter = new Vector2(.5f, .5f);
_pulseBrush.EllipseRadius = new Vector2(.5f, .5f);
_PBGradientStop1 = _compositor.CreateColorGradientStop();
_PBGradientStop1.Offset = 0;
_PBGradientStop1.Color = _innerPulseColor;
_PBGradientStop2 = _compositor.CreateColorGradientStop();
_PBGradientStop2.Offset = 1;
_PBGradientStop2.Color = _innerPulseColor;
_pulseBrush.ColorStops.Add(_PBGradientStop1);
_pulseBrush.ColorStops.Add(_PBGradientStop2);
// finish setting properties of the first visual
_vis.Size = new Vector2(300, 300);
_vis.Offset = new Vector3(((float)r2.ActualWidth / 2), ((float)r2.ActualHeight / 2), 0);
_vis.AnchorPoint = new Vector2(.5f, .5f);
_vis.Brush = _mainBrush;
// finish setting properties of the pulsing visual
_pulseVis.Size = new Vector2(500, 500);
_pulseVis.Offset = new Vector3(((float)r1.ActualWidth / 2), ((float)r1.ActualHeight / 2), 0);
_pulseVis.AnchorPoint = new Vector2(.5f, .5f);
_pulseVis.Brush = _pulseBrush;
// create the clip that makes the visuals circular
CompositionGeometricClip gClip = _compositor.CreateGeometricClip();
CompositionEllipseGeometry circle = _compositor.CreateEllipseGeometry();
circle.Radius = new Vector2(_vis.Size.X / 2, _vis.Size.Y / 2);
circle.Center = new Vector2(_vis.Size.X / 2, _vis.Size.Y / 2);
gClip.Geometry = circle;
_vis.Clip = gClip;
CompositionGeometricClip gClip2 = _compositor.CreateGeometricClip();
CompositionEllipseGeometry circle2 = _compositor.CreateEllipseGeometry();
circle2.Radius = new Vector2(_pulseVis.Size.X / 2, _pulseVis.Size.Y / 2);
circle2.Center = new Vector2(_pulseVis.Size.X / 2, _pulseVis.Size.Y / 2);
gClip2.Geometry = circle2;
_pulseVis.Clip = gClip2;
// set the pointer
my_pointer = new Vector3(((float)r1.ActualWidth / 2), ((float)r1.ActualHeight / 2), 0);
// set the visuals in the tree
ElementCompositionPreview.SetElementChildVisual(r2, _vis);
ElementCompositionPreview.SetElementChildVisual(r1, _pulseVis);
// ellipse center follows mouse
_ellipseCenterAnim = _compositor.CreateExpressionAnimation("Vector2(p.Position.X / 500.0f, p.Position.Y / 500.0f)");
_ellipseCenterAnim.SetReferenceParameter("p", _hoverPositionPropertySet);
_mainBrush.StartAnimation("EllipseCenter", _ellipseCenterAnim);
// second stop is animated for "pulsing" effect within the first visual that runs constantly
_offsetAnim = _compositor.CreateScalarKeyFrameAnimation();
_offsetAnim.InsertKeyFrame(0, 0);
_offsetAnim.InsertKeyFrame(1f, 1f);
_offsetAnim.Duration = TimeSpan.FromSeconds(2);
_offsetAnim.IterationCount = 50;
_MBGradientStop2.StartAnimation("Offset", _offsetAnim);
// set up the animation for the backing pulse visual
// animate the color
_pulseColorAnim = _compositor.CreateColorKeyFrameAnimation();
_pulseColorAnim.InsertKeyFrame(0, _innerPulseColor);
_pulseColorAnim.InsertKeyFrame(.99f, _outerPulseColor);
_pulseColorAnim.InsertKeyFrame(1, _innerPulseColor);
_pulseColorAnim.Duration = TimeSpan.FromSeconds(1);
_pulseColorAnim.IterationBehavior = AnimationIterationBehavior.Forever;
_PBGradientStop1.StartAnimation("Color", _pulseColorAnim);
// animate offset of first stop
_pulseStop1OffsetAnim = _compositor.CreateScalarKeyFrameAnimation();
_pulseStop1OffsetAnim.InsertKeyFrame(0, 0);
_pulseStop1OffsetAnim.InsertKeyFrame(1f, 1f);
_pulseStop1OffsetAnim.Duration = TimeSpan.FromSeconds(1);
_pulseStop1OffsetAnim.IterationBehavior = AnimationIterationBehavior.Forever;
_PBGradientStop1.StartAnimation("Offset", _pulseStop1OffsetAnim);
// animate offset of second stop
_pulseStop2OffsetAnim = _compositor.CreateScalarKeyFrameAnimation();
_pulseStop2OffsetAnim.InsertKeyFrame(0, 0);
_pulseStop2OffsetAnim.InsertKeyFrame(1f, 1f);
_pulseStop2OffsetAnim.Duration = TimeSpan.FromSeconds(1);
_pulseStop2OffsetAnim.IterationBehavior = AnimationIterationBehavior.Forever;
_pulseStop2OffsetAnim.DelayTime = TimeSpan.FromSeconds(.25f);
_PBGradientStop2.StartAnimation("Offset", _pulseStop2OffsetAnim);
_pulseScaleAnim = _compositor.CreateVector3KeyFrameAnimation();
_pulseScaleAnim.InsertKeyFrame(0, Vector3.Zero);
_pulseScaleAnim.InsertKeyFrame(1, Vector3.One);
_pulseScaleAnim.Duration = TimeSpan.FromSeconds(1);
_pulseScaleAnim.IterationBehavior = AnimationIterationBehavior.Forever;
_pulseVis.StartAnimation("Scale", _pulseScaleAnim);
}
private Visual CreateRectangleElement(Vector2 size)
{
var element = _compositor.CreateContainerVisual();
element.Size = new Vector2(0.0f, 0.0f);
element.Offset = new Vector3(0.0f, 0.0f, 0.0f);
// Create radial gradient brush.
CompositionRadialGradientBrush RGBrush = _compositor.CreateRadialGradientBrush();
// Create the color stops by defining the offset and color.
CompositionColorGradientStop ColorStop1 = _compositor.CreateColorGradientStop();
ColorStop1.Offset = 0;
ColorStop1.Color = Colors.Blue;
CompositionColorGradientStop ColorStop2 = _compositor.CreateColorGradientStop();
ColorStop2.Offset = 0.75f;
ColorStop2.Color = Colors.LightBlue;
CompositionColorGradientStop ColorStop3 = _compositor.CreateColorGradientStop();
ColorStop3.Offset = 1.5f;
ColorStop3.Color = Colors.Navy;
RGBrush.ColorStops.Add(ColorStop1);
RGBrush.ColorStops.Add(ColorStop2);
RGBrush.ColorStops.Add(ColorStop3);
// Set up animation for ColorStop1's color.
var colorAnimation = _compositor.CreateColorKeyFrameAnimation();
colorAnimation.InsertKeyFrame(0.0f, Colors.Blue);
colorAnimation.InsertKeyFrame(0.25f, Colors.LightBlue);
colorAnimation.InsertKeyFrame(0.5f, Colors.Navy);
colorAnimation.InsertKeyFrame(0.75f, Colors.LightBlue);
colorAnimation.InsertKeyFrame(1.0f, Colors.Blue);
colorAnimation.Duration = TimeSpan.FromSeconds(8);
colorAnimation.IterationBehavior = AnimationIterationBehavior.Forever;
ColorStop1.StartAnimation("Color", colorAnimation);
//Create Shadow
var visual0 = _compositor.CreateSpriteVisual();
visual0.Size = new Vector2(size.X + 2, size.Y + 2);
//Create drop shadow
DropShadow shadow = _compositor.CreateDropShadow();
shadow.BlurRadius = 5;
shadow.Offset = new Vector3(0, 0, 0);
shadow.Color = Colors.DarkGray;
//Associate shadow to visual
visual0.Shadow = shadow;
element.Children.InsertAtBottom(visual0);
//Create Rounded Rectangle
var roundedRect = _compositor.CreateRoundedRectangleGeometry();
roundedRect.Size = new Vector2(size.X, size.Y);
roundedRect.CornerRadius = new Vector2(7, 7);
var rectShape = _compositor.CreateSpriteShape(roundedRect);
rectShape.FillBrush = RGBrush;
rectShape.Offset = new Vector2(0f, 0f);
var visual = _compositor.CreateShapeVisual();
visual.Size = new Vector2(size.X, size.Y);
visual.Shapes.Add(rectShape);
element.Children.InsertAtTop(visual);
element.Opacity = 0.8f;
element.Size = visual.Size;
return(element);
}
private void canvas_PointerPressed(object sender, PointerRoutedEventArgs e)
{
isPressed = true;
ColorStop1.StartAnimation(nameof(ColorStop1.Color), color1Animation);
canvas_PointerMoved(sender, e);
}