前言
经常在博客园看大家的文章，由于本人文笔太烂，没写过博客和小伙伴们分享过，昨天看到安卓同事做的那个按钮比较不错，就想着也做个。现在把过程写出来，请大家不吝赐教（第一次发博客不会排版。。。）大家凑合看吧
开始
一般要做动画之前，习惯用blend先做个动画，因为blend做动画很快，可以方便的看到动画的效果，待动画调试差不多的时，用vs打开 （一个展开的动画和一个收回的动画，其实设置下Storyboard的AutoReverse属性可以自动执行收回的动画但是过程没办法控制，只能写两个动画分开）
根据需求，如有动画比较灵活，那就要把生成的xaml代码转化为C#代码了。（用blend的好处就是调试动画很方便转化为C#代码的时候也比较很简单），其中用到了四个动画X轴的平移，Y轴的平移，中心点的旋转，属性值的改变。
代码用到了关键帧动画，所以看起来比较长，其实可以不用关键帧动画，直接DoubleAnimation就行
这个动画主要控制五个按钮的旋转，从-360到0之间的旋转动画
Storyboard expand = new Storyboard(); for (int i = 0; i < 5; i++) { //旋转动画 DoubleAnimationUsingKeyFrames rotation = new DoubleAnimationUsingKeyFrames(); Storyboard.SetTargetProperty(rotation, "(UIElement.RenderTransform).(CompositeTransform.Rotation)"); //只有动画在xaml中才可以使用这个方法 // Storyboard.SetTargetName(rotation, "image" + i); Storyboard.SetTarget(rotation, this.FindName("image"+i) as Image); EasingDoubleKeyFrame startAngle = new EasingDoubleKeyFrame(); startAngle.Value = -360; startAngle.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0)); rotation.KeyFrames.Add(startAngle); if (i==2) { rotation.BeginTime = TimeSpan.FromMilliseconds(50); } else if (i==3) { rotation.BeginTime = TimeSpan.FromMilliseconds(100); } else if (i==4) { rotation.BeginTime = TimeSpan.FromMilliseconds(150); } EasingDoubleKeyFrame endAngle = new EasingDoubleKeyFrame(); endAngle.Value = 0; endAngle.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(500)); rotation.KeyFrames.Add(endAngle); expand.Children.Add(rotation); }
rotation.BeginTime = TimeSpan.FromMilliseconds(50);
这个是控制按钮出来时候的顺序，上面的按钮先执行动画。
Y轴平移的动画，每个按钮平移的距离不同所以只能用if else判断了。注意
//只有动画在xaml中才可以使用这个方法
// Storyboard.SetTargetName(rotation, "image" + i);
Storyboard.SetTarget(rotation, this.FindName("image"+i) as Image);//代码生成的动画用这个方法
for (int i = 1; i < 5; i++)
{
//Y轴平移
DoubleAnimationUsingKeyFrames ytransalte = new DoubleAnimationUsingKeyFrames();
Storyboard.SetTargetProperty(ytransalte, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
Storyboard.SetTarget(ytransalte, this.FindName("image" + i) as Image);
//起始点
EasingDoubleKeyFrame ystartPoint = new EasingDoubleKeyFrame();
ystartPoint.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0));
if (i == 1)
{
ystartPoint.Value = 180;
}
else if (i == 2)
{
ytransalte.BeginTime = TimeSpan.FromMilliseconds(50);
ystartPoint.Value = 140;
}
else if (i == 3)
{
ytransalte.BeginTime = TimeSpan.FromMilliseconds(100);
ystartPoint.Value = 82;
}
else if (i == 4)
{
ytransalte.BeginTime = TimeSpan.FromMilliseconds(150);
ystartPoint.Value = 10;
}
ystartPoint.EasingFunction = new PowerEase() { EasingMode = 0 };
//终点
EasingDoubleKeyFrame yendPoint = new EasingDoubleKeyFrame();
yendPoint.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(500));
yendPoint.Value = 0;
yendPoint.EasingFunction = new PowerEase() { EasingMode = 0 };
X轴的动画大同小异，就不写了，下面是Image，是否显示属性值的改变（按钮还未出来的时候，是在页面隐藏的，收回按钮后，又隐藏）
//改变属性值的动画
ObjectAnimationUsingKeyFrames visi = new ObjectAnimationUsingKeyFrames();
Storyboard.SetTargetProperty(visi, "(UIElement.Visibility)");
Storyboard.SetTarget(visi, this.FindName("image" + i) as Image);
DiscreteObjectKeyFrame startObj = new DiscreteObjectKeyFrame();
startObj.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0));
startObj.Value = Visibility.Visible;
DiscreteObjectKeyFrame endObj = new DiscreteObjectKeyFrame();
endObj.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(500));
endObj.Value = Visibility.Visible;
if (i == 2)
{
visi.BeginTime = TimeSpan.FromMilliseconds(50);
}
else if (i == 3)
{
visi.BeginTime = TimeSpan.FromMilliseconds(100);
}
else if (i == 4)
{
visi.BeginTime = TimeSpan.FromMilliseconds(150);
}
visi.KeyFrames.Add(startObj);
visi.KeyFrames.Add(endObj);
expand.Children.Add(visi);
上面是按钮展开的动画，还要写收回的动画，改下展开动画的代码就好了。
效果
前端代码
<Grid> <Canvas HorizontalAlignment="Left" Height="228" Margin="0,402,0,0" VerticalAlignment="Top" Width="234"> <Image x:Name="image0" Height="50" Width="50" Canvas.Top="180" RenderTransformOrigin="0.5,0.5" Source="ms-appx:///Assets/Image/button1.png" Tapped="image0_Tapped"> <Image.RenderTransform> <CompositeTransform/> </Image.RenderTransform> </Image> <Image Visibility="Collapsed" x:Name="image1" Height="50" Width="50" Canvas.Left="45" Source="ms-appx:///Assets/Image/button2.png" RenderTransformOrigin="0.5,0.5"> <Image.RenderTransform> <CompositeTransform/> </Image.RenderTransform> </Image> <Image Visibility="Collapsed" x:Name="image2" Height="50" Width="50" Canvas.Top="40" Canvas.Left="110" Source="ms-appx:///Assets/Image/button3.png" RenderTransformOrigin="0.5,0.5"> <Image.RenderTransform> <CompositeTransform/> </Image.RenderTransform> </Image> <Image Visibility="Collapsed" x:Name="image3" Height="50" Width="50" Canvas.Top="98" Canvas.Left="150" Source="ms-appx:///Assets/Image/button4.png" RenderTransformOrigin="0.5,0.5"> <Image.RenderTransform> <CompositeTransform/> </Image.RenderTransform> </Image> <Image Visibility="Collapsed" x:Name="image4" Height="50" Width="50" Canvas.Top="170" Canvas.Left="175" Source="ms-appx:///Assets/Image/button5.png" RenderTransformOrigin="0.5,0.5" > <Image.RenderTransform> <CompositeTransform/> </Image.RenderTransform> </Image> </Canvas> </Grid>