Click here to Skip to main content
15,896,421 members
Articles / Programming Languages / C#

Combining Animations in Code in Silverlight

Rate me:
Please Sign up or sign in to vote.
4.62/5 (6 votes)
26 Nov 2011CPOL6 min read 20.9K   438   7  
This article explains to combine animations and easing functions to generate effects like the Les Paul (guitar) Google Doodle by Google and National Geographic channel’s Test your brain episode, etc.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging;

namespace CanvasExpt
{
    public partial class BounceAnimationPage : UserControl
    {
        DoubleAnimation dlAniBounceY ;
        //DoubleAnimation dlAniBounceX ;
        //PointAnimation dlAniRotateRadBrush;
        DoubleAnimation dlAniGradientOriginCenter;
        
        PlaneProjection plProjectionEllipse;

        DoubleAnimation dlAniProjZ;

        Storyboard stBoardBounce = new Storyboard();
        Point ptStart;
        
        public BounceAnimationPage()
        {
            InitializeComponent();
            sliderY.Maximum = canvas1.ActualHeight - myEllipse.ActualHeight;
            myEllipse.Visibility = System.Windows.Visibility.Collapsed;
           
            //sliderX.Visibility = System.Windows.Visibility.Collapsed;
            //sliderY.Visibility = System.Windows.Visibility.Collapsed;
            button1.Visibility = System.Windows.Visibility.Collapsed;

            plProjectionEllipse = new PlaneProjection();
            //plProjectionEllipse.RotationZ = 45;
            myEllipse.Projection = plProjectionEllipse;
            
            //radBrush = new RadialGradientBrush();
            //radBrush.GradientOrigin =  new Point(0.5,0);
            //radBrush.RadiusX = radBrush.RadiusY = .75;
            //radBrush.SpreadMethod = GradientSpreadMethod.Reflect;
            
            //GradientStop grStop1 =  new GradientStop();
            //grStop1.Color = Colors.White;
            //grStop1.Offset = 0.01;
            //radBrush.GradientStops.Add(grStop1);

            //grStop2 =  new GradientStop();
            //grStop2.Color = Colors.Green;
            //grStop2.Offset = 1;
            //radBrush.GradientStops.Add(grStop2);
            //myEllipse.Fill = radBrush;

            StoryBoardForBouncing();
            //sliderGradientOriginCenter.Value = 500;
        }
        //GradientStop grStop2;
        //RadialGradientBrush radBrush;
        DoubleAnimation dlAniShadow,dlAniShadowBlurRadius;
        public void StoryBoardForBouncing()
        {
            dlAniBounceY = new DoubleAnimation();
            //dlAniBounceX = new DoubleAnimation();
            dlAniProjZ = new DoubleAnimation();

            dlAniGradientOriginCenter = new DoubleAnimation();
            dlAniGradientOriginCenter.From = 0;
            dlAniGradientOriginCenter.To = 1000;
            dlAniGradientOriginCenter.Duration = TimeSpan.FromSeconds(2.8);

            Storyboard.SetTarget(dlAniGradientOriginCenter, sliderGradientOriginCenter);
            Storyboard.SetTargetProperty(dlAniGradientOriginCenter, new PropertyPath(Slider.ValueProperty));

            PowerEase powerEase = new PowerEase();
            powerEase.EasingMode = EasingMode.EaseOut;
            powerEase.Power = 2;
            dlAniGradientOriginCenter.EasingFunction = powerEase;
            
            dlAniShadow = new DoubleAnimation();
            dlAniShadow.From = 120;
            dlAniShadow.To = 5;
            dlAniShadow.Duration = TimeSpan.FromSeconds(2.8);

            BounceEase bEase = new BounceEase();
            bEase.EasingMode = EasingMode.EaseOut;
            bEase.Bounces = 5;
            //dlAniShadow.EasingFunction = bEase;
            Storyboard.SetTarget(dlAniShadow, sliderShadow);
            Storyboard.SetTargetProperty(dlAniShadow, new PropertyPath(Slider.ValueProperty));

            dlAniShadowBlurRadius = new DoubleAnimation();
            dlAniShadowBlurRadius.From = 50;
            dlAniShadowBlurRadius.To = 5;
            dlAniShadowBlurRadius.Duration = TimeSpan.FromSeconds(2.8);
            
            Storyboard.SetTarget(dlAniShadowBlurRadius, sliderShadowBlur);
            Storyboard.SetTargetProperty(dlAniShadowBlurRadius, new PropertyPath(Slider.ValueProperty));

            dlAniBounceY.From = 0;
            dlAniBounceY.To = sliderY.Maximum;
            dlAniBounceY.Duration = TimeSpan.FromSeconds(2);

            BounceEase bEaseY = new BounceEase();
            bEaseY.EasingMode = EasingMode.EaseOut;
            bEaseY.Bounces = 5;
            dlAniBounceY.EasingFunction = bEaseY;

            Storyboard.SetTarget(dlAniBounceY, sliderY);
            Storyboard.SetTargetProperty(dlAniBounceY, new PropertyPath(Slider.ValueProperty));
            

            //dlAniBounceX.From = 0;
            //dlAniBounceX.To = sliderX.Maximum;
            //dlAniBounceX.Duration = TimeSpan.FromSeconds(2.8);
            //dlAniBounceX.AutoReverse = true;

            //CircleEase backEase = new CircleEase();
            //backEase.EasingMode = EasingMode.EaseOut;
            //dlAniBounceX.EasingFunction = backEase;
            
            //Storyboard.SetTarget(dlAniBounceX, sliderX);
            //Storyboard.SetTargetProperty(dlAniBounceX, new PropertyPath(Slider.ValueProperty));

            dlAniProjZ.From = 0;
            dlAniProjZ.To = 750;
            dlAniProjZ.Duration = TimeSpan.FromSeconds(2.8);

            CircleEase backEaseProj = new CircleEase();
            backEaseProj.EasingMode = EasingMode.EaseOut;
            dlAniProjZ.EasingFunction = backEaseProj;

            Storyboard.SetTarget(dlAniProjZ, myEllipse.Projection);
            Storyboard.SetTargetProperty(dlAniProjZ, new PropertyPath(PlaneProjection.LocalOffsetZProperty));            

            //stBoardBounce.Children.Add(dlAniBounceX);
            stBoardBounce.Children.Add(dlAniBounceY);
            stBoardBounce.Children.Add(dlAniProjZ);
            stBoardBounce.Children.Add(dlAniGradientOriginCenter);
            stBoardBounce.Children.Add(dlAniShadow);
            stBoardBounce.Children.Add(dlAniShadowBlurRadius);

            stBoardBounce.Completed += new EventHandler(stBoardBounce_Completed);
        }
        public void StartBouncing(Point ptStart)
        {
            dlAniBounceY.From = ptStart.Y;
            dlAniBounceY.To = sliderY.Maximum;

            //dlAniBounceX.From = sliderX.Minimum;
            //dlAniBounceX.To = sliderX.Maximum;
            
            stBoardBounce.Begin();
            nVal = 0;
        }
        double nVal = 0;
        private void sliderX_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            Thickness thickness = myEllipse.Margin;
            thickness.Left = (double)sliderX.Value;
            //myEllipse.Margin = thickness;         
           
            //if (sliderX.Value!=0 && (int)sliderX.Value % 25 == 0)
            //    nVal = 0;
            //double dVal = nVal / 25.0;
            //nVal++;
            //radBrush.GradientOrigin = new Point(0.5, dVal);
        }
        private void sliderY_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            Thickness thick = myEllipse.Margin;
            thick.Top = (double)sliderY.Value;
            myEllipse.Margin = thick;
        }
        private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            ptStart = e.GetPosition(canvas1);
            Thickness thickness = myEllipse.Margin;
            
            ptStart.X -= myEllipse.ActualWidth / 2;
            ptStart.Y -= myEllipse.ActualHeight / 2;

            thickness.Left = ptStart.X ;
            thickness.Top = ptStart.Y ;            
            myEllipse.Margin = thickness;

            sliderY.Minimum = ptStart.Y; 
            sliderY.Maximum = canvas1.ActualHeight - myEllipse.ActualHeight;
            sliderY.Value = ptStart.Y;

            //sliderX.Minimum =  ptStart.X;
            //sliderX.Maximum = ptStart.X + 600;
            //sliderX.Value = ptStart.X;
            
            myEllipse.Visibility = System.Windows.Visibility.Visible;

            StartBouncing(ptStart);
        }
        void stBoardBounce_Completed(object sender, EventArgs e)
        {
            Storyboard stBoard = (Storyboard)sender;
            stBoard.Stop();

            Thickness thick = myEllipse.Margin;
            thick.Top = (double)dlAniBounceY.To;
            //thick.Left = (double)dlAniBounceX.To;
            myEllipse.Margin = thick;
            plProjectionEllipse.LocalOffsetZ = (double)dlAniProjZ.To;
            //radBrush.GradientOrigin = new Point(.5, 1);

            Point pointOrigin = RadBallBrush.GradientOrigin;
            pointOrigin.Y = (double)dlAniGradientOriginCenter.To / 500.0;

            if (1 < pointOrigin.Y && pointOrigin.Y < 2)
                pointOrigin.Y -= 1.0;
            else if (2 <= pointOrigin.Y && pointOrigin.Y < 3)
                pointOrigin.Y -= 2.0;
            else if (3 <= pointOrigin.Y && pointOrigin.Y < 4)
                pointOrigin.Y -= 3.0;
            RadBallBrush.GradientOrigin = pointOrigin;
            RadBallBrush.Center = pointOrigin;
            
        }
        public void onClose()
        {
        }
        
        public void Animate1()
        {
            Storyboard stBorad = new Storyboard();

            PlaneProjection plProjection = new PlaneProjection();
            //plProjection.RotationZ = 30;
            myEllipse.Projection = plProjection;

            DoubleAnimation dlAniRotX = new DoubleAnimation();
            dlAniRotX.From = -15;
            dlAniRotX.To = 15;
            dlAniRotX.Duration = TimeSpan.FromSeconds(2);

            Storyboard.SetTarget(dlAniRotX, plProjection);
            Storyboard.SetTargetProperty(dlAniRotX, new PropertyPath(PlaneProjection.RotationXProperty));
            stBorad.Children.Add(dlAniRotX);


            DoubleAnimation dlAniLocZ = new DoubleAnimation();
            //dlAniLocZ.To = -650;
            dlAniLocZ.To = 800;
            dlAniLocZ.Duration = TimeSpan.FromSeconds(2);
            Storyboard.SetTarget(dlAniLocZ, plProjection);
            Storyboard.SetTargetProperty(dlAniLocZ, new PropertyPath(PlaneProjection.LocalOffsetZProperty));


            //stBorad.Children.Clear();
            stBorad.Children.Add(dlAniLocZ);
            stBorad.Completed += new EventHandler(stBorad_Completed);
            stBorad.Begin();
        }
        void stBorad_Completed(object sender, EventArgs e)
        {

        }
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            stBoardBounce.Begin();
        }

        private void sliderShadow_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            if (sliderShadow != null)
                CircleShadow.ShadowDepth = (double)sliderShadow.Value;
        }

        private void sliderShadowBlur_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            if (sliderShadowBlur != null)
                CircleShadow.BlurRadius = (double)sliderShadowBlur.Value;
        }

        private void sliderGradientOriginCenter_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            Point pointOrigin = RadBallBrush.GradientOrigin;
            pointOrigin.Y = (double)sliderGradientOriginCenter.Value / 500.0;

            //if (-1 <= pointOrigin.Y && pointOrigin.Y < -2)
            //    pointOrigin.Y += -1.0;
            //else if (-2 <= pointOrigin.Y && pointOrigin.Y < -3)
            //    pointOrigin.Y += 2.0;
            //else if (-3 <= pointOrigin.Y && pointOrigin.Y < -4)
            //    pointOrigin.Y += 3.0;

            if (1 < pointOrigin.Y && pointOrigin.Y < 2)
                pointOrigin.Y -= 1.0;
            else if (2 <= pointOrigin.Y && pointOrigin.Y < 3)
                pointOrigin.Y -= 2.0;
            else if (3 <= pointOrigin.Y && pointOrigin.Y < 4)
                pointOrigin.Y -= 3.0;

            //if (pointOrigin.Y < 0)
              //  pointOrigin.Y *= -1;

            RadBallBrush.GradientOrigin = pointOrigin;
            RadBallBrush.Center = pointOrigin;

            //RadBallBrush.RadiusX = RadBallBrush.RadiusY = pointOrigin.Y;
        }
    }
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
India India
I have a PhD in pure mathematics from HCU. I have been programming in Microsoft technologies for more than a decade. My interests are C#, WPF Silverlight, MFC, COM.

Comments and Discussions