C#開發(fā)微信 二維碼鼠標(biāo)滑動(dòng) 圖像顯示隱藏效果(推薦)
客戶端微信在二維碼狀態(tài)下,鼠標(biāo)滑過,會(huì)有一張手機(jī)的圖片滑動(dòng)滑出,從隱藏到顯示,從顯示到隱藏。
思路很簡(jiǎn)單:1、設(shè)置透明度;2、給個(gè)移動(dòng)的位移
先看下做的效果
整體代碼也不難,就是給Image控件設(shè)置動(dòng)畫效果。
<Grid x:Name="grid_content" Background="WhiteSmoke" Grid.Row="1"> <Grid.Triggers> <EventTrigger RoutedEvent="Grid.MouseEnter"> <EventTrigger.Actions> <BeginStoryboard HandoffBehavior="SnapshotAndReplace"> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" BeginTime="0" Duration="0:0:0.5" From="0" To="300" Storyboard.TargetName="img"/> <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" BeginTime="0:0:0.5" Duration="0:0:0.3" From="300" To="270" Storyboard.TargetName="img"/> <DoubleAnimation Storyboard.TargetProperty="Opacity" BeginTime="0" Duration="0:0:0.5" From="0" To="1" Storyboard.TargetName="img"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> <EventTrigger RoutedEvent="Grid.MouseLeave"> <EventTrigger.Actions> <BeginStoryboard HandoffBehavior="SnapshotAndReplace"> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" BeginTime="0" Duration="0:0:0.5" From="270" To="0" Storyboard.TargetName="img"/> <DoubleAnimation Storyboard.TargetProperty="Opacity" BeginTime="0" Duration="0:0:0.5" From="1" To="0" Storyboard.TargetName="img"/> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Grid.Triggers> </Grid> <Image x:Name="img" Source="/Image/huadong.png" Visibility="Visible" Opacity="0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False"> <Image.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Image.RenderTransform> </Image>
但是需要注意的一點(diǎn)就是,需要給Image控件設(shè)置一個(gè)屬性IsHitTestVisible="False",MSDN上的解釋是“如果此元素可以從至少一個(gè)點(diǎn)上作為命中測(cè)試結(jié)果返回,則為 true,否則為 false。默認(rèn)值為 true?!?/p>
設(shè)置這個(gè)屬性很重要,因?yàn)闆]有設(shè)置這個(gè)屬性,我調(diào)動(dòng)畫調(diào)了一早上,也沒實(shí)現(xiàn)想要的效果,給大家看看不設(shè)置IsHitTestVisible="False"的效果。
由于Image處于Grid的下方,所以當(dāng)鼠標(biāo)從左側(cè)慢慢劃入時(shí)是沒有問題的,因?yàn)槭髽?biāo)點(diǎn)擊不到Image,但是如果鼠標(biāo)滑動(dòng)過快,接觸到Image,則會(huì)不斷的觸發(fā)MouseEnter事件,從而出現(xiàn)不斷的閃爍。
當(dāng)設(shè)置了IsHitTestVisible="False"時(shí),則Image不會(huì)被點(diǎn)擊到,也就沒有影響了。
以上所述是小編給大家介紹的C#開發(fā)微信 二維碼鼠標(biāo)滑動(dòng) 圖像顯隱效果,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
無法將類型為“System.Web.UI.WebControls.HiddenField”的對(duì)象強(qiáng)制轉(zhuǎn)換為類型的錯(cuò)誤的解
無法將類型為“System.Web.UI.WebControls.HiddenField”的對(duì)象強(qiáng)制轉(zhuǎn)換為類型的錯(cuò)誤的解決方法2011-12-12ASP.NET Core SignalR中的流式傳輸深入講解
這篇文章主要給大家介紹了關(guān)于ASP.NET Core SignalR中流式傳輸?shù)南嚓P(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11asp.net 上傳或下載當(dāng)文件名包含有特殊字符"#"的處理
在上傳或下載文件時(shí),當(dāng)文件名包含有"#"特殊字符時(shí),上傳以后的文件會(huì)被改名字,造成下載也下載不了。2010-03-03.Net語言Smobiler開發(fā)之如何在手機(jī)上實(shí)現(xiàn)表單設(shè)計(jì)
這篇文章主要為大家詳細(xì)介紹了.Net語言APP開發(fā)平臺(tái),如何在手機(jī)上實(shí)現(xiàn)表單設(shè)計(jì)(Smobiler),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09ASP.NET實(shí)現(xiàn)電影票信息的增刪查改功能
這篇文章主要介紹了ASP.NET實(shí)現(xiàn)電影票信息的增刪查改功能的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12一步步打造簡(jiǎn)單的MVC電商網(wǎng)站BooksStore(4)
這篇文章主要和大家一起一步步打造一個(gè)簡(jiǎn)單的MVC電商網(wǎng)站,MVC電商網(wǎng)站BooksStore第四篇,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04