3

我正在尝试从代码隐藏在我的应用程序中做一个随机的瓷砖翻转动画。计时器应该使随机图块每 3 秒翻转一次。我一直在互联网上搜索如何执行这样的动画，但我似乎找不到任何有效的方法。

视图如下，一个容器视图包含两个应该相互翻转的视图。一个是图像，在另一个视图中有两个文本块

 //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);

希望有人可以在这里帮助我！

4

2 回答 2

6

在我创建问题几分钟后，当然找到了我的问题的答案，这是答案（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;
    }
}
于 2012-11-18T18:28:26.130 回答
1

为什么不直接使用来自http://phone.codeplex.com/的 Windows Phone 工具包中的 HubTile 控件

您还可以使用http://www.telerik.com/products/windows-phone/overview/all-controls/hubtile.aspx上的 Telerik 提供的 HubTile 控件来实现此目的。

于 2012-11-19T02:38:43.670 回答