آموزش ساخت پروگرس بار همراه با انیمیشن در WPF

اگر دوست دارید بدونید که پروگرس بار های دایره چطوری ساخته میشن کافیه این پست رو دنبال کنید.

قطعا بارها شده پروگرس بارهای مختلفی رو دیدید و دوست داشتید که خودتون هم یکیش رو بسازید و ولی نمیدونستید که چطور همچین انیمیشن های جذابی رو پیاده سازی کنید.

چون من در پلتفرم WPF برنامه نویسی میکنم این پست در محیط Visual Studio و پلتفرم WPF پیاده سازی میشه.

من قصد دارم این پروگرس بار رو پیاده سازی کنم:

اول باید این رو انالیز کنیم ببینیم چه اتفاقی داره میوفته تا بعد بتونیم پیاده سازیش کنیم:

1. 1 شکل دایره ثابت داریم و 1 شکل دایره متحرک
2. دایره ابی رنگ هم اندازش تغییر میکنه هم مکانش

با دونستن همین 2 مورد کارمون رو شروع میکنیم:

یه دایره ثابت روی Window قرار میدیم:

<Ellipse Width=&quot14&quot Height=&quot14&quot StrokeThickness=&quot2&quot Stroke=&quot#EDEDED&quot/>

طول و عرض 14 و ضخامتش 2 رنگش هم خاکستری میشه حالا دایره متحرک رو ایجاد میکنیم:

<Ellipse x:Name=&quotSpinner&quot Width=&quot14&quot Height=&quot14&quot StrokeThickness=&quot2&quot local:EllipseHelper.StrokeDashArrayValue=&quot0.01&quot StrokeDashCap=&quotRound&quot Stroke=&quot#0078D4&quot RenderTransformOrigin=&quot0.5,0.5&quot>
<Ellipse.RenderTransform>
<RotateTransform x:Name=&quotRT&quot Angle=&quot-90&quot/>
</Ellipse.RenderTransform>
<Ellipse.Triggers>
<EventTrigger RoutedEvent=&quotLoaded&quot>
<BeginStoryboard>
<Storyboard Name=&quotspinInfinite&quot Duration=&quot0:0:2&quot RepeatBehavior=&quotForever&quot>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName=&quotRT&quot Storyboard.TargetProperty=&quotAngle&quot>
<LinearDoubleKeyFrame KeyTime=&quot0:0:0&quot Value=&quot0&quot/>
<LinearDoubleKeyFrame KeyTime=&quot0:0:1&quot Value=&quot450&quot/>
<LinearDoubleKeyFrame KeyTime=&quot0:0:2&quot Value=&quot1080&quot/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName=&quotSpinner&quot Storyboard.TargetProperty=&quot(local:EllipseHelper.StrokeDashArrayValue)&quot><LinearDoubleKeyFrame KeyTime=&quot0:0:0&quot Value=&quot0.01&quot/>
<LinearDoubleKeyFrame KeyTime=&quot0:0:1&quot Value=&quot9&quot/>
<LinearDoubleKeyFrame KeyTime=&quot0:0:2&quot Value=&quot0.01&quot/></DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>

یه دایره ابی رنگ تعریف کردیم که ضخامتش مثل قبلیه، گوشه های اون رو بصورت دایره ای گرد کردیم بعد مکان پیشفرضش برای شروع چرخش رو -90 درجه درنظر گرفتیم همینطور بهش گفتیم وقتی که لود شد یه استوری بورد ایجاد کنه که بصورت دائمی درحال اجرا باشه و بیاد 2 تا انیمیشن رو همزمان اجرا کنه، یکیش برای تغییر زاویه که توی 3 تا فریم انجام میشه و زاویه رو بین 0، 450 و 1080 تغییر میده و برای اینکه پروگرس بار جذاب بشه و حالت کش اومدن پیدا کنه وقتی که داره عملیات چرخش انجام میشه طول اون رو هم تغییر میدیم پس یه انیمیشن دیگه ایجاد میکنیم و توی 3 تا فریم مقدارش رو بین 0.01،9،0.01 تغییر میدیم.

چون مقدار StrokeDashArray بصورت DoubleCollection هستش امکان مقدار دهی اون در استوری بورد نیستش برای همین یه AttachedProperty به اسم StrokeDashArrayValue میسازیم که بیاد مقدار دریافتی رو تبدیل کنه به doubleCollection:

internal class EllipseHelper
{
public static readonly DependencyProperty StrokeDashArrayValueProperty = DependencyProperty.RegisterAttached(
&quotStrokeDashArrayValue&quot, typeof(double), typeof(EllipseHelper), new PropertyMetadata(0.0, OnStrokeDashArrayValueChanged));
public static double GetStrokeDashArrayValue(Ellipse ellipse)
{
return (double)ellipse.GetValue(StrokeDashArrayValueProperty);
}
public static void SetStrokeDashArrayValue(Ellipse ellipse, double value)
{
ellipse.SetValue(StrokeDashArrayValueProperty, value);
}
private static void OnStrokeDashArrayValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (d is Ellipse ellipse)
{
var value = (double)e.NewValue;
ellipse.StrokeDashArray = new DoubleCollection() { value, 100 };
}
}
}

نتیجه میشه چیزی که توی عکس میبینید