WPF 使用動畫繪製一個點贊大拇指

来源:https://www.cnblogs.com/T-ARF/archive/2023/02/12/17115015.html
-Advertisement-
Play Games

效果圖 好久沒有寫wpf了。 最近看到飛書的點贊動畫非常有意思，決定試試，雖然不及飛書那樣的絢麗，但是練手還是可以的，希望自己的手藝還在！ 那麼如何寫一個這樣的動畫呢？ 首先需要刨析這個動畫的構成： 外圈圓 大拇指-1豎著 大拇指-2握著 顫動動畫 中心旋轉動畫 展開中心旋轉動畫 當我們分析這些東西 ...


效果圖

 

 

 

 

 好久沒有寫wpf了。

最近看到飛書的點贊動畫非常有意思，決定試試，雖然不及飛書那樣的絢麗，但是練手還是可以的，希望自己的手藝還在！

那麼如何寫一個這樣的動畫呢？

首先需要刨析這個動畫的構成：

外圈圓

大拇指-1豎著

大拇指-2握著

顫動動畫

中心旋轉動畫

展開中心旋轉動畫

當我們分析這些東西剩下的就好辦了。

首先我們先辦了這個最難的東西大拇指。

 

 

 這個東西的構成，我們使用Path 直接去寫。顯然我們就會得到這樣的代碼

  <Geometry  x:Key="t1">
            M 20 40
                v 0 40
                h 0 7
                v 0 -40
                z
                M 30 42
                v 0  38
                h 40 0
                l 15 -35
                l -10 -5
                h -25 0 
                l 2 -20
            <!--小褶皺-->
            q -10 -10, -20 22
               z
  </Geometry>

當我們在path 100*100的大小的時候使用腦補進行繪製就就可以了。

至於這個小褶皺我曾經不想要，但是看到了自己的豬爪...還是決定加上了。

這代碼的原理非常簡單，基本都是基本的直線繪製，最難的就是用了個貝塞爾來製造大拇指背部的弧度.

不管咋樣還是弄出來個簡單的贊。

剩下就是握著的狀態了

那麼我們只需要修改部分代碼就可以達到了~

也就是

 <Geometry  x:Key="t2">
            M 20 40
                v 0 40
                h 0 7
                v 0 -40
                z
                M 30 42
                v 0  38
                h 40 0
                l 15 -35
                l -10 -5
                h -25 0 
                l 2  0
            <!--小褶皺-->
            q -10 -10, -20 0
                z
        </Geometry>

我們修改了最後兩行代碼的 l 的y參數和q最後的end point參數的y的值都是降到0了 這樣會形成一個簡單的弧度

 

 

 哈 這樣子 我們就是得到了兩個手掌的不同狀態了。

剩下的事情就是來組裝吧~~~~

首先是大拇指張開和大拇指握住的狀態轉換。

做到這事情最簡單的動畫就是使用eventtigger來做，我們使用簡單的滑鼠按下事件作為啟動，當然了 想要豐富過程也是可以使用滑鼠浮動事件作為啟動事件之一。

　　　　　　　　　　<Path.Triggers>
                    <EventTrigger  RoutedEvent="MouseLeftButtonDown">
                        <BeginStoryboard x:Name="Bs1">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="Data">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.01">
                                        <DiscreteObjectKeyFrame.Value>
                                            <StaticResource ResourceKey="t2"/>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
　　　　　　　　　　　　　　　　 </Storyboard>
                        </BeginStoryboard>
 　　　　　　　　　　　　</EventTrigger>
                </Path.Triggers>

為了做件事 ，我們把geometry作為window的資源 所以子啊寫動畫的時候 用離弦值就非常方便了。

觀察代碼，我們僅僅只是在點下的時候讓path轉換為握住的data，因為我們需要在鬆開左鍵的時候才讓拇指豎起來。

所以還需要補上一個MouseLeftButtonUp的動畫

這最終的代碼就是

　<Path.Triggers>
                    <EventTrigger  RoutedEvent="MouseLeftButtonDown">
                        <BeginStoryboard x:Name="Bs1">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="Data">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.01">
                                        <DiscreteObjectKeyFrame.Value>
                                            <StaticResource ResourceKey="t2"/>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
　　　　　　　　　　　　　　　　 </Storyboard>
                        </BeginStoryboard>
 　　　　　　　　　　　　</EventTrigger>
　　　　　　 　　　　　　<EventTrigger RoutedEvent="MouseLeftButtonUp">
                        <RemoveStoryboard BeginStoryboardName="Bs1"/>
                    </EventTrigger>
                </Path.Triggers>

效果圖

 

 

 莫名的搞笑....

基礎的東西我們構建好了，剩下就是補全了。

不全顫抖啊，補全中心旋轉動畫，也就是手指握住後有一個向下的動畫。

首先這個顫動 我們可以簡單的理解為位移，一個快速的上下左右的位移

正好WPF有這種動畫 所以我們就可以得到如下的代碼

　　　　　　　　　　　　　　　　　　<ThicknessAnimationUsingKeyFrames RepeatBehavior="Forever" Duration="0:0:0.4"  Storyboard.TargetProperty="Margin" >
                                    <SplineThicknessKeyFrame KeyTime="0:0:0.0" Value="4,3,0,0"/>
                                    <SplineThicknessKeyFrame KeyTime="0:0:0.2" Value="3,4,0,0"/>
                                    <SplineThicknessKeyFrame KeyTime="0:0:0.3" Value="0,0,4,0"/>
                                    <SplineThicknessKeyFrame KeyTime="0:0:0.35" Value="0,0,4,3"/>
                                    <SplineThicknessKeyFrame KeyTime="0:0:0.4" Value="4,3,0,0"/>
                                </ThicknessAnimationUsingKeyFrames>

我們可以直代碼放到path的eventtriger中

看得出來 離散動畫的值就是簡單的marigin的位移，代碼非常簡單。

 

 

 就是在這裡顫抖...

雖然看上去不是很好看，但是我們結合下一個動畫，也就是手掌向下就會好很多了

這個動畫很明顯是一個旋轉動畫，所以我們需要提前準備一個roteate的transofrom

代碼如下

 <Path.RenderTransform>
                    <RotateTransform x:Name="rote" Angle="0"/>
  </Path.RenderTransform>

動畫代碼如下

   <DoubleAnimation   Duration="0:0:0.1" To="30" Storyboard.TargetName="rote" Storyboard.TargetProperty="Angle">
                                    <DoubleAnimation.EasingFunction>
                                        <CubicEase/>
                                    </DoubleAnimation.EasingFunction>
       </DoubleAnimation>

我們簡單的使用了一個函數，提升一下效果的動感...

但是感覺沒啥用

效果圖就是這樣的了

 

 

 

雖然看上去已經非常不錯了，但是還有些不做，想想 我們的手都朝下了 鬆開之後為啥沒有一個向上的彈簧動作呢？

也就是

 

 

 我們需要在抬起時加上一個角度的旋轉。

也就是

 <EventTrigger RoutedEvent="MouseLeftButtonUp">
                        <BeginStoryboard x:Name="Bs2">
                            <Storyboard>
                                <DoubleAnimation  FillBehavior="Stop"  Duration="0:0:0.5" To="-30" Storyboard.TargetName="rote" Storyboard.TargetProperty="Angle">
                                    <DoubleAnimation.EasingFunction>
                                        <CubicEase EasingMode="EaseOut"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                        <RemoveStoryboard BeginStoryboardName="Bs1"/>
                    </EventTrigger>

代碼可以說手掌向下的反向操作。

順便播放完把bs1動畫解除掉。

剩下的就是圈的構造和動畫。

圓圈呢，我們可以是直接的圓圈，也可以是broder，看個人喜歡了。

我就不羅嗦直接上代碼

  <Border  BorderThickness="2" Background="Transparent" BorderBrush="Transparent"   CornerRadius="100" Width="200" Height="{Binding  RelativeSource={RelativeSource Mode=Self}, Path=Width}" Grid.Column="1" Grid.Row="1">
            <Border x:Name="sor" Visibility="Hidden" BorderThickness="2" Background="Transparent" BorderBrush="Transparent"   CornerRadius="100" Width="200" Height="{Binding  RelativeSource={RelativeSource Mode=Self}, Path=Width}" Grid.Column="1" Grid.Row="1"/>
        </Border>

構造了兩個嵌套的borderr，寬度其實可以隨意，只是演示的時候放大的大小而已。

動畫則是放到了path的啟動動畫之中

也就是

  　　　　<DoubleAnimation RepeatBehavior="Forever" SpeedRatio="1.2" Duration="0:0:1.5" To="0" Storyboard.TargetName="sor" Storyboard.TargetProperty="Width">
                                    <DoubleAnimation.EasingFunction>
                                        <CubicEase/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                                <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="sor" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.1">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>
                                                Visible
                                            </Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>

代碼非常簡單，控制下內圈的大小，還有是否隱藏而已。

這樣子我們就最終得到了頭圖的效果了

 

 

總的過程還是比較簡單的。

下麵是全部的代碼

 <Window.Resources>
        <Geometry  x:Key="t1">
            M 20 40
                v 0 40
                h 0 7
                v 0 -40
                z
                M 30 42
                v 0  38
                h 40 0
                l 15 -35
                l -10 -5
                h -25 0 
                l 2 -20
            <!--小褶皺-->
            q -10 -10, -20 22
                z
        </Geometry>
        <Geometry  x:Key="t2">
            M 20 40
                v 0 40
                h 0 7
                v 0 -40
                z
                M 30 42
                v 0  38
                h 40 0
                l 15 -35
                l -10 -5
                h -25 0 
                l 2  0
            <!--小褶皺-->
            q -10 -10, -20 0
                z
        </Geometry>
        <PathGeometry  Figures="   M 20 40 l 2 -5 v 0 5 h -2 0  z" x:Key="roue"/>
    </Window.Resources>
    <Grid>
        <Border  BorderThickness="2" Background="Transparent" BorderBrush="BlueViolet"   CornerRadius="100" Width="200" Height="{Binding  RelativeSource={RelativeSource Mode=Self}, Path=Width}" Grid.Column="1" Grid.Row="1">
            <Border x:Name="sor" Visibility="Hidden" BorderThickness="2" Background="Transparent" BorderBrush="Salmon"   CornerRadius="100" Width="200" Height="{Binding  RelativeSource={RelativeSource Mode=Self}, Path=Width}" Grid.Column="1" Grid.Row="1"/>
        </Border>
        <Grid Width="300" Height="300"   ShowGridLines="False">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition />
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Path StrokeThickness="2"   Grid.Column="1" Grid.Row="1" VerticalAlignment="Bottom" Stretch="Uniform" Fill="Pink" Width="80" Height="80" Stroke="Blue" Data="{StaticResource t1}" RenderTransformOrigin="0.5,0.5">
                <Path.RenderTransform>
                    <RotateTransform x:Name="rote" Angle="0"/>
                </Path.RenderTransform>
                <Path.Triggers>
                    <EventTrigger  RoutedEvent="MouseLeftButtonDown">
                        <BeginStoryboard x:Name="Bs1">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="Data">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.01">
                                        <DiscreteObjectKeyFrame.Value>
                                            <StaticResource ResourceKey="t2"/>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ThicknessAnimationUsingKeyFrames RepeatBehavior="Forever" Duration="0:0:0.4"  Storyboard.TargetProperty="Margin" >
                                    <SplineThicknessKeyFrame KeyTime="0:0:0.0" Value="4,3,0,0"/>
                                    <SplineThicknessKeyFrame KeyTime="0:0:0.2" Value="3,4,0,0"/>
                                    <SplineThicknessKeyFrame KeyTime="0:0:0.3" Value="0,0,4,0"/>
                                    <SplineThicknessKeyFrame KeyTime="0:0:0.35" Value="0,0,4,3"/>
                                    <SplineThicknessKeyFrame KeyTime="0:0:0.4" Value="4,3,0,0"/>
                                </ThicknessAnimationUsingKeyFrames>
                                <DoubleAnimation   Duration="0:0:0.1" To="30" Storyboard.TargetName="rote" Storyboard.TargetProperty="Angle">
                                    <DoubleAnimation.EasingFunction>
                                        <CubicEase/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                                <DoubleAnimation RepeatBehavior="Forever" SpeedRatio="1.2" Duration="0:0:1.5" To="0" Storyboard.TargetName="sor" Storyboard.TargetProperty="Width">
                                    <DoubleAnimation.EasingFunction>
                                        <CubicEase/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                                <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetName="sor" Storyboard.TargetProperty="Visibility">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0.1">
                                        <DiscreteObjectKeyFrame.Value>
                                            <Visibility>
                                                Visible
                                            </Visibility>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseLeftButtonUp">
                        <BeginStoryboard x:Name="Bs2">
                            <Storyboard>
                                <DoubleAnimation  FillBehavior="Stop"  Duration="0:0:0.5" To="-30" Storyboard.TargetName="rote" Storyboard.TargetProperty="Angle">
                                    <DoubleAnimation.EasingFunction>
                                        <CubicEase EasingMode="EaseOut"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                        <RemoveStoryboard BeginStoryboardName="Bs1"/>
                    </EventTrigger>
                </Path.Triggers>
            </Path>
        </Grid>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Python 類型註解
    Python類型註解僅在語法展示層面支持，對代碼的運行沒有任何影響，Python 解釋器在運行代碼的時候會忽略類型提示，Python的類型註解極大的提升了代碼可讀性，一定程度上緩解"動態語言一時爽，代碼重構火葬場"的尷尬。 ...
  • Maven基礎學習
    Maven Maven是專門用於管理和構建Java項目的工具，它的主要功能有： 提供了一套標準化的項目結構 提供了一套標準化的構建流程（編譯，測試，打包，發佈……） 提供了一套依賴管理機制 依賴管理 依賴管理其實就是管理你項目所依賴的第三方資源 (jar包、插件…) Apache Maven 是一個 ...
  • C++右值引用與移動語義
    一文看懂C++右值引用和移動語義 目錄 背景 什麼是右值引用 為什麼需要右值引用 移動構造 move的原理 move的應用場景 右值引用註意事項 總結 背景 C++11引入了右值引用，它也是C++11最重要的新特性之一。原因在於它解決了C++的一大歷史遺留問題，即消除了很多場景下的不必要的額外開銷。 ...
  • 11-verilog-有限狀態機
    有限狀態機 寫RTL的時候,實現一個功能的時候有很多種方法 將系統劃分為多個狀態,狀態之間有狀態的轉移,第一步,第二步,,,,形成有限狀態機 流水線技術設計,從輸入到輸出有多個步驟 有限狀態機,狀態是有限的,比如8個狀態,16個狀態等,在進行設計的時候,狀態機的狀態不要太多,狀態超過10個,就會造成 ...
  • 使用PostgreSQL保存二進位的Protobuf
    Ribbon 是Netflix公司提供的負載均衡客戶端,一般應用於服務的消費方法；Ribbon 可以解決基於負載均衡策略進行服務調用, 所有策略都會實現IRule介面；Ribbon 內置的負載策略有8種,可以通過查看IRule介面的實現類進行分析；@LoadBalanced的作用是描述RestTem... ...
  • 2018至2023我的開源項目分享
    本文主要針對博主2018畢業至2023參與軟體開發4年多以來自建的三個開源項目進行介紹與分享，希望對看到本文的新入行的初中級開發者或者未畢業想入行的學生們能夠起到幫助。下麵是項目介紹 一、newbee-mall-pro newbee-mall-pro 是博主在2019年想要自建PC商城項目時，在 n ...
  • fusion app登錄註冊示例
    一、前言 在常見的app中，需要用戶登錄後才能使用app，本節我們使用fusion app製作一個登錄頁面，登錄成功之後再跳轉到app主頁。 二、準備工作 下載水仙app和fusion app重製版，在後臺回覆【水仙】和【fa】即可獲取下載鏈接。 二、工程配置 2.1.fusion app配置 新建 ...
  • 【rust】rsut基礎：模塊的使用一、mod 關鍵字、mod.rs 文件的含義等
    本文內容 這篇文章是實戰性質的，也就是說原理部分較少，屬於經驗總結，rust對於模塊的例子太少了。rust特性比較多（悲），本文的內容可能只是一部分，實現方式也不一定是這一種。 關於 rust 模塊的相關內容，準確來說：怎麼在源碼中引用其他模塊的內容。 關於 mod、 use 、as 這幾個關鍵字（ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類