C# WPF實現(xiàn)動畫漸入暗黑明亮主題切換效果

效果圖如下

最近在Bilibili的桌面端看到一個黑白主題切換的效果感覺，挺有意思。于是我使用WPF嘗試實現(xiàn)該效果。
主要的切換效果，基本實現(xiàn)不過還存在一些小瑕疵，比如字體等筆刷不能跟隨動畫進入進行切換。因為Bilibili的客戶端是用electron寫的，前端使用的html,css確實太強了，這咱只能佩服。

實現(xiàn)思路

在文末已付上代碼的地址

1. UI使用三段式的布局，那么第一列和第三列可以使用白色或黑色來進行主題底色的實現(xiàn)。而第二列則使用一個帶透明度的灰色進行覆蓋底色

2. 切換主題時，需要兩部分操作，一是切換底色，二是切換文本等前景色的資源字典。因此我準(zhǔn)備了三個資源字典進行主題切換。Main用于存儲不變的筆刷資源，Light和Dark分別保存在明亮和暗黑兩種狀態(tài)下顯示不同的資源。
   
   
   

3. 切換底色，如果使用切換字典的方式，則無法實現(xiàn)動態(tài)效果，于是，我在底圖層下使用一個圓形的繪圖，并在切換動作時進行簡單的縮放動畫即可(此處，我使用DataTrigger與切換按鈕的狀態(tài)進行綁定，在狀態(tài)改變時觸發(fā)動畫效果)

   <Ellipse Grid.ColumnSpan="3" Fill="#202020" RenderTransformOrigin="0.5,0.5" Margin="30" 
                 HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="1" Height="1">
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform x:Name="BackEllipseScale"/>
                </TransformGroup>
            </Ellipse.RenderTransform>

            <Ellipse.Style>
                <Style TargetType="Ellipse">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=ThemeToggle,Path=IsChecked}" Value="True">
                            <Setter Property="Visibility" Value="Visible"/>
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.5" To="3500" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX">
                                            <DoubleAnimation.EasingFunction>
                                                <CubicEase EasingMode="EaseOut"/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                        <DoubleAnimation Duration="0:0:0.5" To="3500" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY">
                                            <DoubleAnimation.EasingFunction>
                                                <CubicEase EasingMode="EaseOut"/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.5" To="0" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX">
                                            <DoubleAnimation.EasingFunction>
                                                <CubicEase EasingMode="EaseOut"/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                        <DoubleAnimation Duration="0:0:0.5" To="0" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY">
                                            <DoubleAnimation.EasingFunction>
                                                <CubicEase EasingMode="EaseOut"/>
                                            </DoubleAnimation.EasingFunction>
                                        </DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Ellipse.Style>
        </Ellipse>

5. 切換前景色，這個就比較簡單了，使用基礎(chǔ)的更改資源字典即可。（當(dāng)前使用的資源都需要是 DynamicResource）

     private void ThemeToggle_Checked(object sender, RoutedEventArgs e)
        {
            SwitchTheme(true);
        }

        private void ThemeToggle_Unchecked(object sender, RoutedEventArgs e)
        {
            SwitchTheme(false);
        }
public void SwitchTheme(bool isDark)
        {
            var res = Application.Current.Resources.MergedDictionaries;
            ResourceDictionary dictionary = new ResourceDictionary();
            dictionary.Source = new Uri(isDark ? "./Dark.xaml" : "./Light.xaml", UriKind.Relative);
            res[1] = dictionary;
        }

項目地址：github文章來源地址http://www.zghlxwxcb.cn/news/detail-568258.html

到了這里，關(guān)于C# WPF實現(xiàn)動畫漸入暗黑明亮主題切換效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！