在WPF中，调整矩形内的圆形大小

时间：2015-03-30 19:04:19

标签： wpf xaml

我正在尝试重新创建Lollipop Android按钮触摸反馈风格。

在WPF中，我们有一个背景颜色为蓝色的矩形。 我想要的是当点击或触摸矩形时，圆形从矩形的中心动画，以指示用户发生了触摸事件。

我们有一个故事板，可以在＆＃34; hit＆＃34;上进行简单的颜色更改，但是如何使用从矩形中心辐射的圆圈来实现我想要的效果。

我们目前简单的故事板和XAML如下。

<UserControl.Resources>
    <Storyboard x:Key="hit">
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="bg">
            <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FFB92929"/>
        </ColorAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="off">
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="bg">
            <EasingColorKeyFrame KeyTime="0:0:0.5" Value="#FF2980B9"/>
        </ColorAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
    <EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown">
        <BeginStoryboard Storyboard="{StaticResource hit}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="UIElement.MouseLeftButtonUp">
        <BeginStoryboard x:Name="off_BeginStoryboard" Storyboard="{StaticResource off}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="Mouse.MouseLeave">
        <BeginStoryboard x:Name="off_BeginStoryboard1" Storyboard="{StaticResource off}"/>
    </EventTrigger>
</UserControl.Triggers>

<Grid x:Name="LayoutRoot" Style="{StaticResource GlobalStyles}">
    <Rectangle x:Name="bg" Style="{StaticResource btnSquare}"/>
    <TextBlock x:Name="btnText" HorizontalAlignment="Center" TextWrapping="Wrap" Text="-" VerticalAlignment="Center" Foreground="White" FontSize="64" FontWeight="Bold"/>
    <Rectangle x:Name="hit" Fill="#FF2980B9" Stroke="Black" Opacity="0" d:IsHidden="True"/>
    <!--Probably need an ellipses to position over Rectangle to create animated growing circle effect.-->
</Grid>

1 个答案:

答案 0 :(得分：1)

这就是我模仿Lollypop动画的方式。

在椭圆上：

  1. Animate ScaleTransform从0变为fullsize
  2. 等待，然后通过将不透明度设置为0
    3. 来淡化椭圆
  3. 椭圆渐变后，将ScaleTransform重置为0
  4. 将不透明度重置为50％

    5. UserControl中的XAML 

    <UserControl x:Class="SO_Questions.LollypopButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" >
  <UserControl.Resources>

    <Storyboard x:Key="ShowEllipse">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
                                     Storyboard.TargetName="hit">
        <EasingDoubleKeyFrame KeyTime="0"
                              Value="0" />
        <EasingDoubleKeyFrame KeyTime="0:0:1"
                              Value="1">
          <EasingDoubleKeyFrame.EasingFunction>
            <CubicEase EasingMode="EaseOut" />
          </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
        <EasingDoubleKeyFrame KeyTime="0:0:1.5"
                              Value="1" />
        <EasingDoubleKeyFrame KeyTime="0:0:2.5"
                              Value="1" />
        <EasingDoubleKeyFrame KeyTime="0:0:2.7"
                              Value="0" />
        <EasingDoubleKeyFrame KeyTime="0:0:2.8"
                              Value="0" />
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
                                     Storyboard.TargetName="hit">
        <EasingDoubleKeyFrame KeyTime="0"
                              Value="0" />
        <EasingDoubleKeyFrame KeyTime="0:0:1"
                              Value="1">
          <EasingDoubleKeyFrame.EasingFunction>
            <CubicEase EasingMode="EaseOut" />
          </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
        <EasingDoubleKeyFrame KeyTime="0:0:1.5"
                              Value="1" />
        <EasingDoubleKeyFrame KeyTime="0:0:2.5"
                              Value="1" />
        <EasingDoubleKeyFrame KeyTime="0:0:2.7"
                              Value="0" />
        <EasingDoubleKeyFrame KeyTime="0:0:2.8"
                              Value="0" />
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                     Storyboard.TargetName="hit">
        <EasingDoubleKeyFrame KeyTime="0:0:1.5"
                              Value="0.5" />
        <EasingDoubleKeyFrame KeyTime="0:0:2.5"
                              Value="0" />
        <EasingDoubleKeyFrame KeyTime="0:0:2.7"
                              Value="0" />
        <EasingDoubleKeyFrame KeyTime="0:0:2.8"
                              Value="0.5" />
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="FadeEllipse">
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                     Storyboard.TargetName="hit">
        <EasingDoubleKeyFrame KeyTime="0"
                              Value="0.5" />
        <EasingDoubleKeyFrame KeyTime="0:0:1"
                              Value="0" />
        <EasingDoubleKeyFrame KeyTime="0:0:1.2"
                              Value="0" />
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
                                     Storyboard.TargetName="hit">
        <EasingDoubleKeyFrame KeyTime="0:0:1"
                              Value="1" />
        <EasingDoubleKeyFrame KeyTime="0:0:1.2"
                              Value="0" />
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
                                     Storyboard.TargetName="hit">
        <EasingDoubleKeyFrame KeyTime="0:0:1"
                              Value="1" />
        <EasingDoubleKeyFrame KeyTime="0:0:1.2"
                              Value="0" />
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>

  </UserControl.Resources>
  <UserControl.Triggers>
    <EventTrigger RoutedEvent="UIElement.MouseLeftButtonUp"
                  SourceName="MainGrid">
      <BeginStoryboard Storyboard="{StaticResource ShowEllipse}" />
    </EventTrigger>
  </UserControl.Triggers>

  <Grid x:Name="MainGrid"
        Background='Blue'
        HorizontalAlignment='Stretch'
        VerticalAlignment='Stretch'>

    <TextBlock x:Name="btnText"
               HorizontalAlignment="Center"
               TextWrapping="Wrap"
               Text="5"
               VerticalAlignment="Center"
               Foreground="White"
               FontSize="64"
               FontWeight="Bold" />
    <Ellipse x:Name="hit"
             Fill="White"
             Opacity=".5"
             RenderTransformOrigin="0.5,0.5">
      <Ellipse.RenderTransform>
        <TransformGroup>
          <ScaleTransform ScaleX='0'
                          ScaleY='0' />
          <SkewTransform />
          <RotateTransform />
          <TranslateTransform />
        </TransformGroup>
      </Ellipse.RenderTransform>
    </Ellipse>

  </Grid>

</UserControl>

    UserControl代码 

    public partial class LollypopButton : UserControl {

  public LollypopButton() {
    InitializeComponent();
  }

  public static readonly DependencyProperty TextProperty =
      DependencyProperty.Register("Text", typeof(string), typeof(LollypopButton),
          new FrameworkPropertyMetadata((string)"",
              new PropertyChangedCallback(OnTextChanged)));

  public string Text {
    get { return (string)GetValue(TextProperty); }
    set { SetValue(TextProperty, value); }
  }

  private static void OnTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {
    LollypopButton target = (LollypopButton)d;
    string oldText = (string)e.OldValue;
    string newText = target.Text;
    target.OnTextChanged(oldText, newText);
  }

  protected virtual void OnTextChanged(string oldText, string newText) {
    btnText.Text = newText;
  }
}

    MainForm的XAML 

    <local:LollypopButton HorizontalAlignment='Stretch'
                      VerticalAlignment='Stretch'
                      Grid.Column='0'
                      Grid.Row='0'
                      Text='1' />
<local:LollypopButton HorizontalAlignment='Stretch'
                      VerticalAlignment='Stretch'
                      Grid.Column='1'
                      Grid.Row='0'
                      Text='2' />

<local:LollypopButton HorizontalAlignment='Stretch'
                      VerticalAlignment='Stretch'
                      Grid.Column='2'
                      Grid.Row='0'
                      Text='3' />

    MainForm的屏幕截图

    enter image description here

相关问题
最新问题