Question

我应该使用什么来使我的WPF UIControl（例如Canvas，Buttons等）像iPhone菜单图标一样摇摆（按住后按下）。我正在尝试在桌面应用程序上创建相同的效果。

Answer 1

This应该让你朝着正确的方向前进。

Answer 2

以下是我的想法：

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300">

    <Window.Resources>        
        <PathGeometry x:Key="pathUpperHalf" Figures="M 100,100 A 1,1 0 1 1 101,100 " />
        <PathGeometry x:Key="pathLowerHalf" Figures="M 101,100 A 1,1 0 1 1 100,100" />

        <Storyboard x:Key="iconCircularMovement" RepeatBehavior="Forever">
            <DoubleAnimationUsingPath Storyboard.TargetName="icon"
                Storyboard.TargetProperty="(Canvas.Left)"
                PathGeometry="{StaticResource pathUpperHalf}"
                Duration="0:0:0.1" BeginTime="0:0:0" RepeatBehavior="1x" AutoReverse="False" Source="X" />
            <DoubleAnimationUsingPath Storyboard.TargetName="icon"
                Storyboard.TargetProperty="(Canvas.Top)"
                PathGeometry="{StaticResource pathUpperHalf}"
                Duration="0:0:0.1" BeginTime="0:0:0" RepeatBehavior="1x" AutoReverse="False" Source="Y" />

            <DoubleAnimationUsingPath Storyboard.TargetName="icon"
                Storyboard.TargetProperty="(Canvas.Left)"
                PathGeometry="{StaticResource pathLowerHalf}"
                Duration="0:0:0.1" BeginTime="0:0:0.1" RepeatBehavior="1x" AutoReverse="False" Source="X" />
            <DoubleAnimationUsingPath Storyboard.TargetName="icon"
                Storyboard.TargetProperty="(Canvas.Top)"
                PathGeometry="{StaticResource pathLowerHalf}"
                Duration="0:0:0.1" BeginTime="0:0:0.1" RepeatBehavior="1x" AutoReverse="False" Source="Y" />
        </Storyboard>

        <Storyboard x:Key="iconRotate" RepeatBehavior="Forever">
            <DoubleAnimation Storyboard.TargetName="RotationTransformation"
                Storyboard.TargetProperty="(RotateTransform.Angle)"
                From="-5" To="5" Duration="0:0:0.09" BeginTime="0:0:0" AutoReverse="True" />
        </Storyboard>
    </Window.Resources>

    <Grid x:Name="grid">
        <Canvas>            
            <Rectangle x:Name="icon" Width="60" Height="60" Stroke="Black" Fill="Black" RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                    <RotateTransform x:Name="RotationTransformation" Angle="0" />
                </Rectangle.RenderTransform>
            </Rectangle>
        </Canvas>
    </Grid>
</Window>

背后的代码只是：

public MainWindow()
        {
            InitializeComponent();

            var circ = FindResource("iconCircularMovement") as Storyboard;
            var rot = FindResource("iconRotate") as Storyboard;
            if (circ != null) circ.Begin();
            if (rot != null) rot.Begin();
        }

WPF C＃UIControl像iPhone菜单图标一样摇摆

2 个答案: