user1237131
user1237131

Reputation: 1863

Image flip animation in windows 8?

I need to show the images continuously like projection flip animation like the below link having sample.

http://www.silverlightbuzz.com/2009/10/14/using-the-3d-tools-to-animate-in-blend/

How to implement the above sample second animation .There are two types of animations we can see in above link .How to implement second one in windows 8 like that? The dlls System.Windows.Interactivity and Microsoft.Expression.Interactions are n't useful in windows 8.Then how to do this animation in windows 8?

EDIT:

<UserControl.Resources>
        <Storyboard x:Name="Storyboard1" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01.5000000" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:02" Value="90"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="-90"/>
                <EasingDoubleKeyFrame KeyTime="00:00:02" Value="-90"/>
                <EasingDoubleKeyFrame KeyTime="00:00:02.5000000" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:03.5000000" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle1" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
                <EasingDoubleKeyFrame KeyTime="00:00:03.5000000" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:04" Value="90"/>
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="-90"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
            </DoubleAnimationUsingKeyFrames>

        </Storyboard>
    </UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="Black">


            <Rectangle x:Name="rectangle1" RadiusX="12" RadiusY="12" Height="300" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300">
                <Rectangle.Projection>
                    <PlaneProjection RotationX="-90"/>
                </Rectangle.Projection>
                <Rectangle.Fill>
                    <ImageBrush ImageSource="/Assets/7.png"/>
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle x:Name="rectangle" RadiusX="12" RadiusY="12" Height="300" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300">
                <Rectangle.Projection>
                    <PlaneProjection RotationX="-90"/>
                </Rectangle.Projection>
                <Rectangle.Fill>
                    <ImageBrush ImageSource="/Assets/8.png"/>
                </Rectangle.Fill>
            </Rectangle>




        <Button x:Name="StartAnimation" 
                Content="Start Animation"

                Grid.Row="1" 
                Width="163"
                Height="61" Margin="0,65,0,24" Click="StartAnimation_Click" />

    </Grid>

Upvotes: 1

Views: 739

Answers (1)

loop
loop

Reputation: 9242

link that you should follow..it will tell you how make storyboard for animation ..and when you save your storyboard in blend then a stoyboard will automatically come in page.resources section and you can begin it in your code behind whereever you want to..just right'' StoryboardName.begin();

i ma giving you this link it is very difficult to give you all information step by step as it requires ui use..hope this helps you..

ok fine i have done something that might helps you..like i have binded your rectangle fill to a property that you can change at any time through code .like you can use dispatchertimer and after fixed interval you can change the image of your rectangle like this..

<Rectangle x:Name="rectangle1" RadiusX="12" RadiusY="12" Height="300" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300">
        <Rectangle.Projection>
            <PlaneProjection RotationX="-90"/>
        </Rectangle.Projection>
        <Rectangle.Fill>
            <ImageBrush ImageSource="{Binding hello1}"/>
        </Rectangle.Fill>
    </Rectangle>

in your page .cs do this..

public sealed partial class MainPage : Page , INotifyPropertyChanged
{


    public MainPage()
    {
        this.InitializeComponent();
        DispatcherTimerSetup();
     //   hello1 = "/Assets/4.jpeg";
         hello1 = new ImageBrush();
        hello1.ImageSource =
            new BitmapImage(
                new Uri(BaseUri, "Assets/1.jpg")
            );

        this.DataContext = this;

    }

    DispatcherTimer dispatcherTimer;
    DateTimeOffset startTime;
    DateTimeOffset lastTime;
    DateTimeOffset stopTime;
    int timesTicked = 1;
    int timesToTick = 10;

    public void DispatcherTimerSetup()
    {
        dispatcherTimer = new DispatcherTimer();
        dispatcherTimer.Tick += dispatcherTimer_Tick;
        dispatcherTimer.Interval = new TimeSpan(0, 0, 1);
        //IsEnabled defaults to false
  //      TimerLog.Text += "dispatcherTimer.IsEnabled = " + dispatcherTimer.IsEnabled + "\n";
        startTime = DateTimeOffset.Now;
        lastTime = startTime;
    //    TimerLog.Text += "Calling dispatcherTimer.Start()\n";
        dispatcherTimer.Start();
        //IsEnabled should now be true after calling start
      //  TimerLog.Text += "dispatcherTimer.IsEnabled = " + dispatcherTimer.IsEnabled + "\n";
    }

    void dispatcherTimer_Tick(object sender, object e)
    {
        rectangle.Fill = hello1;
    }


    private ImageBrush hello;
    public ImageBrush hello1
    {
        get
        {
            return hello;
        }
        set
        {
            hello = value;
            FirePropertyChanged("hello1");
        }
    }


    /// <summary>
    /// Invoked when this page is about to be displayed in a Frame.
    /// </summary>
    /// <param name="e">Event data that describes how this page was reached.  The Parameter
    /// property is typically used to configure the page.</param>


    private void StartAnimation_Click_1(object sender, RoutedEventArgs e)
    {
        Storyboard1.Begin();
      //  Storyboard1.GetCurrentTime =
      //  Storyboard1.
      //  double sd = Storyboard1.GetCurrentTime;

    }


    public event PropertyChangedEventHandler PropertyChanged;
    protected void FirePropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

}

you can modify it according to your need..hope this will help you..

Upvotes: 1

Related Questions