silverlight中用代码动态控制Storyboard(动画)属性的三种方法

先准备一个基本的xaml页面

Code
 1<navigation:Page 
 2           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
 3           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
 4           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6           mc:Ignorable="d"
 7           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
 8           x:Class="Projection.Test.TestPage"
 9           d:DesignWidth="640" d:DesignHeight="480"
10           Title="TestPage Page">
11    <navigation:Page.Resources>
12        
13        <Storyboard x:Name="storyTest">
14            
15            <!--绕y轴旋转,从0到360,再转到720度-->
16            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="img" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
17                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="360"/>
18                <EasingDoubleKeyFrame KeyTime="00:00:02" Value="720"/>
19            </DoubleAnimationUsingKeyFrames>
20            
21            <!--宽度按比例放大缩小,先放大到4位,再还原-->
22            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="img" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
23                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="4"/>
24                <EasingDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
25            </DoubleAnimationUsingKeyFrames>
26            
27            <!--高度按比例放大缩小,先放大到4位,再还原-->
28            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="img" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
29                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="4"/>
30                <EasingDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
31            </DoubleAnimationUsingKeyFrames>            
32            
33            <!--不透明度变化,从1到0.1,再还原为1-->
34            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="img" Storyboard.TargetProperty="(UIElement.Opacity)">
35                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0.1"/>
36                <EasingDoubleKeyFrame KeyTime="00:00:02" Value="1"/>
37            </DoubleAnimationUsingKeyFrames>
38        </Storyboard>
39        
40    </navigation:Page.Resources>
41    <Grid x:Name="LayoutRoot">
42
43        <Image x:Name="img" Source="/Projection;Component/img/img0.jpg" Width="100" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
44            <Image.RenderTransform>
45                <TransformGroup>
46                    <ScaleTransform/>
47                    <SkewTransform/>
48                    <RotateTransform/>
49                    <TranslateTransform/>
50                </TransformGroup>
51            </Image.RenderTransform>
52            <Image.Projection>
53                <PlaneProjection/>
54            </Image.Projection>
55            <Image.Effect>
56                <DropShadowEffect/>
57            </Image.Effect>
58        </Image>
59
60    </Grid>
61</navigation:Page>

结构不复杂,里面就放了一张图片,同时预置了一个动画storyTest,里面把几种常见的动画形式都列在里面了,下面就来看看如何动态改变storyTest动画的属性(比如改变旋转的起始角度之类)

1.直接加x:Name,然后引用赋值

1<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="img" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
2    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="360" x:Name="yFrom"/>
3    <EasingDoubleKeyFrame KeyTime="00:00:02" Value="720" x:Name="yTo"/>
4</DoubleAnimationUsingKeyFrames>
5

注意高亮部分,然后象这样引用

System.Windows.Media.Animation.EasingDoubleKeyFrame yFrom = this.FindName("yFrom") as System.Windows.Media.Animation.EasingDoubleKeyFrame;

yFrom.Value = 20;

这样我们就把00:00:01秒时角度由360改为20度了

2.利用StoryBoard的Children属性

 DoubleAnimationUsingKeyFrames _rotate = storyTest.Children[0] as DoubleAnimationUsingKeyFrames;
 _rotate.KeyFrames[0].Value = 90;//修改旋转角度的值
 _rotate.KeyFrames[1].Value = 180;

 storyTest.RepeatBehavior = RepeatBehavior.Forever;//指定为一直播放
 //this.storyTest.RepeatBehavior = new RepeatBehavior(2);//播放2次

这样我们就把旋转的角度值从360,720改为90,180了

说明:StoryBoard的Children属性得到的是一个Timeline的集合,而DoubleAnimationUsingKeyFrames等这些基本的关键帧类型都是继承自Timeline,因此可以用as安全的把Timeline向下转化为DoubleAnimationUsingKeyFrames

3.动态添加/删除关键帧

当xaml中预定义的关键帧不满足要求时,这种方法就几乎成了唯一选择

storyTest.Children.Clear();//清除原来的动画设定,仅保留一个空壳           

DoubleAnimationUsingKeyFrames _new_rotate = new DoubleAnimationUsingKeyFrames();

EasingDoubleKeyFrame _frame1 = new EasingDoubleKeyFrame();
_frame1.Value = 180;
_frame1.KeyTime = new TimeSpan(0, 0, 0, 1);

EasingDoubleKeyFrame _frame2 = new EasingDoubleKeyFrame();
_frame2.Value = 0;
_frame2.KeyTime = new TimeSpan(0, 0, 0, 2);

EasingDoubleKeyFrame _frame3 = new EasingDoubleKeyFrame();
_frame3.Value = 90;
_frame3.KeyTime = new TimeSpan(0, 0, 0, 5);

_new_rotate.KeyFrames.Add(_frame1);
_new_rotate.KeyFrames.Add(_frame2);
_new_rotate.KeyFrames.Add(_frame3);

storyTest.Children.Add(_new_rotate);

Storyboard.SetTarget(_new_rotate, this.img);
Storyboard.SetTargetProperty(_new_rotate, new PropertyPath("(UIElement.Projection).(PlaneProjection.RotationY)"));

storyTest.AutoReverse = false;

//storyTest.FillBehavior = FillBehavior.Stop;//加入这一行后,不管AutoReverse设置为何值,都会回复原状            

storyTest.Begin();

在这里我们把原来storyTest中的动画设定全部清空 了,同时增加了一个三帧的动画

欢迎转载,但请注明来自菩提树下的杨过(http://yjmyzz.cnblogs.com/)

时间: 2024-09-23 10:50:51

silverlight中用代码动态控制Storyboard(动画)属性的三种方法的相关文章

Android Activity进出动画三种方法

Android Activity进出动画三种方法 实现activity的进出场动画总共有3种方式,下面会一一列出,首先给出示例的动画xml文件. 动画的xml文件 <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:fromYDelta="

实现Flash动画文件全屏效果的三种方法

flash动画 实现Flash动画文件全屏效果的三种方法 第一种方法: 不显示浏览器菜单栏.工具栏的全屏.这种全屏稍稍复杂,也与FLASH的设置无关,但要借助JavaScript来完成.方法是:在HTML文件中<head></head>间加入以下代码: <script language="JavaScript"> <!-- window.open("nfd.swf","","fullscreen

Flash制作雪花视觉动画效果的三种制作方法

Flash制作雪花视觉动画效果的三种制作方法 第一种方法: 最笨但也效果最好,就是用"引导线"功能,让雪花不停的飘呀飘,如果多用几个图层,效果更好.1.新建一个Flash影片.设背景为"黑色",其他的用默认值.2.按Ctrl+F8新建一个组件,类型为"影片剪辑",命名为"雪花".在它的正中用"铅笔"工具画一个不规则的多边形,然后用"颜料桶工具"将它填上白色.(如图1-1所示) 3.再用C

JQuery设置和去除disabled属性的5种方法总结_jquery

复制代码 代码如下: //两种方法设置disabled属性 $('#areaSelect').attr("disabled",true); $('#areaSelect').attr("disabled","disabled"); //三种方法移除disabled属性 $('#areaSelect').attr("disabled",false); $('#areaSelect').removeAttr("disab

JS创建事件的三种方法(实例代码)_基础知识

1.普通的定义方式 <input type="button" name="Button" value="确定" onclick="Sfont=prompt('请在文本框中输入红色','红色',' 提示框 '); if(Sfont=='红色'){ form1.style.fontFamily='黑体'; form1.style.color='red'; }" /> 这是最常见的一种定义方式,直接将JS事件定义在需要的

用JS动态改变表单form里的action值属性的两种方法_javascript技巧

方法1: <form id="form1" name="form1" method="post" action="../news/index.asp"> <table width="100%" height="43" border="0" cellpadding="0" cellspacing="0">

java-请问:用Java代码中实现在一个类编写两种方法,下面的代码接下来怎么办呢?谢谢!

问题描述 请问:用Java代码中实现在一个类编写两种方法,下面的代码接下来怎么办呢?谢谢! 解决方案 啥东西,写两个方法,那你就写两个函数就行了,什么怎么办 解决方案二: 你的类里不就2个方法了吗

纯javascript代码实现计算器功能(三种方法)_javascript技巧

今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 方法一: 具体编写代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q

Android 自定义弹性ListView控件实例代码(三种方法)

关于在Android中实现ListView的弹性效果,有很多不同的方法,网上一搜,也有很多,下面贴出在项目中经常用到的两种实现ListView弹性效果的方法(基本上拿来就可以用),供大家参考: 弹性ListView 第一种方法: import android.content.Context; import android.content.res.Configuration; import android.util.AttributeSet; import android.util.Display