用动画波填充圆圈 [英] Fill circle with animating waves

问题描述

在我的Windows手机应用程序中有一个圆圈（椭圆）



< Ellipse x：Name =AniCircleGrid.Column =1Grid.Row =0VerticalAlignment =Top

Stroke ={StaticResource PhoneAccentBrush}

StrokeThickness =4

Width =240

身高=240/>



i想用类似于此的动画波浪填充圆圈



我尝试了什么：



i跟着这个https://stackoverflow.com/questions/22044041 / animate-circles-fill-using-sine-wave解决方案但无法进入Windows Phone 8.1

have a circle (Ellipse) in my windows phone app

<Ellipse x:Name="AniCircle" Grid.Column="1" Grid.Row="0" VerticalAlignment="Top"
Stroke="{StaticResource PhoneAccentBrush}"
StrokeThickness="4"
Width="240"
Height="240" />

i want to fille circle with animating waves similar to this

What I have tried:

i followed this https://stackoverflow.com/questions/22044041/animate-circles-fill-using-sine-wave solution but unable to get in windows phone 8.1

推荐答案

你被困在哪里？它是WPF VisualBrush吗？根据文档 [ ^ ]：

Where are you stuck? Is it the WPF VisualBrush? According to the documentation[^]:

Quote：

使用Visual绘制区域。

Paints an area with a Visual.

现在，谷歌搜索是第一个看的地方。以下是我使用的搜索： uwp visualbrush - Google搜索 [ ^ ]



第一个搜索结果如下：复合笔刷 - UWP app developer Microsoft Docs [ ^ ]：

Now, Google Search is the first place to look. Here is the search that I used: uwp visualbrush - Google Search[^]

First search result was this: Composition brushes - UWP app developer | Microsoft Docs[^]:

Quote：

画笔用它的输出绘制视觉区域。不同的画笔有不同类型的输出。

A brush paints the area of a Visual with its output. Different brushes have different types of output.

这听起来和我们想要的完全一样。看起来你可以使用两种不同的画笔：



1. CompositionSurfaceBrush：

This sounds exactly like what we want. It looks like there are two different brushes that you could use:

1. CompositionSurfaceBrush:

Quote：

使用ICompositionSurface中的像素绘制SpriteVisual。

Paints a SpriteVisual with pixels from an ICompositionSurface.

2. CompositionEffectBrush：

2. CompositionEffectBrush:

引用：

刷一个用CompositionEffectFactory.CreateBrush方法创建的效果的画笔。

A brush contianing an effect created with the CompositionEffectFactory.CreateBrush method.

现在我们知道我们是什么我们正在寻找，我们可以优化我们的Google搜索，了解如何使用这些UWP画笔的示例： CompositionSurfaceBrush xaml示例 - Google搜索 [ ^ ]



有一个数字在搜索结果中可供选择的有用示例。以下是其中之一：工作使用画笔和内容 - XAML和Visual Layer Interop，第一部分 - 构建适用于Windows的WindowsBuilding应用程序的应用程序 [ ^ ]



这是一个在UWP应用程序中使用Storyboard动画的视频（从我们上面的第一次搜索开始）： UWP：使用故事板的元素动画 - YouTube [ ^ ]



现在您需要做的就是查看上面的链接，或者查看两个搜索中的更多链接，试用每个部分和让他们工作，然后你将准备好如何工作转换代码。这是我为帮助您完成任务所必须做的旅程。

Now that we know WHAT we are looking for, we can refine our Google Search for examples of how to use these UWP brushes: CompositionSurfaceBrush xaml example - Google Search[^]

There are a number of useful examples to choose from in the search results. Here is one of them: Working with Brushes and Content – XAML and Visual Layer Interop, Part One - Building Apps for WindowsBuilding Apps for Windows[^]

And here is a video of using Storyboard animation in a UWP app (from the very first search we did above): UWP: Animation of Elements with Using the Storyboard - YouTube[^]

Now all you need to do is check out the above links, maybe look at some more links from the two searches, try out each of the parts and get them working, then you will be ready to work out how to convert the code. This is the journey that I would have to make to help you with your task.

这篇关于用动画波填充圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！