15- Animation

1,Animation类:

DoubleAnimation widthAnimation = new DoubleAnimation();
            widthAnimation.To = this.Width - 30;
            widthAnimation.Duration = TimeSpan.FromSeconds(5);
            widthAnimation.Completed += animation_Completed;

            DoubleAnimation heightAnimation = new DoubleAnimation();
            heightAnimation.To = (this.Height - 50)/3;
            heightAnimation.Duration = TimeSpan.FromSeconds(5);

            cmdGrow.BeginAnimation(Button.WidthProperty, widthAnimation);
            cmdGrow.BeginAnimation(Button.HeightProperty, heightAnimation);
        }

   创建类,并且设定其两个值.---注意,动画类的最后的值并不会还原.

           --------当忽略From时,将从当前值到To值

           -----------当忽略了to时,将从当前值到依赖性的期待值.

            DoubleAnimation widthAnimation = new DoubleAnimation();
            widthAnimation.Duration = TimeSpan.FromSeconds(5);
            DoubleAnimation heightAnimation = new DoubleAnimation();
            heightAnimation.Duration = TimeSpan.FromSeconds(5);

            cmdGrow.BeginAnimation(Button.WidthProperty, widthAnimation);
            cmdGrow.BeginAnimation(Button.HeightProperty, heightAnimation);

           -------------By...定义增大量.

 DoubleAnimation widthAnimation = new DoubleAnimation();
            widthAnimation.By = 10;
            widthAnimation.Duration = TimeSpan.FromSeconds(0.5);

            cmdGrowIncrementally.BeginAnimation(Button.WidthProperty, widthAnimation);

  Duration---对象:设定动画动作间隔

Duration可以和TimeSpan进行转换.并且设定了两个值

Duration.Automatic---持续1秒
Duration.Forever---永远不动

   如何还原对象之前的值:

AutoReverse属性=true的动画,在执行到指定值之后会继续进行反向动画直到还原.

FillBehavior=Stop,在执行完动画后自动返回.

Duration=Duration.Forever则不执行动画.

使用 如下方法可以删除动画.

cmdGrow.BeginAnimation(Button.WidthProperty, null);

二 ,TimeLine抽象类的属性:

RepeatBehavior:

1,通过次数重复动画: new RepeatBehavior(2)

2,通过事件重复动画:new RepeatBehavior(5)--重复2次半

3,设定IsCumulative;表明在重复的时候,是否从当前动画值开始.

4,不断重复动画.RepeatBehavior.Forever.

三,故事板------在XAML中创建动画

1,创建故事板对象

2,创建触发器

<Button.Triggers>
      <EventTrigger RoutedEvent="Button.Click">
        <EventTrigger.Actions>
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation Storyboard.TargetProperty="Width"
                To="{Binding ElementName=window,Path=Width,Converter={StaticResource converter},ConverterParameter=-30}"
                               Duration="0:0:5"></DoubleAnimation>
              <DoubleAnimation Storyboard.TargetProperty="Height"
                To="{Binding ElementName=window,Path=Height,Converter={StaticResource converter},ConverterParameter=-50}"
                               Duration="0:0:5"></DoubleAnimation>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
    </Button.Triggers>

------------------使用Convert将String类型转换到需要类型

public class ArithmeticConverter : IValueConverter
    {
        private const string ArithmeticParseExpression = "([+\-*/]{1,1})\s{0,}(\-?[\d\.]+)";
        private Regex arithmeticRegex = new Regex(ArithmeticParseExpression);

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {

            if (value is double && parameter != null)
            {
                string param = parameter.ToString();

                if (param.Length > 0)
                {
                    Match match = arithmeticRegex.Match(param);
                    if (match != null && match.Groups.Count == 3)
                    {
                        string operation = match.Groups[1].Value.Trim();
                        string numericValue = match.Groups[2].Value;

                        double number = 0;
                        if (double.TryParse(numericValue, out number)) // this should always succeed or our regex is broken
                        {
                            double valueAsDouble = (double)value;
                            double returnValue = 0;

                            switch (operation)
                            {
                                case "+":
                                    returnValue = valueAsDouble + number;
                                    break;

                                case "-":
                                    returnValue = valueAsDouble - number;
                                    break;

                                case "*":
                                    returnValue = valueAsDouble * number;
                                    break;

                                case "/":
                                    returnValue = valueAsDouble / number;
                                    break;
                            }

                            return returnValue;
                        }
                    }
                }
            }

            return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new Exception("The method or operation is not implemented.");
        }

    }

使用触发器进行触发:

<Style TargetType="ListBoxItem">
            <Style.Setters>
                <Setter Property="FontSize" Value="30"/>
            </Style.Setters>
            <Style.Triggers>
                <EventTrigger RoutedEvent="ListBoxItem.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard >
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="FontSize"
                                                 BeginTime="0:0:0.1"
                                                 Duration="0:0:0.2"
                                                 To="40"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="ListBoxItem.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard >
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="FontSize"
                                                 BeginTime="0:0:0.1"
                                                 Duration="0:0:0.2"
                                                 ></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>

四,控制动画---

制作界面:

1,界面元素:

5个按钮,对应Storyboard的效果:

<EventTrigger SourceName="cmdStart" RoutedEvent="Button.Click">
        <BeginStoryboard Name="fadeStoryboardBegin">
          <!-- The SpeedRatio binding makes sure the initial speed matches the slider.
               The Slider's event handling code makes sure the speed is updated when
               the slider is moved. -->
          <Storyboard Name="fadeStoryboard" CurrentTimeInvalidated="storyboard_CurrentTimeInvalidated"
                      SpeedRatio="{Binding ElementName=sldSpeed,Path=Value}">
            <DoubleAnimation
                Storyboard.TargetName="imgDay"
                Storyboard.TargetProperty="Opacity"
                From="1" To="0" Duration="0:0:10" RepeatBehavior="Forever" Completed="DoubleAnimation_Completed" ></DoubleAnimation>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>

      <EventTrigger SourceName="cmdPause" RoutedEvent="Button.Click">
        <PauseStoryboard BeginStoryboardName="fadeStoryboardBegin"></PauseStoryboard>
      </EventTrigger>
      <EventTrigger SourceName="cmdResume" RoutedEvent="Button.Click">
        <ResumeStoryboard BeginStoryboardName="fadeStoryboardBegin"></ResumeStoryboard>
      </EventTrigger>
      <EventTrigger SourceName="cmdStop" RoutedEvent="Button.Click">
        <StopStoryboard BeginStoryboardName="fadeStoryboardBegin"></StopStoryboard>
      </EventTrigger>
      <EventTrigger SourceName="cmdMiddle" RoutedEvent="Button.Click">
        <SeekStoryboard BeginStoryboardName="fadeStoryboardBegin"
                        Offset="0:0:5"></SeekStoryboard>
      </EventTrigger>

使用这个画刷进行更新画面

<Grid>
    <Grid.RowDefinitions>
      <RowDefinition></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>

    </Grid.RowDefinitions>
    <Grid>
      <Image Source="night.jpg"></Image>
      <Image Source="day.jpg" Name="imgDay">
        <Image.OpacityMask>
          <LinearGradientBrush StartPoint="0,0" EndPoint="1,0.2">
            <GradientStop Offset="0" Color="Transparent" x:Name="transparentStop" />
            <GradientStop Offset="0" Color="Black" x:Name="visibleStop" />
          </LinearGradientBrush>
        </Image.OpacityMask>
      </Image>
    </Grid>

      <Button Name="cmdStart" Grid.Row="1" Padding="5" Margin="5">
        Start
        <Button.Triggers>
          <EventTrigger SourceName="cmdStart" RoutedEvent="Button.Click">
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                    Storyboard.TargetName="transparentStop"
                    Storyboard.TargetProperty="Offset" BeginTime="0:0:0.2"
                    From="0" To="1" Duration="0:0:1" ></DoubleAnimation>
                <DoubleAnimation
                    Storyboard.TargetName="visibleStop"
                    Storyboard.TargetProperty="Offset"
                    From="0" To="1.2" Duration="0:0:1.2" ></DoubleAnimation>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>

        </Button.Triggers>
      </Button>




  </Grid>

4,通过事件更新信息:

 private void storyboard_CurrentTimeInvalidated(object sender, EventArgs e)
        {
            // Sender is the clock that was created for this storyboard.
            Clock storyboardClock = (Clock)sender;

            if (storyboardClock.CurrentProgress == null)
            {
                lblTime.Text = "[[ stopped ]]";
                progressBar.Value = 0;
            }
            else
            {
                lblTime.Text = storyboardClock.CurrentTime.ToString();
                progressBar.Value = (double)storyboardClock.CurrentProgress;
            }
        }

五,缓动函数:

 <Storyboard>
                                <DoubleAnimation
   Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width"
   To="400" Duration="0:0:1.5">
                                    <DoubleAnimation.EasingFunction>
                                        <ElasticEase EasingMode="EaseInOut" Oscillations="10" ></ElasticEase>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>

EasingMode:In,Out,InOut时候是效果不同的.

创建自定义函数:

public class RandomJitterEase : EasingFunctionBase
    {
        // Store a random number generator.
        private Random rand = new Random();

        protected override double EaseInCore(double normalizedTime)
        {
            //To see the values add code like this:
            //System.Diagnostics.Debug.WriteLine(...);

            // Make sure there's no jitter in the final value.
            if (normalizedTime == 1) return 1;

            // Offset the value by a random amount.
            return Math.Abs(normalizedTime - (double)rand.Next(0,10)/(2010 - Jitter));
        }

        public int Jitter
        {
            get { return (int)GetValue(JitterProperty); }
            set { SetValue(JitterProperty, value); }
        }

        public static readonly DependencyProperty JitterProperty =
            DependencyProperty.Register("Jitter", typeof(int), typeof(RandomJitterEase),
            new UIPropertyMetadata(1000), new ValidateValueCallback(ValidateJitter));

        private static bool ValidateJitter(object value)
        {
            int jitterValue = (int)value;
            return ((jitterValue <= 2000) && (jitterValue >= 0));
        }

        // This required override simply provides a live instance of your easing function.
        protected override Freezable CreateInstanceCore()
        {
            return new RandomJitterEase();
        }

       1,创建一个EasingFunctionBase 的派生类.

                      添加新的依赖性属性Jitter.

                     重写EaseInCore和CreateInstanceCore()函数.

然后,在xaml中进行引用.

xmlns:local="clr-namespace:Animation">

6,动画速率

<BeginStoryboard x:Key="beginStoryboard">
      <Storyboard Timeline.DesiredFrameRate="{Binding ElementName=txtFrameRate,Path=Text}">
        <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Canvas.Left)"
                         From="0" To="300" Duration="0:0:5">
        </DoubleAnimation>
        <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Canvas.Top)"
                         From="300" To="0" AutoReverse="True" Duration="0:0:2.5"
                         DecelerationRatio="1">
        </DoubleAnimation>
      </Storyboard>
    </BeginStoryboard>

7,位图缓存:

 PathGeometry pathGeometry = new PathGeometry();
            PathFigure pathFigure = new PathFigure();

            pathFigure.StartPoint = new Point(0,0);

            PathSegmentCollection pathSegmentCollection = new PathSegmentCollection();

            int maxHeight = (int)this.Height;
            int maxWidth = (int)this.Width;
            Random rand = new Random();
            for (int i = 0; i < 500; i++)
            {
                LineSegment newSegment = new LineSegment();
                newSegment.Point = new Point(rand.Next(0, maxWidth), rand.Next(0, maxHeight));
                pathSegmentCollection.Add(newSegment);
            }

            pathFigure.Segments = pathSegmentCollection;
            pathGeometry.Figures.Add(pathFigure);

            pathBackground.Data = pathGeometry;

使用代码创建背景

 private void chkCache_Click(object sender, RoutedEventArgs e)
        {
            if (chkCache.IsChecked == true)
            {
                BitmapCache bitmapCache = new BitmapCache();
                pathBackground.CacheMode = new BitmapCache();
            }
            else
            {
                pathBackground.CacheMode = null;
            }
        }