Recreate real software animation (Lingo)

3 weeks ago 27
ARTICLE AD BOX

I'm creating the Lingo game from TV (Holland). Just the last details are the animations. The balls are build up as as grid, Border, Label and 2 Polygons for top and down. The Background and "Yellow overlay" is filled with an Gradient. Now it is just a simple hide and show animation for the the Border. But it's not playfull tho..

Can I have some help to achive this? I thought someting like animate the stop and rotate it at the same time? Thanks in advance

Current animation

RadialGradientBrush ball = new RadialGradientBrush { GradientOrigin = new Point(0.6, 0.2) }; GradientStop stop1 = new GradientStop(Colors.Blue, 0.0); GradientStop stop2 = new GradientStop(Colors.DarkBlue, 0.8); ball.GradientStops.Add(stop1); ball.GradientStops.Add(stop2); Overlay.Background = Blue_ball; await Task.Delay(100); SoundPlayer Ball_remove = new SoundPlayer { Stream = Properties.Resources.Ball_remove }; Ball_remove.Play(); DoubleAnimation ca = new DoubleAnimation() { From = 1.0, To = 0.0, Duration = new Duration(TimeSpan.FromMilliseconds(75)), RepeatBehavior = new RepeatBehavior(3.0), AutoReverse = true }; Storyboard.SetTarget(ca, Overlay); Storyboard.SetTargetProperty(ca, new PropertyPath("Opacity")); Storyboard sb = new Storyboard(); sb.Children.Add(ca); sb.Begin();

Gradient fill for the ball

<LinearGradientBrush x:Name="bg" EndPoint="0.5,1" StartPoint="0.5,0"> <LinearGradientBrush.Transform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </LinearGradientBrush.Transform> <LinearGradientBrush.RelativeTransform> <TransformGroup> <ScaleTransform CenterY="34" CenterX="0" ScaleX="17" ScaleY="1"/> <SkewTransform CenterX="0.5" CenterY="0.5"/> <RotateTransform CenterX="0.5" CenterY="0.5"/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </LinearGradientBrush.RelativeTransform> <GradientStop x:Name="stop1" Color="#FFF8D328" Offset="0"/> <GradientStop Color="#FF523F0E" Offset="1"/> </LinearGradientBrush>

Code for the ball

Grid Ball_base = new Grid() { Background = new SolidColorBrush(Colors.Transparent), Width = 118, Height = 118, }; Border Ball_border = new Border { BorderThickness = new Thickness(5), BorderBrush = new SolidColorBrush(Colors.Transparent), Background = Blue_ball, CornerRadius = new CornerRadius(100), Width = 118, Height = 118 }; Label Ball_label = new Label { Height = 118, FontFamily = new FontFamily("Microsoft Sans Serif"), Content = 99, HorizontalAlignment = HorizontalAlignment.Stretch, HorizontalContentAlignment = HorizontalAlignment.Center, VerticalContentAlignment = VerticalAlignment.Center, Margin = new Thickness(0, 0, 0, 0), FontSize = 120, Foreground = new SolidColorBrush(Colors.White), Background = null, }; Polygon Up = new Polygon { Fill = new SolidColorBrush(Colors.Transparent), HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Top, Margin = new Thickness(10), }; Polygon Down = new Polygon { Fill = new SolidColorBrush(Colors.Transparent), HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Bottom, Margin = new Thickness(10), }; Point Point1 = new Point(0, 0); Point Point2 = new Point(30, 00); Point Point3 = new Point(15, 15); PointCollection Polygones = new PointCollection { Point1, Point2, Point3 }; Up.Points = Polygones; Down.Points = Polygones; RotateTransform myRotateTransform = new RotateTransform { CenterX = 15, CenterY = 7, };
Read Entire Article