Search This Blog

Mind freaker Stuff

Please Visit my new blog http://www.mindfreakerstuff.com for new articles related to web and mobile designing.

Thursday, August 25, 2011

RotateTransform Animation with Ease wpf C#



In CS file


using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace simple_animation
{
       /// <summary>
       /// Interaction logic for MainWindow.xaml
       /// </summary>
       public partial class MainWindow : Window
       {
              public MainWindow()
              {
                     this.InitializeComponent();

                     // Insert code required on object creation below this point.
              }

              private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
              {
                     // TODO: Add event handler implementation here.
                     var ease = new PowerEase { EasingMode = EasingMode.EaseOut };

                     //DoubleAnimation(FromValue. ToValue, Duration)
                     DoubleAnimation myanimation = new DoubleAnimation
                             (0, 360, new Duration(TimeSpan.FromSeconds(3)));

                     //Adding Power ease to the animation
                     myanimation.EasingFunction = ease;
           
                     RotateTransform rt = new RotateTransform();
                                 
                     //  "img" is Image added in XAML
                     img.RenderTransform = rt;
                     img.RenderTransformOrigin = new Point(0.5, 0.5);
                     rt.BeginAnimation(RotateTransform.AngleProperty, myanimation );

              }
       }
}



XAML



<Window
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                x:Class="simple_animation.MainWindow"
                x:Name="Window"
                Title="MainWindow"
                Width="640" Height="480">

                <Grid x:Name="LayoutRoot">
                                <Image x:Name="img" Height="128" Source="sync.png" Stretch="Fill"    VerticalAlignment="Top" Margin="287,68,217,0"/>
                                <Button Content="Button" HorizontalAlignment="Left" Height="49" Margin="24,84,0,0" VerticalAlignment="Top" Width="117" Click="Button_Click"/>
                </Grid>
</Window>



===========================================================================

For animating button width Property

// Animate the Button's Width.
            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 75;
            myDoubleAnimation.To = 300;
            myDoubleAnimation.Duration =  new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Apply the animation to the button's Width property.
            aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation);       

1 comment: