locked
如何实现动画反播? RRS feed

  • 问题

  • 我有一个动画 想实现鼠标进入是播放 鼠标离开是反着播放 应该怎样做?

    还有一个动画的某一帧可以拷贝到另一个动画里么?

     

    2008年5月12日 11:48

答案

  • 界面上有以下元素:

    <MediaElement x:Name="medTest" Margin="162,8,70,-96"  Source="t.wmv" AutoPlay="False"  Stretch="Fill" Grid.RowSpan="1" Grid.Row="1" VerticalAlignment="Stretch"/>

     

    Code Snippet

    namespace MediaDemo
    {
        public partial class Page : UserControl
        {
            public Page()
            {
                InitializeComponent();
             
            }       
            private void btnTest_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                timer.Interval = TimeSpan.FromMilliseconds(300);
                timer.Tick += new EventHandler(timer_Tick);
                timer.Start();
                total = this.medTest.NaturalDuration.TimeSpan.TotalSeconds;
            }
            
            void timer_Tick(object sender, EventArgs e)
            {
                if (total < 0)
                {
                    timer.Stop();
                }
                total = total - 1.0D;
                this.btnTest.Content = total;

                this.medTest.Position = TimeSpan.FromSeconds(total);         
               
            }  

            private double total = 0.0D;//影片的长度
            private DispatcherTimer timer = new DispatcherTimer();//用来设置时钟
        }
    }

     

     

    如果要倒播,你可能需要得到 影片的长度,这样才可以,^_^
    this.medTest.NaturalDuration.TimeSpan.TotalSeconds;这句话就是这个意思

     

    然后再把时间往后倒减,我在这里用了DispatcherTimer,试了试,把时间设置为0.3S,这个速度还是不错的!
    最后需要的就是判断是不是已经倒到头了.
    很简单是吧!

    ^_^加油!呵呵!大家一起把SL搞好!

    2008年5月13日 2:29
  • 以下为界面元素:
     <UserControl.Resources>
        </Storyboard>
            <Storyboard x:Name="Storyboard2">
                <DoubleAnimation x:Name="anmTest" From="0" To="260" Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"/>
            </Storyboard>
        </UserControl.Resources>
       
      <Canvas Height="300" x:Name="LayoutRoot" Width="400" Background="White">
           
      <Rectangle Height="65" Width="95" Fill="#FFC16D6D" Stroke="#FF000000" Canvas.Left="8" Canvas.Top="18" x:Name="rectangle" RenderTransformOrigin="0.5,0.5">
       <Rectangle.RenderTransform>
        <TransformGroup>
         <ScaleTransform/>
         <SkewTransform/>
         <RotateTransform/>
         <TranslateTransform/>
        </TransformGroup>
       </Rectangle.RenderTransform>
      </Rectangle>

    <Button x:Name="btnTest" Height="31" Width="88" Canvas.Left="31" Canvas.Top="253" Content="Button" MouseLeftButtonDown="Button_MouseLeftButtonDown"/>
    </Canvas>

    后台代码如下:

    Code Snippet

    namespace MediaDemo
    {
        public partial class Page3 : UserControl
        {
            public Page3()
            {
                InitializeComponent();
            }

            private void Button_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {           
                foreach (System.Windows.Media.Animation.Timeline timeLine in this.Storyboard2.Children)
                {
                    string str = timeLine.GetType().ToString();
                    if (str.Equals("System.Windows.Media.Animation.DoubleAnimation"))
                    {
                        DoubleAnimation anmCurrent = timeLine as DoubleAnimation;
                        if(anmCurrent != null)
                            this.ChangePlay(anmCurrent);
                    }
                }
                            this.Storyboard2.Begin();

            }
            ///
            /// 改变 播放的 方向
            ///
            ///
            private void ChangePlay(DoubleAnimation anmCurrent)
            {
                double startValue = anmCurrent.From.Value;
                double endValue = anmCurrent.To.Value;
                anmCurrent.From = endValue;
                anmCurrent.To = startValue;
            }// end for method 改变 播放的 方向
        }// end for class
    }

     

    1.先从Storyboard2中得到每个一个DoubleAnimation
    然后在ChangePlay里面去改变起始位置值就可以了! 很容易的

    2.还有一个动画的某一帧可以拷贝到另一个动画里么?
    这个没有理解
    不知道是不是指在另一个动画里,显示 前面某个动画的特定帧的样子?


     

    2008年5月13日 3:27
  • 这个方法挺不错 呵呵

     

    还找到一种方法 选择一个storyboard 选duplicate 复制出来一个storyboard1_copy 然后选中storyboard1_copy 点reverse 这个copy就变成刚才那个动画的反动画了

     

    Code Snippet

    2.还有一个动画的某一帧可以拷贝到另一个动画里么?
    这个没有理解
    不知道是不是指在另一个动画里,显示 前面某个动画的特定帧的样子?

     

     

    是的 还有就是我想实现一个用笔一笔一划写出一个字的动画 在blend里弄了半天不晓得怎么弄
    2008年5月15日 12:30

全部回复

  • 你是动画,还是wmv?要是动画就是添加一个反着的动画,要是视频就是添加一个反着的视频,直接反着播放不大靠谱.

    2008年5月12日 12:20
  • 是动画 怎么添加一个反着的动画?自己反着再做一个?能否利用已有的动画?

    2008年5月12日 13:05
  • 界面上有以下元素:

    <MediaElement x:Name="medTest" Margin="162,8,70,-96"  Source="t.wmv" AutoPlay="False"  Stretch="Fill" Grid.RowSpan="1" Grid.Row="1" VerticalAlignment="Stretch"/>

     

    Code Snippet

    namespace MediaDemo
    {
        public partial class Page : UserControl
        {
            public Page()
            {
                InitializeComponent();
             
            }       
            private void btnTest_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                timer.Interval = TimeSpan.FromMilliseconds(300);
                timer.Tick += new EventHandler(timer_Tick);
                timer.Start();
                total = this.medTest.NaturalDuration.TimeSpan.TotalSeconds;
            }
            
            void timer_Tick(object sender, EventArgs e)
            {
                if (total < 0)
                {
                    timer.Stop();
                }
                total = total - 1.0D;
                this.btnTest.Content = total;

                this.medTest.Position = TimeSpan.FromSeconds(total);         
               
            }  

            private double total = 0.0D;//影片的长度
            private DispatcherTimer timer = new DispatcherTimer();//用来设置时钟
        }
    }

     

     

    如果要倒播,你可能需要得到 影片的长度,这样才可以,^_^
    this.medTest.NaturalDuration.TimeSpan.TotalSeconds;这句话就是这个意思

     

    然后再把时间往后倒减,我在这里用了DispatcherTimer,试了试,把时间设置为0.3S,这个速度还是不错的!
    最后需要的就是判断是不是已经倒到头了.
    很简单是吧!

    ^_^加油!呵呵!大家一起把SL搞好!

    2008年5月13日 2:29
  • 以下为界面元素:
     <UserControl.Resources>
        </Storyboard>
            <Storyboard x:Name="Storyboard2">
                <DoubleAnimation x:Name="anmTest" From="0" To="260" Storyboard.TargetName="rectangle"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"/>
            </Storyboard>
        </UserControl.Resources>
       
      <Canvas Height="300" x:Name="LayoutRoot" Width="400" Background="White">
           
      <Rectangle Height="65" Width="95" Fill="#FFC16D6D" Stroke="#FF000000" Canvas.Left="8" Canvas.Top="18" x:Name="rectangle" RenderTransformOrigin="0.5,0.5">
       <Rectangle.RenderTransform>
        <TransformGroup>
         <ScaleTransform/>
         <SkewTransform/>
         <RotateTransform/>
         <TranslateTransform/>
        </TransformGroup>
       </Rectangle.RenderTransform>
      </Rectangle>

    <Button x:Name="btnTest" Height="31" Width="88" Canvas.Left="31" Canvas.Top="253" Content="Button" MouseLeftButtonDown="Button_MouseLeftButtonDown"/>
    </Canvas>

    后台代码如下:

    Code Snippet

    namespace MediaDemo
    {
        public partial class Page3 : UserControl
        {
            public Page3()
            {
                InitializeComponent();
            }

            private void Button_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {           
                foreach (System.Windows.Media.Animation.Timeline timeLine in this.Storyboard2.Children)
                {
                    string str = timeLine.GetType().ToString();
                    if (str.Equals("System.Windows.Media.Animation.DoubleAnimation"))
                    {
                        DoubleAnimation anmCurrent = timeLine as DoubleAnimation;
                        if(anmCurrent != null)
                            this.ChangePlay(anmCurrent);
                    }
                }
                            this.Storyboard2.Begin();

            }
            ///
            /// 改变 播放的 方向
            ///
            ///
            private void ChangePlay(DoubleAnimation anmCurrent)
            {
                double startValue = anmCurrent.From.Value;
                double endValue = anmCurrent.To.Value;
                anmCurrent.From = endValue;
                anmCurrent.To = startValue;
            }// end for method 改变 播放的 方向
        }// end for class
    }

     

    1.先从Storyboard2中得到每个一个DoubleAnimation
    然后在ChangePlay里面去改变起始位置值就可以了! 很容易的

    2.还有一个动画的某一帧可以拷贝到另一个动画里么?
    这个没有理解
    不知道是不是指在另一个动画里,显示 前面某个动画的特定帧的样子?


     

    2008年5月13日 3:27
  • 这个方法挺不错 呵呵

     

    还找到一种方法 选择一个storyboard 选duplicate 复制出来一个storyboard1_copy 然后选中storyboard1_copy 点reverse 这个copy就变成刚才那个动画的反动画了

     

    Code Snippet

    2.还有一个动画的某一帧可以拷贝到另一个动画里么?
    这个没有理解
    不知道是不是指在另一个动画里,显示 前面某个动画的特定帧的样子?

     

     

    是的 还有就是我想实现一个用笔一笔一划写出一个字的动画 在blend里弄了半天不晓得怎么弄
    2008年5月15日 12:30
  •  

    1.恩!我刚才去试了试,这个是可以.呵呵!可能因为我是一个程序员的原因吧!呵呵!习惯用代码去实现!
    2.用很多路径一块一块的透明度改变

    2008年5月16日 1:50
  • 看来还是挺麻烦 希望blend要是能录制动作就好了 呵呵

    2008年5月16日 4:59
  • 呵呵!如果那样还得了,adobe就要哭了,这个要是真能像是3DMax,那样录制动画,就不知道有多少人会从Flash上转过来!呵呵!

    2008年5月16日 5:09
  • 写自己的silverlight 让adobe哭去吧 哈哈

    2008年5月17日 12:13
  • 我明白楼主的意思,就是模仿一个hover的效果。 鼠标移入控件执行一个动画,鼠标移出时反向执行动画,就像sl默认的按钮那样的效果。

    看了楼上几位的回复,不知道有没有更简单的方法吗?


    2008年7月11日 7:55