ui设计做app网站要学什么店铺推广软文范例

一、动画合集

创建一个Storyboard演示画板，在画板里对动画进行定义与处理。

常见动画类型

提醒：更多介绍可查看microsoft提供的相关文档

DoubleAnimation                               //普通Double型控制动画

DoubleAnimationUsingKeyFrames //Double型关键帧动画

ObjectAnimationUsingKeyFrames  //Object型关键帧动画

ColorAnimationUsingKeyFrames    //Color型关键帧动画

StringAnimationUsingKeyFrames    //String型关键帧动画

MatrixAnimationUsingPath              //沿路径型动画

1、资源里添加动画资源

注意：开始动画得自己规划逻辑（触发器、事件都可）

     var storybd = this.FindResource("storybd") as Storyboard;storybd.Begin();

    <Window.Resources><Storyboard x:Key="storybd"><DoubleAnimation AutoReverse="True"By="0.1"RepeatBehavior="Forever"Storyboard.TargetName="btn"Storyboard.TargetProperty="Opacity"From="0.0" /><DoubleAnimation AutoReverse="True"RepeatBehavior="Forever"Storyboard.TargetName="btn"Storyboard.TargetProperty="(Control.Background).(RadialGradientBrush.GradientStops)[1].Offset"From="1"To="0"Duration="0:0:1" /></Storyboard></Window.Resources>

2、事件触发器里开始一个动画

        <Rectangle Name="Rect"Width="70"Height="80"Margin="279,0,0,0"HorizontalAlignment="Left"VerticalAlignment="Center"Fill="Green"><Rectangle.Triggers><EventTrigger RoutedEvent="Rectangle.Loaded"><BeginStoryboard><Storyboard><DoubleAnimation AutoReverse="True"RepeatBehavior="Forever"Storyboard.TargetName="Rect"Storyboard.TargetProperty="Opacity"From="1"To="0"Duration="0:0:1" /></Storyboard></BeginStoryboard></EventTrigger></Rectangle.Triggers></Rectangle>

3、Double型关键帧动画

<DoubleAnimationUsingKeyFrames AutoReverse="True"RepeatBehavior="Forever"Storyboard.TargetName="Rect"Storyboard.TargetProperty="(FrameworkElement.Width)"><EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />                        <EasingDoubleKeyFrame KeyTime="0:0:5" Value="70" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames AutoReverse="True"RepeatBehavior="Forever"Storyboard.TargetName="Rect"Storyboard.TargetProperty="(FrameworkElement.Height)"><EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" /><EasingDoubleKeyFrame KeyTime="0:0:5" Value="80" />
</DoubleAnimationUsingKeyFrames>

4、Object型关键帧动画 

   <Window.Resources><Storyboard x:Key="story"><ObjectAnimationUsingKeyFrames Storyboard.TargetName="img" AutoReverse="True" RepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.Visibility)"><DiscreteObjectKeyFrame KeyTime="0:0:0.03" Value="{x:Static Visibility.Hidden}"/><DiscreteObjectKeyFrame KeyTime="0:0:0.06" Value="{x:Static Visibility.Visible}"/></ObjectAnimationUsingKeyFrames></Storyboard></Window.Resources>

5、Color型关键帧动画

      <Storyboard x:Key="story"><ColorAnimationUsingKeyFrames AutoReverse="True"RepeatBehavior="Forever"Storyboard.TargetName="btn"Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"><EasingColorKeyFrame KeyTime="0" Value="Red" /><EasingColorKeyFrame KeyTime="0:0:0.5" Value="Blue" /><DiscreteColorKeyFrame KeyTime="0:0:1" Value="Red" /><DiscreteColorKeyFrame KeyTime="0:0:1.5" Value="Yellow" /></ColorAnimationUsingKeyFrames></Storyboard>

6、String型关键帧动画

FillBehavior，动画结束时行为

                        HoldEnd：保持在动画结束的最后一帧画面

                        Stop：动画结束，恢复动画开始前的画面

            <StringAnimationUsingKeyFrames FillBehavior="HoldEnd"Storyboard.TargetName="btn"Storyboard.TargetProperty="(Button.Content)"><DiscreteStringKeyFrame KeyTime="0" Value="5s" /><DiscreteStringKeyFrame KeyTime="0:0:1" Value="4s" /><DiscreteStringKeyFrame KeyTime="0:0:2" Value="3s" /><DiscreteStringKeyFrame KeyTime="0:0:3" Value="2s" /><DiscreteStringKeyFrame KeyTime="0:0:4" Value="1s" /><DiscreteStringKeyFrame KeyTime="0:0:5" Value="0s" /></StringAnimationUsingKeyFrames>

7、Matrix型沿路径动画

使用如下：

移动控件可用RenderTransformOrigin="0.5,0.5"，切换位置转换的中心点；

DoesRotateWithTangent：按切换方向旋转；

PathGeometry：指定路径；

 <Rectangle.RenderTransform><MatrixTransform /></Rectangle.RenderTransform><MatrixAnimationUsingPath AutoReverse="True"DoesRotateWithTangent="True"PathGeometry="{StaticResource Path2}"RepeatBehavior="Forever"Storyboard.TargetName="Rect"Storyboard.TargetProperty="RenderTransform.Matrix"Duration="0:0:3" />

二、扩展

1、流动Path

 StrokeDashArray ：分段长度

 StrokeDashOffset：分段偏移值（改变该值实现流动效果）

 StrokeDashArray="5"  StrokeDashOffset="{Binding OffSet}"

2、变形

控制变形的属性：RenderTransform：呈现变形（定义在UIElement类中）；

                             LayoutTransform：布局变形（定义在FrameworkElement类中）；

 其数据类型都是Transform抽象类

 Transform派生类;

1、MatrixTransform：矩阵变形

2、RotateTransform：旋转变形

3、ScaleTransform：坐标系变形

4、SkewTransform：拉伸变形

5、TranslateTransform：偏移变形

6、TransformGroup：变形组（多个独立变形合成一个变形组）