none
动画制作的问题 RRS feed

  • 问题

  • 比如一个动画有两个小球,都在画布的左边。并且都向右边移动。
    我想实现的是当小球A移动到画布的中间的时候,小球B开始移动。
    请问要怎么实现?

    2009年7月23日 9:02

答案

  • 你可以使用那个Storyboard

    <UserControl x:Class="SilverlightApplication14.Page"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Width="400" Height="300" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    	<UserControl.Resources>
    		
    		<Storyboard x:Name="Storyboard1">
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rect1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:05" Value="329"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rect1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:05" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    		<Storyboard x:Name="Storyboard2">
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rect2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:05" Value="329"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rect2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:05" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    		
    	</UserControl.Resources>
        <Canvas x:Name="LayoutRoot" Background="White">
        	<Ellipse x:Name="rect1" Height="79" HorizontalAlignment="Left" Margin="0,8,0,0" VerticalAlignment="Top" Width="72" Fill="#FFB93434" Stroke="#FF000000"  RenderTransformOrigin="0.5,0.5">
        		<Ellipse.RenderTransform>
        			<TransformGroup>
        				<ScaleTransform/>
        				<SkewTransform/>
        				<RotateTransform/>
        				<TranslateTransform/>
        			</TransformGroup>
        		</Ellipse.RenderTransform>
        	</Ellipse>
        	<Ellipse x:Name="rect2" HorizontalAlignment="Left" Width="72" Fill="#FF149179" Stroke="#FF000000"  RenderTransformOrigin="0.5,0.5" Canvas.Top="122" Height="79">
        		<Ellipse.RenderTransform>
        			<TransformGroup>
        				<ScaleTransform/>
        				<SkewTransform/>
        				<RotateTransform/>
        				<TranslateTransform/>
        			</TransformGroup>
        		</Ellipse.RenderTransform>
        	</Ellipse>
    
        </Canvas>
    </UserControl>
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using System.Windows.Threading;
    
    namespace SilverlightApplication14
    {
        public partial class Page : UserControl
        {
            public Page()
            {
                InitializeComponent();
                this.Init();
            }
            private DispatcherTimer disp = new DispatcherTimer();
            public void Init()
            {
                disp.Interval = new TimeSpan(100);
                disp.Tick += new EventHandler(disp_Tick);
                Open();
                disp.Start();
            }
    
            void disp_Tick(object sender, EventArgs e)
            {
                Check();
            }
    
            public void Check()
            {
                double x = ((this.rect1.RenderTransform as TransformGroup).Children[3] as TranslateTransform).X;
                if (x > this.Width / 2)
                {
                    if (this.Storyboard2.GetCurrentState() == ClockState.Stopped)
                        this.Storyboard2.Begin();
                }
            }
            public void Open()
            {
                this.Storyboard1.Begin();
            }
        }
    }

    努力!写一个js解析器,一个svg插件,一个绘图程序,做好自己,呵呵~!
    2009年7月23日 12:47
    版主

全部回复

  • 用blend工具 容易现实 建议你看一看教材 跟着做一遍 自然会了
    如果您觉得对您有帮助,请在“是否有帮助”点“是”;如果你觉得回复很满意,请“标记为已解答”
    2009年7月23日 10:28
  • 你可以使用那个Storyboard

    <UserControl x:Class="SilverlightApplication14.Page"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Width="400" Height="300" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
    	<UserControl.Resources>
    		
    		<Storyboard x:Name="Storyboard1">
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rect1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:05" Value="329"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rect1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:05" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    		<Storyboard x:Name="Storyboard2">
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rect2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:05" Value="329"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rect2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
    				<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
    				<SplineDoubleKeyFrame KeyTime="00:00:05" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    		
    	</UserControl.Resources>
        <Canvas x:Name="LayoutRoot" Background="White">
        	<Ellipse x:Name="rect1" Height="79" HorizontalAlignment="Left" Margin="0,8,0,0" VerticalAlignment="Top" Width="72" Fill="#FFB93434" Stroke="#FF000000"  RenderTransformOrigin="0.5,0.5">
        		<Ellipse.RenderTransform>
        			<TransformGroup>
        				<ScaleTransform/>
        				<SkewTransform/>
        				<RotateTransform/>
        				<TranslateTransform/>
        			</TransformGroup>
        		</Ellipse.RenderTransform>
        	</Ellipse>
        	<Ellipse x:Name="rect2" HorizontalAlignment="Left" Width="72" Fill="#FF149179" Stroke="#FF000000"  RenderTransformOrigin="0.5,0.5" Canvas.Top="122" Height="79">
        		<Ellipse.RenderTransform>
        			<TransformGroup>
        				<ScaleTransform/>
        				<SkewTransform/>
        				<RotateTransform/>
        				<TranslateTransform/>
        			</TransformGroup>
        		</Ellipse.RenderTransform>
        	</Ellipse>
    
        </Canvas>
    </UserControl>
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using System.Windows.Threading;
    
    namespace SilverlightApplication14
    {
        public partial class Page : UserControl
        {
            public Page()
            {
                InitializeComponent();
                this.Init();
            }
            private DispatcherTimer disp = new DispatcherTimer();
            public void Init()
            {
                disp.Interval = new TimeSpan(100);
                disp.Tick += new EventHandler(disp_Tick);
                Open();
                disp.Start();
            }
    
            void disp_Tick(object sender, EventArgs e)
            {
                Check();
            }
    
            public void Check()
            {
                double x = ((this.rect1.RenderTransform as TransformGroup).Children[3] as TranslateTransform).X;
                if (x > this.Width / 2)
                {
                    if (this.Storyboard2.GetCurrentState() == ClockState.Stopped)
                        this.Storyboard2.Begin();
                }
            }
            public void Open()
            {
                this.Storyboard1.Begin();
            }
        }
    }

    努力!写一个js解析器,一个svg插件,一个绘图程序,做好自己,呵呵~!
    2009年7月23日 12:47
    版主
  • 用一个计时器去检查,第一个方格运行的位置


    努力!写一个js解析器,一个svg插件,一个绘图程序,做好自己,呵呵~!
    2009年7月23日 12:52
    版主