你的位置:首页 > 软件开发 > ASP.net > 微信 二维码鼠标滑动 图像显隐效果

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

发布时间:2016-11-11 19:03:28
客户端微信在二维码状态下,鼠标滑过,会有一张手机的图片滑动滑出,从隐藏到显示,从显示到隐藏。思路很简单:1、设置透明度;2、给个移动的位移先看下做的效果整体代码也不难,就是给Image控件设置动画效果。<Grid x:Name="grid_content&quot ...

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

思路很简单: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>

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

关键词:图像

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