星空网 > 软件开发 > ASP.net

微信 二维码鼠标滑动 图像显隐效果

客户端微信在二维码状态下,鼠标滑过,会有一张手机的图片滑动滑出,从隐藏到显示,从显示到隐藏。

思路很简单:1、设置透明度;2、给个移动的位移

先看下做的效果

微信 二维码鼠标滑动 图像显隐效果

整体代码也不难,就是给Image控件设置动画效果。

微信 二维码鼠标滑动 图像显隐效果微信 二维码鼠标滑动 图像显隐效果
<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>

部分代码

但是需要注意的一点就是,需要给Image控件设置一个属性IsHitTestVisible="False",MSDN上的解释是“如果此元素可以从至少一个点上作为命中测试结果返回,则为 true,否则为 false。默认值为 true。”

设置这个属性很重要,因为没有设置这个属性,我调动画调了一早上,也没实现想要的效果,给大家看看不设置IsHitTestVisible="False"的效果。

微信 二维码鼠标滑动 图像显隐效果

由于Image处于Grid的下方,所以当鼠标从左侧慢慢划入时是没有问题的,因为鼠标点击不到Image,但是如果鼠标滑动过快,接触到Image,则会不断的触发MouseEnter事件,从而出现不断的闪烁。

当设置了IsHitTestVisible="False"时,则Image不会被点击到,也就没有影响了。




原标题:微信 二维码鼠标滑动 图像显隐效果

关键词:图像

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

Shopee月报|九大站点人气热卖、热搜词、飙升新品(2023年5月):https://www.ikjzd.com/articles/1666378695579037698
去年5月流量是亚马逊的2倍多,拉美电商平台MercadoLibre(墨西哥站)是什么情况!:https://www.ikjzd.com/articles/16665
海外仓有什么功能,海外仓对于跨境物流的意义是什么:https://www.ikjzd.com/articles/16666
火到纽约时装周的LoveSac,如何营销出近5 亿美元的销售额?:https://www.ikjzd.com/articles/1666609491422244866
欧盟公司 | 德国公司注册细节详解:https://www.ikjzd.com/articles/1666629016913997825
美客多卖家攻略:增加销量和提升店铺排名的秘诀:https://www.ikjzd.com/articles/1666630548598321153
出境旅游预订须知:https://www.vstour.cn/a/365175.html
九寨沟景区地图(详细指南和攻略):https://www.vstour.cn/a/365176.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流