Question

I’m trying to do a random tile flip animation in my application from the codebehind. A timer should cause a ranodom tile to flip every 3 seconds. I’ve been searching the internet on how to perform such an animation, but I can’t seem to find anything that works.

The Views are as follows with one container view holding the two views that are supposed to be flipped with each other. One is an image, and in the other view theres two textblocks

 //Create single news container
            Canvas container = new Canvas
                {
                    Height = viewHeight,
                    Width = viewWidth,
                    MaxWidth = viewWidth,
                    MaxHeight = viewHeight,
                    Margin = new Thickness(viewX, viewY, 0, 0)
                };

            //Create image container
            Canvas imageContainer = new Canvas
                {
                    Height = viewHeight,
                    Width = viewWidth,
                    MaxWidth = viewWidth,
                    MaxHeight = viewHeight,
                    Background = new SolidColorBrush(Colors.Transparent),
                    Visibility = Visibility.Collapsed
                };

            //Create title and leadtext container
            Canvas textContainer = new Canvas
                {
                    Height = viewHeight,
                    Width = viewWidth,
                    MaxWidth = viewWidth,
                    MaxHeight = viewHeight,
                    Background = GetCategoryColor(news.Cat[0]),
                    Visibility = Visibility.Visible,
                };

            //Set image source and crop image accordingly
            var image = new BitmapImage(new Uri(news.ImageUrl[0]));
            var viewImage = new Image
                {
                    Source = image,
                    Height = viewHeight,
                    Width = viewWidth,
                    MaxWidth = viewWidth,
                    MaxHeight = viewHeight,
                    Stretch = Stretch.UniformToFill
                };

            //Set header view
            TextBlock title = new TextBlock
                {
                    MaxHeight = titleHeight,
                    MaxWidth = titleWidth,
                    Height = titleHeight,
                    Width = titleWidth,
                    Text = news.Title,
                    Margin = new Thickness(titleX, titleY, 0, 0),
                    Padding = new Thickness(framePadding),
                    Foreground = new SolidColorBrush(Colors.White),
                    TextWrapping = TextWrapping.Wrap,
                    FontWeight = FontWeights.Bold,
                    FontSize = 22,
                    FontFamily = new FontFamily("Calibri"),
                    TextTrimming = TextTrimming.WordEllipsis
                };

            //Set ingress view
            TextBlock leadText = new TextBlock
                {
                    MaxHeight = leadTextHeight,
                    MaxWidth = leadTextWidth,
                    Height = leadTextHeight,
                    Width = leadTextWidth,
                    Margin = new Thickness(leadTextX, leadTextY, 0, 0),
                    Padding = new Thickness(framePadding, 0, framePadding, framePadding),
                    Text = news.LeadText,
                    Foreground = new SolidColorBrush(Colors.White),
                    TextWrapping = TextWrapping.Wrap,
                    FontSize = 18,
                    FontFamily = new FontFamily("Calibri"),
                    TextTrimming = TextTrimming.WordEllipsis
                };

            //Add subviews to container and viewlist
            imageContainer.Children.Add(viewImage);
            textContainer.Children.Add(title);
            textContainer.Children.Add(leadText);
            container.Children.Add(imageContainer);
            container.Children.Add(textContainer);
            _viewsList.Add(container);
            //Add single news container to main content canvas
            ContentCanvas.Children.Add(container);

Hope somebody can help me here!

Answer 1

Found of course an answer to my question a couple of minutes after I created the question, and heres the answer (http://codepaste.net/xyo2ib)

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
 
public class Flipper
{
    public enum Directions { LeftToRight, RightToLeft }
 
    public static void FlipItem(UIElement over, UIElement under, Directions direction = Directions.LeftToRight, int duration = 200)
    {
        // setup visible plane
        over.Visibility = Visibility.Visible;
        over.Projection = new PlaneProjection { CenterOfRotationY = 0 };
 
        // setup hidden plane
        under.Visibility = Visibility.Collapsed;
        under.Projection = new PlaneProjection { CenterOfRotationY = 0 };
 
        // gen storyboard
        var _StoryBoard = new System.Windows.Media.Animation.Storyboard();
        var _Duration = TimeSpan.FromMilliseconds(duration);
 
        // add animation: hide-n-show items
        _StoryBoard.Children.Add(CreateVisibility(_Duration, over, false));
        _StoryBoard.Children.Add(CreateVisibility(_Duration, under, true));
 
        // add animation: rotate items
        if (direction == Directions.LeftToRight)
        {
            _StoryBoard.Children.Add(CreateRotation(_Duration, 0, -90, -180, (PlaneProjection)over.Projection));
            _StoryBoard.Children.Add(CreateRotation(_Duration, 180, 90, 0, (PlaneProjection)under.Projection));
        }
        else if (direction == Directions.RightToLeft)
        {
            _StoryBoard.Children.Add(CreateRotation(_Duration, 0, 90, 180, (PlaneProjection)over.Projection));
            _StoryBoard.Children.Add(CreateRotation(_Duration, -180, -90, 0, (PlaneProjection)under.Projection));
        }
 
        // start animation
        _StoryBoard.Begin();
    }
 
    private static DoubleAnimationUsingKeyFrames CreateRotation(TimeSpan duration, double degreesFrom, double degreesMid, double degreesTo, PlaneProjection projection)
    {
        var _One = new EasingDoubleKeyFrame { KeyTime = new TimeSpan(0), Value = degreesFrom, EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseIn } };
        var _Two = new EasingDoubleKeyFrame { KeyTime = new TimeSpan(duration.Ticks / 2), Value = degreesMid, EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseIn } };
        var _Three = new EasingDoubleKeyFrame { KeyTime = new TimeSpan(duration.Ticks), Value = degreesTo, EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseOut } };
 
        var _Animation = new DoubleAnimationUsingKeyFrames { BeginTime = new TimeSpan(0) };
        _Animation.KeyFrames.Add(_One);
        _Animation.KeyFrames.Add(_Two);
        _Animation.KeyFrames.Add(_Three);
        Storyboard.SetTargetProperty(_Animation, new PropertyPath("RotationY"));
        Storyboard.SetTarget(_Animation, projection);
        return _Animation;
    }
 
    private static ObjectAnimationUsingKeyFrames CreateVisibility(Duration duration, UIElement element, bool show)
    {
        var _One = new DiscreteObjectKeyFrame { KeyTime = new TimeSpan(0), Value = (show ? Visibility.Collapsed : Visibility.Visible) };
        var _Two = new DiscreteObjectKeyFrame { KeyTime = new TimeSpan(duration.TimeSpan.Ticks / 2), Value = (show ? Visibility.Visible : Visibility.Collapsed) };
 
        var _Animation = new ObjectAnimationUsingKeyFrames { BeginTime = new TimeSpan(0) };
        _Animation.KeyFrames.Add(_One);
        _Animation.KeyFrames.Add(_Two);
        Storyboard.SetTargetProperty(_Animation, new PropertyPath("Visibility"));
        Storyboard.SetTarget(_Animation, element);
        return _Animation;
    }
}