[WPF] 實作兩個任天堂 Switch 的加載影片

寫了兩個 Switch 的加載影片，第一個是 Swtich 最常見那個 Loading 影片：

其中拆分文字用到了 之前一篇文章 里提到的用 ItemsControl 拆分的方案，文字逐個反轉的影片也用了那篇文章里提到的 TimeSpanIncreaser 來控制 BeginTime：

<Storyboard BeginTime="{Binding Next, Source={StaticResource TimeSpanIncreaser}}" RepeatBehavior="Forever">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TextElement"
                                   Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
                                   Duration="0:0:4">
        <LinearDoubleKeyFrame KeyTime="0:0:0.4" Value="https://www.cnblogs.com/dino623/p/-1" />
        <LinearDoubleKeyFrame KeyTime="0:0:0.6" Value="https://www.cnblogs.com/dino623/p/1" />
        <LinearDoubleKeyFrame KeyTime="0:0:0.8" Value="https://www.cnblogs.com/dino623/p/-1" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

另一個是 eShop 的加載影片，看起來簡單，實作程序反而更有趣，

要實作這個影片，第一步要先把每行都拆分成一個獨立的部分，然后還是使用 TimeSpanIncreaser 控制每個部分的開始影片的時間：

<local:NintendoEShopLoadingRow Delay="{Binding Next, Source={StaticResource TimeSpanIncreaser}}" />
<local:NintendoEShopLoadingRow Grid.Row="1" Delay="{Binding Next, Source={StaticResource TimeSpanIncreaser}}" />
<local:NintendoEShopLoadingRow Grid.Row="2" Delay="{Binding Next, Source={StaticResource TimeSpanIncreaser}}" />
<local:NintendoEShopLoadingRow Grid.Row="3" Delay="{Binding Next, Source={StaticResource TimeSpanIncreaser}}" />
<local:NintendoEShopLoadingRow Grid.Row="4" Delay="{Binding Next, Source={StaticResource TimeSpanIncreaser}}" />
<local:NintendoEShopLoadingRow Grid.Row="5" Delay="{Binding Next, Source={StaticResource TimeSpanIncreaser}}" />

然后實作 NintendoEShopLoadingRow ，先在里面放上四個顏色由淺到深的 Grid，為了不寫死顏色，我做了個 LightenConverter，具體用法如下：

<Grid Background="{Binding Foreground, ElementName=Row, Converter={StaticResource LightenConverter}, ConverterParameter=.8}" />
<Grid Background="{Binding Foreground, ElementName=Row, Converter={StaticResource LightenConverter}, ConverterParameter=.6}" />
<Grid Background="{Binding Foreground, ElementName=Row, Converter={StaticResource LightenConverter}, ConverterParameter=.4}" />
<Grid Background="{Binding Foreground, ElementName=Row}" />

LightenConverter 的代碼如下，先實作一個 HslColor 類，HSL即色相、飽和度、亮度（英語：Hue, Saturation, Lightness），LightenConverter 將原本的 SolidColorBrush 中的 Color 轉換成 HslColor，然后修改亮度后再轉換回來：

public class LightenConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var brush = value as SolidColorBrush;
        if (brush == null)
            return value;

        var amount =System.Convert.ToDouble(parameter);

        return new SolidColorBrush(new HslColor(brush.Color).Lighten(amount).ToRgb());
    }

    public HslColor Lighten(HslColor source, double amount)
    {
        return new HslColor(source.h, source.s, source.l + (1 - source.l) * amount, source.a);
    }
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) => throw new NotImplementedException();
}

這樣就實作了 4 個 Grid 使用同一個顏色，但亮度不同，

最后要讓這四個 Grid 動起來（其實只是動前面三個），雖然說”動起來“，但并不是做移動的影片，而是用 ScaleTransform 做拉伸，同樣是做 ScaleX 從 1 到 0 的影片，如果 RenderTransformOrigin="0,0.5" 就是以左邊界為中心，即從右往左縮小；反之 RenderTransformOrigin="1,0.5" 就是從左往右縮小，通過設定 RenderTransformOrigin 實作了各層往不同的方向縮小，實作了左右往返的影片：

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="L1" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
    <LinearDoubleKeyFrame KeyTime="00:00:1" Value="https://www.cnblogs.com/dino623/p/0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="L2" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
    <LinearDoubleKeyFrame KeyTime="00:00:1" Value="https://www.cnblogs.com/dino623/p/1" />
    <LinearDoubleKeyFrame KeyTime="00:00:2" Value="https://www.cnblogs.com/dino623/p/0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="L3" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
    <LinearDoubleKeyFrame KeyTime="00:00:2" Value="https://www.cnblogs.com/dino623/p/1" />
    <LinearDoubleKeyFrame KeyTime="00:00:3" Value="https://www.cnblogs.com/dino623/p/0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="L1" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
    <LinearDoubleKeyFrame KeyTime="00:00:3" Value="https://www.cnblogs.com/dino623/p/0" />
    <LinearDoubleKeyFrame KeyTime="00:00:4" Value="https://www.cnblogs.com/dino623/p/1" />
</DoubleAnimationUsingKeyFrames>

可惜的是，這個影片對 WPF 來說有些勉強，偶爾會有卡頓的現象，反正只是玩玩，正式產品不要在這么大的元素上做影片，

原始碼：https://github.com/DinoChan/wpf_design_and_animation_lab

標籤：WPF

上一篇：WPF 布局 在有限空間內讓兩個元素盡可能撐開的例子

下一篇：Symfony5：自參考多對多的形式