[英]Avalonia: How to animate points in path using code
我正在嘗試弄清楚如何在 Avalonia 中制作動畫。
我有一條包含 4 個線段的路徑,我想將每個點設置為一個新的 position。 在 WPF 我已經這樣做了:
public void AnimatePoints(PointCollection pts, TimeSpan timespan, bool randomized = true, Action onFinished = null)
{
Points = PointCollection.Parse(PathString);
//PathFigure needs an animation too (for the start point), otherwise the first point always stays in one place
var pfa = new PointAnimation(pts[0], timespan);
if (onFinished != null)
{
pfa.Completed += (sender, args) => onFinished();
}
PathFigure.BeginAnimation(PathFigure.StartPointProperty, pfa);
for (int i = 0; i < pts.Count; i++)
{
var pa = new PointAnimation(pts[i], timespan);
if (randomized)
{
LineSegments[i].BeginAnimation(LineSegment.PointProperty, pa);
}
else
{
LineSegments[i].BeginAnimation(LineSegment.PointProperty, pa);
}
}
}
如何使用代碼在 Avalonia 中做同樣的事情? 我嘗試過使用 PathTransition 但 PathFigure 和 LineSegments 都不是動畫的。
我不認為有內置的動畫師,但在 Avalonia 你可以做這樣的自定義動畫師:
public class MorphAnimator : Animator<Geometry>
{
public override Geometry Interpolate(double progress, Geometry oldValue, Geometry newValue)
{
var clone = (oldValue as PathGeometry).ClonePathGeometry();
Morph.To(clone, newValue as PathGeometry, progress);
return clone;
}
}
並注冊
Animation.RegisterAnimator<MorphAnimator>(prop => typeof(Geometry).IsAssignableFrom(prop.PropertyType));
示例代碼: https://github.com/wieslawsoltes/MorphingDemo
您還可以從 Xaml 制作自定義動畫師:
<UserControl
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:pages="clr-namespace:RenderDemo.Pages"
x:Class="RenderDemo.Pages.CustomAnimatorPage"
MaxWidth="600">
<Grid>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.Styles>
<Style Selector="TextBlock">
<Style.Animations>
<Animation Duration="0:0:1" IterationCount="Infinite">
<KeyFrame Cue="0%">
<Setter Property="Text" Value="" Animation.Animator="{x:Type pages:CustomStringAnimator}"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Text" Value="0123456789" Animation.Animator="{x:Type pages:CustomStringAnimator}"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
</TextBlock.Styles>
</TextBlock>
</Grid>
</UserControl>
動畫師:
using Avalonia.Animation.Animators;
namespace RenderDemo.Pages
{
public class CustomStringAnimator : Animator<string>
{
public override string Interpolate(double progress, string oldValue, string newValue)
{
if (newValue.Length == 0) return "";
var step = 1.0 / newValue.Length;
var length = (int)(progress / step);
var result = newValue.Substring(0, length + 1);
return result;
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.