如何在带有动画的winRT中绘制圆弧? [英] How to draw an arc in winRT with animation?
问题描述
我是WinRT和Blend的新手，我需要在WinRT应用程序中绘制具有绘制效果的数字1、2等.要求就像应用程序将绘制数字一样.
任何帮助将不胜感激.
谢谢.
我认为您需要拼凑几个情节提要以实现此目标，因此我真的建议您为此使用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>
上面的示例中没有双重动画，但是它们看起来像这样:
<Storyboard x:Name="myStoryboard">
<DoubleAnimation Duration="0:0:1"
Storyboard.TargetName="myImage"
Storyboard.TargetProperty="Opacity"
From="0" To="1" />
</Storyboard>
这是一项艰巨的工作，需要时间.我建议您先坐下来学习如何使用Blend，然后再使用情节提要.有很多很棒的教程，这是值得的.就个人而言，我倾向于让设计师提供动画方面的帮助，就像您在上面的故事板上所看到的那样，我不是动画专业人士-需要牢记很多，尤其是在应用程序性能方面.
我还想指出Modern UI(Windows Store Apps所需的设计语言)背后的一些主要思想，那就是保持真实的数字化.该应用程序不应模仿现实生活中的事物，这是没有意义的，因为它是一个应用程序，而不是现实".
从MSDN: 真实地数字化 充分利用数字媒体. 消除物理界限，创造比实际更高效，更轻松的体验. 拥抱我们是屏幕上像素的事实. 设计时使用大胆，充满活力和鲜明的色彩和图像，超越了现实世界的材料限制.
值得观看的视频: 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. Any help will be really appreciated. Thanks in advance. 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! 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:
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. The different easing functions are well explained here on MSDN There is no double animation in the examples above, but they look like this: 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. 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'. 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. Video worth watching: 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: 这篇关于如何在带有动画的winRT中绘制圆弧?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！<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>
<Storyboard x:Name="myStoryboard">
<DoubleAnimation Duration="0:0:1"
Storyboard.TargetName="myImage"
Storyboard.TargetProperty="Opacity"
From="0" To="1" />
</Storyboard>
<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>
