zoukankan      html  css  js  c++  java
  • WPF动画 storyboard

    <Window x:Class="StoryBoard.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525" Foreground="{x:Null}" WindowStyle="None" ResizeMode="NoResize" AllowsTransparency="True" Background="{x:Null}" Topmost="True">
    <Window.Resources>
    <Storyboard x:Key="fanzhuan">
    <!--翻转位置 0.5,0.5表示中点翻转-->
    <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="grid">
    <EasingPointKeyFrame KeyTime="0" Value="0.5,0.5"/>
    </PointAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid">
    <!--KeyTime表示时间间隔,value表示从哪里翻转-1表示反面 -0.8表示侧一点-->
    <EasingDoubleKeyFrame KeyTime="0" Value="-1">
    <EasingDoubleKeyFrame.EasingFunction>
    <CubicEase EasingMode="EaseIn"/>
    </EasingDoubleKeyFrame.EasingFunction>
    </EasingDoubleKeyFrame>
    <!--0:0:1是timespan 翻转完全的时间间隔-->
    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
    <EasingDoubleKeyFrame.EasingFunction>
    <CubicEase EasingMode="EaseOut"/>
    </EasingDoubleKeyFrame.EasingFunction>
    </EasingDoubleKeyFrame>
    </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    </Window.Resources>
    <Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
    <BeginStoryboard Storyboard="{StaticResource fanzhuan}"/>
    </EventTrigger>
    </Window.Triggers>

    <Grid x:Name="grid" >
    <!--必须需要能翻转属性-->
    <Grid.RenderTransform>
    <TransformGroup>
    <ScaleTransform/>
    <SkewTransform/>
    <RotateTransform/>
    <TranslateTransform/>
    </TransformGroup>
    </Grid.RenderTransform>
    <Grid.Background>
    <ImageBrush Stretch="UniformToFill" ImageSource="Resources/6.jpg"/>
    </Grid.Background>
    <Button Content="Button" Name="btn1" HorizontalAlignment="Left" Margin="338,153,0,0" VerticalAlignment="Top" Width="75">
    <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
    <BeginStoryboard Storyboard="{StaticResource fanzhuan}"/>
    </EventTrigger>

    </Button.Triggers>
    </Button>
    <Button Content="Button" Click="Button_Click" HorizontalAlignment="Left" Margin="164,218,0,0" VerticalAlignment="Top" Width="75"/>
    </Grid>
    </Window>

  • 相关阅读:
    jq封装的tab切换
    jquery高级函数
    jquery一些基本函数
    javascript中的事件冒泡和事件捕获
    prototype数组方法的实现
    瀑布流布局
    flex弹性布局
    js鼠标点击版tab切换
    js拖拽效果
    js根据className获取元素封装
  • 原文地址:https://www.cnblogs.com/JohnnyBao/p/3769952.html
Copyright © 2011-2022 走看看