none
flash里面很容易实现的shape 变形动画在sl里面怎么实现. 例如一个正方形 几秒钟内变成圆形。 RRS feed

  • 问题

  • flash里面很容易实现的shape 变形动画在sl里面怎么实现.  例如一个正方形 几秒钟内变成圆形。
    2009年8月9日 2:39

答案

  • 把正方形变成圆形的动画极其简单,关键是你得调整思路。方是Rectangle,圆是Ellipse,直接把Rectangle变成Ellipse,等于把一个控件变成另一个控件,这显然是不可能的。所以要转变思路,首先你得明白一点,Rectangle不是绝对的方形,它也可以是圆形,所以只需要让方形的Rectangle变成圆形的就行了。

    上代码:

    <UserControl
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:Class="SilverlightApplication1.MainPage" Width="150" Height="150">
     <UserControl.Resources>
      <Storyboard x:Name="Storyboard1">
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Rec" Storyboard.TargetProperty="(Rectangle.RadiusX)">
        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="70"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Rec" Storyboard.TargetProperty="(Rectangle.RadiusY)">
        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="70"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Rec" Storyboard.TargetProperty="(FrameworkElement.Width)">
        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="100"/>
        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="140"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Rec" Storyboard.TargetProperty="(FrameworkElement.Height)">
        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="100"/>
        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="140"/>
       </DoubleAnimationUsingKeyFrames>
      </Storyboard>
     </UserControl.Resources>
     <Grid x:Name="LayoutRoot" Background="White">
      <Rectangle x:Name="Rec" Width="100" Height="100" Fill="Black" HorizontalAlignment="Center" VerticalAlignment="Center" />
     </Grid>
    </UserControl>
    • 已标记为答案 SeekVerity 2009年8月13日 1:57
    2009年8月12日 9:44

全部回复

  • 我以前记得做flash的时候。还可以进行字体的变换。

    例如“我们”这个字变成“他们”。

    好像在sl里不可以做


    视别人的帮助为恩赐~
    2009年8月9日 3:01
  • 我也是偶然想到这个问题,但是想了想好像没有什么好办法。总不能把一个正方形分成多个path,然后一个一个path调整吧。手工调整也保证不了质量呀。如果是用算法调整,是不是太麻烦了!
    2009年8月9日 3:05
  • 你可以试试下以方法:(我用的是SL 3),

    如果是字符串形变也可以使用对象关键帧,我在模拟3D效果的时候也是用对象关键帧才能实现

    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="SilverlightApplication2.MainPage"
    	Width="640" Height="480">
    	<UserControl.Resources>
    		<Storyboard x:Name="Storyboard1">
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
    				<EasingDoubleKeyFrame KeyTime="00:00:00" Value="6"/>
    				<EasingDoubleKeyFrame KeyTime="00:00:04" Value="346"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
    				<EasingDoubleKeyFrame KeyTime="00:00:00" Value="-22"/>
    				<EasingDoubleKeyFrame KeyTime="00:00:04" Value="-20"/>
    			</DoubleAnimationUsingKeyFrames>
    			<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.StartPoint)">
    				<EasingPointKeyFrame KeyTime="00:00:00" Value="111.888253368319,28.8805282524343"/>
    				<EasingPointKeyFrame KeyTime="00:00:04" Value="47.4079895019531,30.0151424407959"/>
    			</PointAnimationUsingKeyFrames>
    			<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(BezierSegment.Point1)">
    				<EasingPointKeyFrame KeyTime="00:00:00" Value="111.888253368319,28.8805282524343"/>
    				<EasingPointKeyFrame KeyTime="00:00:04" Value="47.4079895019531,30.0151405334473"/>
    			</PointAnimationUsingKeyFrames>
    			<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[3].(BezierSegment.Point2)">
    				<EasingPointKeyFrame KeyTime="00:00:00" Value="26.3710021972656,21.0439987182617"/>
    				<EasingPointKeyFrame KeyTime="00:00:04" Value="43.4080200195313,28.0149993896484"/>
    			</PointAnimationUsingKeyFrames>
    			<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[3].(BezierSegment.Point3)">
    				<EasingPointKeyFrame KeyTime="00:00:00" Value="111.888253368319,28.8805282524343"/>
    				<EasingPointKeyFrame KeyTime="00:00:04" Value="47.4079895019531,30.0151424407959"/>
    			</PointAnimationUsingKeyFrames>
    			<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(BezierSegment.Point2)">
    				<EasingPointKeyFrame KeyTime="00:00:00" Value="183.371734619141,42.0439682006836"/>
    				<EasingPointKeyFrame KeyTime="00:00:04" Value="106.408020019531,33.0149993896484"/>
    			</PointAnimationUsingKeyFrames>
    			<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[0].(BezierSegment.Point3)">
    				<EasingPointKeyFrame KeyTime="00:00:00" Value="178.371002197266,98.0439987182617"/>
    				<EasingPointKeyFrame KeyTime="00:00:04" Value="152.407958984375,34.0149059295654"/>
    			</PointAnimationUsingKeyFrames>
    			<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(BezierSegment.Point1)">
    				<EasingPointKeyFrame KeyTime="00:00:00" Value="171.5361328125,174.583435058594"/>
    				<EasingPointKeyFrame KeyTime="00:00:04" Value="158.237646954661,34.1416244513976"/>
    			</PointAnimationUsingKeyFrames>
    			<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(BezierSegment.Point2)">
    				<EasingPointKeyFrame KeyTime="00:00:00" Value="114.51816291773,170.318133180451"/>
    				<EasingPointKeyFrame KeyTime="00:00:04" Value="139.888687623893,119.495896458821"/>
    			</PointAnimationUsingKeyFrames>
    			<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[1].(BezierSegment.Point3)">
    				<EasingPointKeyFrame KeyTime="00:00:00" Value="105.51816291773,172.318133180451"/>
    				<EasingPointKeyFrame KeyTime="00:00:04" Value="146.407989501953,126.014999389648"/>
    			</PointAnimationUsingKeyFrames>
    			<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(BezierSegment.Point1)">
    				<EasingPointKeyFrame KeyTime="00:00:00" Value="96.5181629177303,174.318133180451"/>
    				<EasingPointKeyFrame KeyTime="00:00:04" Value="147.408020019531,127.014999389648"/>
    			</PointAnimationUsingKeyFrames>
    			<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(BezierSegment.Point2)">
    				<EasingPointKeyFrame KeyTime="00:00:00" Value="40.0036641942556,163.962416701205"/>
    				<EasingPointKeyFrame KeyTime="00:00:04" Value="38.4080200195313,131.014999389648"/>
    			</PointAnimationUsingKeyFrames>
    			<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[2].(BezierSegment.Point3)">
    				<EasingPointKeyFrame KeyTime="00:00:00" Value="31.3710021972656,115.043998718262"/>
    				<EasingPointKeyFrame KeyTime="00:00:04" Value="43.4080200195313,123.014999389648"/>
    			</PointAnimationUsingKeyFrames>
    			<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Data).(PathGeometry.Figures)[0].(PathFigure.Segments)[3].(BezierSegment.Point1)">
    				<EasingPointKeyFrame KeyTime="00:00:00" Value="25.3710021972656,81.0439987182617"/>
    				<EasingPointKeyFrame KeyTime="00:00:04" Value="52.6640535816663,108.205345690232"/>
    			</PointAnimationUsingKeyFrames>
    		</Storyboard>
    	</UserControl.Resources>
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<Path x:Name="path" Fill="#FFA35A5A" Stroke="Black" Height="174.583" HorizontalAlignment="Left" Margin="2.629,9.956,0,0" VerticalAlignment="Top" Width="204.985" UseLayoutRounding="False" RenderTransformOrigin="0.5,0.5">
    			<Path.Data>
    				<PathGeometry FillRule="EvenOdd">
    					<PathFigure IsClosed="True" StartPoint="60.3709869384766,79.0442581176758">
    						<BezierSegment Point1="60.3709869384766,79.0442581176758" Point2="135.370986938477,23.0442581176758" Point3="159.370986938477,96.0442504882813"/>
    						<BezierSegment Point1="183.370971679688,169.04426574707" Point2="123.370986938477,163.044387817383" Point3="114.370986938477,165.044387817383"/>
    						<BezierSegment Point1="105.370986938477,167.044387817383" Point2="35.3709907531738,144.044372558594" Point3="48.3709869384766,132.044372558594"/>
    						<BezierSegment Point1="61.3709869384766,120.044372558594" Point2="18.371452331543,96.0441284179688" Point3="60.3709869384766,79.0442581176758"/>
    					</PathFigure>
    				</PathGeometry>
    			</Path.Data>
    			<Path.RenderTransform>
    				<TransformGroup>
    					<ScaleTransform/>
    					<SkewTransform/>
    					<RotateTransform/>
    					<TranslateTransform X="6" Y="-22"/>
    				</TransformGroup>
    			</Path.RenderTransform>
    		</Path>
    	</Grid>
    </UserControl>

    努力!写一个js解析器,一个svg插件,一个绘图程序,做好自己,呵呵~!
    2009年8月9日 8:28
    版主
  • 你的这种方法(由多个pathsegment组合,然后在blend里面进行变形的方法),我最初就想过这样做。我只是觉得这样做太麻烦。而且最大的问题,不精确。
    例如,把一个园变成正方形,就必须人为把一个圆分成四段path,每一段单独生成,然后组合成一个圆。最后在blend里面变形也是一段一段来做。生成的图形
    太粗糙。圆不像圆,正方形不像正方形。
    我的问题是,如果我用Ellipse工具画了一个标准的圆(不要多路径生成的圆),只针对这个圆变成精确的正方形,又该怎么做呢?

    2009年8月9日 9:51
  • 我查阅了Foundation Silverlight 2 Animation 这本书 在第四章Convert object to Path 这一节中有这样一句话:
    在元素上点右键,选择到Path菜单上,然后选择Convert to Path(转换为路径)


    所以我想可不可以使用这个方法先画一个圆,然后转换为路径,最后完成形变动画
    努力!写一个js解析器,一个svg插件,一个绘图程序,做好自己,呵呵~!
    2009年8月9日 12:50
    版主
  • 你好,
    要做到这点用Expression Blend 比较容易. 假设你要把椭圆转换为长方形,可以先拖一个Ellipse上来,然后按Object->Path->Convert to Path.这时候椭圆圆周上会出现四个关键点.
    然后画一个椭圆内接长方形状.这个图形起到辅助作用. 在四个交点上用Pen在椭圆圆周上添加四个关键点.这样一来椭圆现在有八个关键点.
    添加StoryBoard,加两个关键帧. 设置当前修改后面那个关键帧.
    接下来点一下工具栏上的白色箭头.鼠标分别移动到椭圆原始的四个关键点上,按着shift拖动到长方形的边上.按shift的作用是保证直线移动.
    下面是把曲线调整为直线.鼠标移动到由关键点伸出来的两个辅助点上,按alt+shift拖动这个点,移动到相应的长方形边上.
    最后把辅助长方形删除就可以了.

    如果要反过来做也是一样.


    Please remember to mark the replies as answers if they help and unmark them if they provide no help. Need a sample of a technique of Microsoft? Just check out CodeFx first! http://cfx.codeplex.com/
    2009年8月10日 6:16
    版主
  • 把正方形变成圆形的动画极其简单,关键是你得调整思路。方是Rectangle,圆是Ellipse,直接把Rectangle变成Ellipse,等于把一个控件变成另一个控件,这显然是不可能的。所以要转变思路,首先你得明白一点,Rectangle不是绝对的方形,它也可以是圆形,所以只需要让方形的Rectangle变成圆形的就行了。

    上代码:

    <UserControl
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:Class="SilverlightApplication1.MainPage" Width="150" Height="150">
     <UserControl.Resources>
      <Storyboard x:Name="Storyboard1">
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Rec" Storyboard.TargetProperty="(Rectangle.RadiusX)">
        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="70"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Rec" Storyboard.TargetProperty="(Rectangle.RadiusY)">
        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="70"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Rec" Storyboard.TargetProperty="(FrameworkElement.Width)">
        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="100"/>
        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="140"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Rec" Storyboard.TargetProperty="(FrameworkElement.Height)">
        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="100"/>
        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="140"/>
       </DoubleAnimationUsingKeyFrames>
      </Storyboard>
     </UserControl.Resources>
     <Grid x:Name="LayoutRoot" Background="White">
      <Rectangle x:Name="Rec" Width="100" Height="100" Fill="Black" HorizontalAlignment="Center" VerticalAlignment="Center" />
     </Grid>
    </UserControl>
    • 已标记为答案 SeekVerity 2009年8月13日 1:57
    2009年8月12日 9:44
  • 用路径控制的方法,工作量比较大。uncode的办法不错。谢谢各位了。
    2009年8月13日 1:57
  • 嗯!呵呵!简单就是最好的方法!


    努力!写一个js解析器,一个svg插件,一个绘图程序,做好自己,呵呵~!
    2009年8月13日 6:28
    版主