如何用动画在winRT中绘制弧线? [英] How to draw an arc in winRT with animation?

问题描述

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

I am a newbie to WinRT and Blend and I need to draw digits 1, 2 etc with drawing effect in my WinRT application. The requirement is like the application will be drawing the digit.

任何帮助将不胜感激.

提前致谢.

推荐答案

我认为您需要将几个故事板拼凑起来才能实现这一点，我真的建议您为此使用 Blend！

I think you would need to piece together a couple of storyboards to achieve that, and I would really recommend that you use Blend for that!

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

Open a blank project, under objects and timeline there is a plus, click on it and add a new story board. Move the yellow bar of the storyboard line a few milliseconds forward. Draw a piece of the animation , click start recording and move that piece a little bit. Stop recording. Keep doing that piece by piece until you have what you want. AS for imitating drawing. Break down how you you want it to be, make all the separate pieces the digit will consist of and set their opacity to O. I would recommend using both keyframe (for movement) and double animation for the opacity.

这是一条沿着曲线的路径的快速演示，我制作得非常快，所以离完美还很远，但它是为了演示开始和停止以及它们如何组合在一起:

Here is a quick demo of a piece of path following a curved line, I made this really fast so it's far away from perfect, but it's to demonstrate the start and stop and how they look together:

<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>

这是它的外观图像，它是移动的黄色物体 - 弯曲的运动只是一个示例，表明您可以拼凑在一起以创建您想要的任何运动.一种叫做缓动函数的东西甚至可以为你做到这一点，见下图.

Here is an image of how it looks like, its the yellow thing that moves - the curved movement is just an example to show you can piece together to create any movement you want. Something called easing function can even do this for you, see image below.

这里有可用的缓动功能，您可以尝试使用它们，结合故事板中的项目来创建所需的效果.

Here are easing functions available, play around with them, in combination with the items in the storyboard to create the desired effect.

MSD 上对不同的缓动函数进行了很好的解释N

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

There is no double animation in the examples above, but they look like this:

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

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

It's a big job, and will take time. And I would recommend that you sit down and learn how to use Blend and work with storyboards before you do that. There are many great tutorials out there, and it will be worth the time. Personally I tend to let a designer help out with the animations, as you might see in the storyboard above, I'm not a pro at animations - there is a lot to keep in mind, in particular in regards to the app performance.

我还想指出现代 UI 背后的一些主要思想，这是 Windows 应用商店应用程序所需的设计语言，即保持真实的数字化.该应用程序不应模仿现实生活中的事物，没有意义，因为它是一个应用程序而不是现实".

I would also like to point out some of the main ideas behind the Modern UI , the required design language for Windows Store Apps, and that is to stay authentically digital. The app should not mimic real life things, makes no sense as it is an app and not 'reality'.

来自 MSDN:真正的数字化充分利用数字媒体.消除物理界限，创造比现实更高效、更轻松的体验.接受我们是屏幕上的像素这一事实.设计大胆、鲜艳、明快的色彩和图像，超越现实世界材料的限制.

From MSDN: Be authentically digital Take full advantage of the digital medium. Remove physical boundaries to create experiences that are more efficient and effortless than reality. Embrace the fact that we are pixels on a screen. Design with bold, vibrant and crisp colors and images that go beyond the limits of real world material.

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

所以考虑一下，也许您不需要绘制动作.也许只是快速淡入，就像这样:

So think about that, and maybe you don't need a drawing motion. Maybe just a quick fade in, like so:

<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>

这篇关于如何用动画在winRT中绘制弧线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！