使用Silverlight怎么實(shí)現(xiàn)跑馬燈動(dòng)畫？很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

專業(yè)領(lǐng)域包括成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)、商城網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺開發(fā)， 與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開發(fā)公司不同，創(chuàng)新互聯(lián)建站的整合解決方案結(jié)合了幫做網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，為客戶提供全網(wǎng)互聯(lián)網(wǎng)整合方案。

主要功能有以下幾點(diǎn)：

1、使用動(dòng)畫屬性驅(qū)動(dòng)圖片運(yùn)動(dòng)動(dòng)畫

2、圖片循環(huán)到最后一張后會(huì)自動(dòng)循環(huán)

3、當(dāng)鼠標(biāo)放到圖片時(shí)運(yùn)動(dòng)的圖片會(huì)停止，當(dāng)鼠標(biāo)離開時(shí)暫停的圖片會(huì)繼續(xù)運(yùn)動(dòng)

4、當(dāng)鼠標(biāo)點(diǎn)擊任何一個(gè)圖片時(shí)，該圖片會(huì)顯示真正大小

XAML：

<Grid x:Name="Layout" Background="White">
  <Canvas x:Name="canvas" Background="Black" Grid.Row="1" Height="280">
    <!--隱藏矩形以外的其它部分-->
    <Canvas.Clip >
     <RectangleGeometry x:Name="rg" />
    </Canvas.Clip>
  <StackPanel x:Name="sp" Orientation="Horizontal" ></StackPanel>
  </Canvas>
 <Image x:Name="img_Full" Width="640" Height="480" Visibility="Collapsed" MouseLeftButtonUp="img_Full_MouseLeftButtonUp" />
</Grid>

界面由Grid、Canvas、StackPanel和一個(gè)Image組成，Image用來顯示圖片的真實(shí)尺寸。

 public partial class Demo : UserControl
  {
    //定義
    private Storyboard storyboard;
    private const double photowidth = 320;
    private double totalwidth;
    public Demo()
    {
      InitializeComponent();
      CreatePhoto();
    }
    /// <summary>
    /// 創(chuàng)建圖片列表
    /// </summary>
    private void CreatePhoto()
    {
      string[] picList = new string[] { "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg" };
      //創(chuàng)建多組圖片，保證圖片不會(huì)出現(xiàn)空白,因?yàn)镾tackPanel是橫向排列的，這樣就可以把圖片類似模擬的排成一圈
      for (int i = 0; i < 3; i++)
      {
        //根據(jù)數(shù)組創(chuàng)建圖片
        for (int j = 0; j < picList.Length; j++)
        {
          UC_pic pic = new UC_pic();
          pic.ImageUrl = "../images/photo/" + picList[j];
          pic.Width = photowidth;
          //綁定事件
          pic.MouseEnter += new MouseEventHandler(pic_MouseEnter);
          pic.MouseLeave += new MouseEventHandler(pic_MouseLeave);
          pic.MouseLeftButtonUp += new MouseButtonEventHandler(pic_MouseLeftButtonUp);
          //添加對象到StackPanel中
          sp.Children.Add(pic);
        }
      }
      //計(jì)算圖片的總寬度
      totalwidth = -1.0 * photowidth * picList.Length;
      Canvas.SetLeft(sp, totalwidth);
      //調(diào)用初始化 方法
      CreateStoryboard();
      //播放動(dòng)畫
      storyboard.Begin();
      //重新繪制區(qū)域
      Resize();
 
    }
    /// <summary>
    /// 創(chuàng)建故事面板
    /// </summary>
    private void CreateStoryboard()
    {
      //創(chuàng)建故事面板
      storyboard = new Storyboard();
      DoubleAnimation animation = new DoubleAnimation();
      //設(shè)置動(dòng)畫延時(shí)
      animation.Duration = new Duration(TimeSpan.FromSeconds(2.0));
      //設(shè)置對象的作用屬性
      Storyboard.SetTarget(animation, sp);
      Storyboard.SetTargetProperty(animation, new PropertyPath("(Canvas.Left)", new object[0]));
      //添加到動(dòng)畫故事板內(nèi)
      storyboard.Children.Add(animation);
      //動(dòng)畫自動(dòng)完成事件
      storyboard.Completed += new EventHandler(storyboard_Completed);
    }
 
    //動(dòng)畫自動(dòng)完成事件，當(dāng)動(dòng)畫播放完成（結(jié)束）的時(shí)候。再次循環(huán)動(dòng)畫
    void storyboard_Completed(object sender, EventArgs e)
    {
      DoubleAnimation animation = (DoubleAnimation)storyboard.Children[0];
      //取得圖片當(dāng)前位置
      double left = Canvas.GetLeft(sp);
      //如果圖片已接近最后，就重新設(shè)置位置
      if (left > (totalwidth - photowidth))
      {
        animation.From = new double?(left);
      }
      //設(shè)置動(dòng)畫的起始值（From）所依據(jù)的總量（總長度）
      animation.By = new double?(totalwidth);
      //循環(huán)動(dòng)畫
      storyboard.Begin();
    }
    private void Resize()
    {
      //重新繪制顯示區(qū)域
      rg.Rect = new Rect(0, 0, this.ActualWidth, 260);
    }
 
    void pic_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
      //顯示放大圖片
      UC_pic pic = sender as UC_pic;
      img_Full.Source = pic.photo.Source;
      img_Full.Visibility = Visibility.Visible;
    }
 
    void pic_MouseLeave(object sender, MouseEventArgs e)
    {
      //繼續(xù)動(dòng)畫
      storyboard.Resume();
    }
 
    void pic_MouseEnter(object sender, MouseEventArgs e)
    {
      //暫停動(dòng)畫
      storyboard.Pause();
    }
 
    private void img_Full_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
      //隱藏放大圖片
      img_Full.Visibility = Visibility.Collapsed;
    }
 
    private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)
    {
      //動(dòng)畫根據(jù)屏幕大小改變而改變
      Resize();
    }
}

同時(shí)還有一個(gè)UserControl用來承載圖片代碼如下：

<Canvas x:Name="LayoutRoot" Background="White">
  <Image x:Name="photo" Width="320" Height="240" Stretch="UniformToFill" Margin="10" />
</Canvas>

C#：

public partial class UC_pic : UserControl
  {
    public UC_pic()
    {
      InitializeComponent();
    }
    private string _imgUrl;
    public string ImageUrl
    {
      get { return this._imgUrl; }
      set { 
        //設(shè)置圖片資源屬性
        this._imgUrl = value;
        Uri uri = new Uri(value, UriKind.Relative);
        BitmapImage bitimg = new BitmapImage(uri);
        this.photo.Source = bitimg;
      }
    }
  }

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

當(dāng)前標(biāo)題：使用Silverlight怎么實(shí)現(xiàn)跑馬燈動(dòng)畫
網(wǎng)站鏈接：http://chinadenli.net/article2/ipdjic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)、外貿(mào)建站、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)