如何用动画在winRT中绘制圆弧？

Question

我是WinRT和Blend的新手,我需要在WinRT应用程序中绘制数字1,2等绘图效果.要求就像应用程序将绘制数字.

任何帮助将非常感激.

提前致谢.

Answer 1

我认为你需要拼凑几个故事板来实现这一目标,我真的建议你使用Blend来实现这一点!

打开一个空白项目,在对象和时间线下有一个加号,点击它并添加一个新的故事板.将故事板线的黄色条向前移动几毫秒.画一段动画,点击开始录制并稍微移动一下.停止录音.继续这样做,直到你有你想要的.AS用于模仿绘图.分解你想要的样子,制作数字所包含的所有单独的部分,并将它们的不透明度设置为O.我建议使用关键帧(用于移动)和双重动画用于不透明度.

这是一条沿着曲线的路径的快速演示,我把它做得非常快,所以它远离完美,但它是为了演示开始和停止以及它们如何一起看:

<Page
x:Class="App10.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" FontFamily="Global User Interface">
<Page.Resources>
    <Storyboard x:Name="StoryboardA">
        <PointAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.StartPoint)" Storyboard.TargetName="path">
            <EasingPointKeyFrame KeyTime="0:0:0.3" Value="107.647,394.591"/>
            <EasingPointKeyFrame KeyTime="0:0:0.6" Value="147.75,352.713"/>
            <EasingPointKeyFrame KeyTime="0:0:0.9" Value="197.45,311.391"/>
            <EasingPointKeyFrame KeyTime="0:0:1.2" Value="268.45,251.392"/>
            <EasingPointKeyFrame KeyTime="0:0:1.4" Value="346.45,196.392"/>
            <EasingPointKeyFrame KeyTime="0:0:1.6" Value="417.45,151.392"/>
            <EasingPointKeyFrame KeyTime="0:0:1.8" Value="503.841,99.7321"/>
            <EasingPointKeyFrame KeyTime="0:0:2" Value="604.45,53.3924"/>
            <EasingPointKeyFrame KeyTime="0:0:2.3" Value="705.45,13.392"/>
        </PointAnimationUsingKeyFrames>
        <PointAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(LineSegment.Point)" Storyboard.TargetName="path">
            <EasingPointKeyFrame KeyTime="0:0:0.3" Value="55.8129,445.539"/>
            <EasingPointKeyFrame KeyTime="0:0:0.6" Value="95.9156,403.661"/>
            <EasingPointKeyFrame KeyTime="0:0:0.9" Value="139.796,364.539"/>
            <EasingPointKeyFrame KeyTime="0:0:1.2" Value="198.646,311.319"/>
            <EasingPointKeyFrame KeyTime="0:0:1.4" Value="266.536,258.09"/>
            <EasingPointKeyFrame KeyTime="0:0:1.6" Value="330.282,210.352"/>
            <EasingPointKeyFrame KeyTime="0:0:1.8" Value="408.248,157.542"/>
            <EasingPointKeyFrame KeyTime="0:0:2" Value="500.776,106.108"/>
            <EasingPointKeyFrame KeyTime="0:0:2.3" Value="597.831,60.216"/>
        </PointAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Path Data="M73.5,639.5 C73.5,639.5 539.5,33.5 1289.5,79.5 L1535,101.5" HorizontalAlignment="Left" Height="572.492" Margin="68.5,72.008,-174,0" Stretch="Fill" Stroke="Red" StrokeThickness="10" UseLayoutRounding="False" VerticalAlignment="Top" Width="1471.5"/>
    <Path x:Name="path" HorizontalAlignment="Left" Height="507.972" Margin="66.05,137.358,0,0" Stroke="#FFFFE100" StrokeThickness="15" UseLayoutRounding="False" VerticalAlignment="Top" Width="712.95">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="53.45,448.392">
                    <LineSegment Point="7.50001,500.472"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
</Grid>

这是一个它看起来如何的图像,它是黄色的东西 - 弯曲的运动只是一个例子,表明你可以拼凑起来创造你想要的任何运动.称为缓和功能的东西甚至可以为你做到这一点,见下图.

以下是可用的缓动功能,与它们一起使用,结合故事板中的项目以创建所需的效果.

在MSD N 上可以很好地解释不同的缓动函数

上面的示例中没有双动画,但它们看起来像这样:

 <Storyboard x:Name="myStoryboard">
                        <DoubleAnimation Duration="0:0:1"                                 
                            Storyboard.TargetName="myImage"             
                            Storyboard.TargetProperty="Opacity"            
                            From="0" To="1" />
                    </Storyboard>

这是一项很重要的工作,需要时间.我建议你坐下来学习如何使用Blend并在使用之前使用故事板.那里有许多很棒的教程,值得花时间.就个人而言,我倾向于让设计师帮助制作动画,正如你在上面的故事板中看到的那样,我不是动画专家 - 有很多要记住,特别是在应用程序性能方面.

我还想指出现代用户界面背后的一些主要思想,即Windows应用商店应用程序所需的设计语言,那就是保持真实的数字化.该应用程序不应该模仿现实生活中的东西,没有任何意义,因为它是一个应用程序,而不是"现实".

来自MSDN: 真正的数字化 充分利用数字媒体.消除物理边界,创造比现实更高效,更轻松的体验.接受我们在屏幕上是像素的事实.设计大胆,充满活力,清晰的色彩和图像,超越了现实世界的材料.

视频值得关注: http ://channel9.msdn.com/Events/Ch9Live/Channel-9-Live-at-Tech-Ed-Europe-2012/Panel-Modern-UI-Development

所以考虑一下,也许你不需要绘图动作.也许只是快速淡入,如下:

<Page
x:Class="App10.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" FontFamily="Global User Interface">
<Page.Resources>
    <Storyboard x:Name="StoryboardB">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Page.Resources>

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <TextBlock x:Name="textBlock" HorizontalAlignment="Left" Height="145" Margin="465,386,0,0" TextWrapping="Wrap" Text="AB" VerticalAlignment="Top" FontSize="50" Width="343"/>
</Grid>

Answer 2

WinRT XAML Toolkit有一个RingSlice控件,您也可以使用它并为其StartAngle/EndAngle设置动画,以便轻松地将圆弧动画变为圆形.不过,请注意这两者和Iris'的解决方案需要上的动画这是一个安全设置EnableDependentAnimation告诉你,他们可能不表现非常好,因为它们需要的代码在UI线程中运行,并会造成布局重新计算这是慢,尤其是在复杂的场景.有一两件事,如果它原来慢(尤其是在诸如ARM那些慢的设备),我会尝试将具有相同的中心点,以覆盖更小的电弧和围绕中心点的RenderTransform动画旋转它们来获得同样的效果.这会有点复杂,但有可能跑得更快.您可以平衡UI线程上的动画成本与覆盖多个弧并编排其动画序列的成本.