Silverlight学习笔记（3）——动画Storyboard

于 2013-06-23 20:49:22 发布
阅读量770 收藏
点赞数
分类专栏： .NET
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xwlyun/article/details/9156843
版权

本文将建立一个silverlight项目中的运用Storyboard故事板的简单实例，以下是详细步骤：

　　在Silverlight项目中新建一个silverlight页，修改Grid布局，

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions >
            <RowDefinition Height="100"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions >
            <ColumnDefinition Width="100"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

将Grid设置成两行两列，第一行固定高度100，第一列固定宽度100

　　在Grid的第一行第一列位置，放置一个Border区域，里面放置一个Canvas控件，Canvas控件内部我们可以很方便的设置元素的坐标，

<Border Grid.Row="0" Grid.Column="0" Background="#38B0DE" BorderBrush="#FFFFFFFF" BorderThickness="2" CornerRadius="10">
            <Canvas  >
            </Canvas>
        </Border>

在Canvas中，放置一个星型的图案，需要添加引用xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"，

<Border Grid.Row="0" Grid.Column="0" Background="#38B0DE" BorderBrush="#FFFFFFFF" BorderThickness="2" CornerRadius="10">
            <Canvas  >

                <ed:RegularPolygon x:Name="logo_star1" Stroke="White" StrokeThickness="2" Height="80" InnerRadius="0.8" PointCount="6" Width="80" Margin="10,10,0,0" RenderTransformOrigin="0.5,0.5">
                    <ed:RegularPolygon.RenderTransform>
                        <CompositeTransform/>
                    </ed:RegularPolygon.RenderTransform>
                </ed:RegularPolygon>

            </Canvas>
        </Border>

RegularPolygon控件，设置名字Name为logo_star1，这样我们可以在后续的动画中使用到它，边框Stroke设置为白色宽度2，高度和宽度都为80，内半径InnerRadius设为0.8，数字越大星型越饱满，设置PointCount=6为六星图案，由于我们将要实现一个星型旋转的效果，所以添加星型旋转中心坐标RenderTransformOrigin=“0.5,05”，添加转换属性CompositeTransform，这样我们在后续的动画中可以使用到它，

添加Canvas中触发器的Loaded加载完毕事件，

       <Border Grid.Row="0" Grid.Column="0" Background="#38B0DE" BorderBrush="#FFFFFFFF" BorderThickness="2" CornerRadius="10">
            <Canvas  >

                <ed:RegularPolygon x:Name="logo_star1" Stroke="White" StrokeThickness="2" Height="80" InnerRadius="0.8" PointCount="6" Width="80" Margin="10,10,0,0" RenderTransformOrigin="0.5,0.5">
                    <ed:RegularPolygon.RenderTransform>
                        <CompositeTransform/>
                    </ed:RegularPolygon.RenderTransform>
                </ed:RegularPolygon>

                <Canvas.Triggers >
                    <EventTrigger RoutedEvent="Canvas.Loaded">
                        <EventTrigger.Actions >
                            <BeginStoryboard >
                                <Storyboard x:Name="logo_story" RepeatBehavior="Forever">
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="logo_star1">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:8" Value="360"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Canvas.Triggers>
            </Canvas>
        </Border>

加载完毕，将执行动作Actions，开始一个动画BeginStoryboard，设置动画循环播放RepeatBehavior="Forever"，设置一组KeyFrame对Double值进行动画处理，Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"设置动画控制的元素属性为：UIElement元素转换RenderTransform的Rotation旋转属性，添加关键帧在0时值为0，在0:0:8时值为360，这样将看到元素在8秒的时间旋转一个360°，

相似的我们再添加一个星型，完整的Border区域设置如下，

        <Border Grid.Row="0" Grid.Column="0" Background="#38B0DE" BorderBrush="#FFFFFFFF" BorderThickness="2" CornerRadius="10">
            <Canvas  >

                <ed:RegularPolygon x:Name="logo_star1" Stroke="White" StrokeThickness="2" Height="80" InnerRadius="0.8" PointCount="6" Width="80" Margin="10,10,0,0" RenderTransformOrigin="0.5,0.5">
                    <ed:RegularPolygon.RenderTransform>
                        <CompositeTransform/>
                    </ed:RegularPolygon.RenderTransform>
                </ed:RegularPolygon>

                <ed:RegularPolygon x:Name="logo_star2" Stroke="White" StrokeThickness="2" Height="60" InnerRadius="0.8" PointCount="6" Width="60" Margin="20,20,0,0" RenderTransformOrigin="0.5,0.5">
                    <ed:RegularPolygon.RenderTransform>
                        <CompositeTransform/>
                    </ed:RegularPolygon.RenderTransform>
                </ed:RegularPolygon>

                <Canvas.Triggers >
                    <EventTrigger RoutedEvent="Canvas.Loaded">
                        <EventTrigger.Actions >
                            <BeginStoryboard >
                                <Storyboard x:Name="logo_story" RepeatBehavior="Forever">
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="logo_star1">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:8" Value="360"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="logo_star2">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:4" Value="-360"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:8" Value="-720"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="logo_star2">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:8" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Canvas.Triggers>
            </Canvas>
        </Border>

重新生成项目，F5运行一下，可以看到一个旋转动画的logo图案

 

　　在Grid中，我们添加两个Border区域，一个放置Button用以控制动画，一个放置一个Canvas控件用以显示动画，

        <Border Grid.Row="0" Grid.Column="1" Background="#38B0DE" BorderBrush="#FFFFFFFF" BorderThickness="2" CornerRadius="10" >
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" >
                <Button x:Name="btn_snow" Width="150" Height="50" Content="snow" FontSize="30" FontWeight="Bold" Click="btn_snow_Click" />
            </StackPanel>
        </Border>

        <Border Grid.Row="1" Grid.ColumnSpan="2" Background="#38B0DE" BorderBrush="#FFFFFFFF" BorderThickness="2" CornerRadius="10">
            <Canvas x:Name="canvas_sky" >

            </Canvas>
        </Border>

下面我们将添加一个动画，但与前面的logo动画不同，这次将在后台代码code中完成

　　添加Button的点击事件，在点击事件中添加一个雪花下落的动画，

        private void btn_snow_Click(object sender, RoutedEventArgs e)
        {
            Canvas canvas_star = new Canvas();
            canvas_star.Width = 100;
            canvas_star.Height = 100;
            Random rd = new Random();
            canvas_star.SetValue(Canvas.LeftProperty, rd.NextDouble() * 600);
            canvas_star.Loaded += new RoutedEventHandler(canvas_star_Loaded);

            this.canvas_sky.Children.Add(canvas_star);

            DoubleAnimation da = new DoubleAnimation();
            Storyboard.SetTargetProperty(da, new PropertyPath("(Canvas.Top)"));
            Storyboard.SetTarget(da, canvas_star);
            da.From = 0;
            da.To = 400;
            da.Duration = new Duration(new TimeSpan(0, 0, 8));
            da.RepeatBehavior = RepeatBehavior.Forever;
            Storyboard story = new Storyboard();
            story.Children.Add(da);
            story.Begin();
        }

新建一个canvas_star用以显示雪花，设置canvas_star的宽高为100，SetValue设置在父元素Canvas中距左侧的距离为一个随机数，设置一个对Double值的动画da，设置它控制着canvas_star的Canvas.Top在父元素Canvas中距顶部的距离，设置动画da控制的元素对象SetTarget为canvas_star，动画数值From 0，To 400，动画时间Duration为8秒，动画为循环播放RepeatBehavior为Forever，最后将动画da 加入到故事板story中，并且开始Begin故事板，

这里添加了canvas_star的加载完毕事件，在里面我们将完成对雪花的描述，

        void canvas_star_Loaded(object sender, RoutedEventArgs e)
        {
            RegularPolygon star = new RegularPolygon();
            star.Stroke = new SolidColorBrush(Colors.White);
            star.StrokeThickness = 3;
            star.Height = 80;
            star.Width = 80;
            star.Margin = new Thickness(10, 10, 0, 0);
            star.PointCount = 6;
            star.InnerRadius = 0.8;
            star.RenderTransform = new CompositeTransform();
            (star.RenderTransform as CompositeTransform).CenterX = 40;
            (star.RenderTransform as CompositeTransform).CenterY = 40;

            Canvas canvas = sender as Canvas;
            canvas.Children.Add(star);
            Storyboard story = new Storyboard();

            DoubleAnimationUsingKeyFrames da_keys = new DoubleAnimationUsingKeyFrames();
            da_keys.RepeatBehavior = RepeatBehavior.Forever;
            Storyboard.SetTargetProperty(da_keys, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.Rotation)"));
            Storyboard.SetTarget(da_keys, star);
            EasingDoubleKeyFrame da_keys_key1 = new EasingDoubleKeyFrame();
            da_keys_key1.KeyTime = KeyTime.FromTimeSpan(new TimeSpan(0, 0, 0));
            da_keys_key1.Value = 0;
            EasingDoubleKeyFrame da_keys_key2 = new EasingDoubleKeyFrame();
            da_keys_key2.KeyTime = KeyTime.FromTimeSpan(new TimeSpan(0, 0, 8));
            da_keys_key2.Value = 360;
            da_keys.KeyFrames.Add(da_keys_key1);
            da_keys.KeyFrames.Add(da_keys_key2);
            story.Children.Add(da_keys);

            story.Begin();
        }

添加一个星型RegularPolygon元素star，基本设置同前面logoBorder里面的一样，star.RenderTransform = new CompositeTransform();并且设置旋转中心坐标(star.RenderTransform as CompositeTransform).CenterX = 40;(star.RenderTransform as CompositeTransform).CenterY = 40;

Canvas canvas = sender as Canvas;将星元素star添加到canvas_star中，设置一组KeyFrame对Double值进行动画处理，循环播放RepeatBehavior=Forever，Storyboard.TargetProperty设置动画控制的属性为"(UIElement.RenderTransform).(CompositeTransform.Rotation)"，设置动画控制对象是星元素star，添加关键帧EasingDoubleKeyFrame，在0时值为0，在0:0:8时值为360，这样将看到元素在8秒的时间旋转一个360°，将关键帧添加到关键帧集合中，将关键帧集合添加到故事板story中，并且开始Begin动画

　　重新生成项目，F5运行，点击button，后台代码将new 一个canvas，canvas中将生成一个旋转的雪花图案，本身canvas也有下落的动画，雪花的横坐标将由随机数生成，效果如下

 

Silverlight学习笔记目录



影天
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值