昨天晚上在銀光進化論談聊到以前MU的草動效果，Goods尤其覺得很好，正巧我以前做過草動的系統，可以作為經驗總結一下，最近一直糾結文章标題，正好借此發揮一下，抛磚引玉：）
以前寫的草動系統都是3D的，這次寫2D的确實有一些麻煩，整理思路用了很久，好在Silverlight提供了很好的動畫支援，很友善的就實作了一個簡單的草動效果。
首先很簡單，建立一個Silverlight4的項目：GrassTest01
工程的.Web項目叫GrassShow.Web，我想以後可能還有GrassTest02，03，04……
準備好地面和草（資源來自：《窩窩世界》）
<a target="_blank" href="http://blog.51cto.com/attachment/201111/123001472.jpg"></a>
建立一個控件叫Grass01，将圖檔添加到控件中，我的Blend已經過期，隻好使用代碼來實作這個過程，請參看代碼：
Grass01控件代碼
<UserControl x:Class="GrassTest01.Grass01"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<Storyboard x:Name="Ani_Def" RepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0" Value="1.621"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-1.839"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Canvas x:Name="LayoutRoot">
<Canvas.RenderTransform>
<CompositeTransform/>
</Canvas.RenderTransform>
<Image x:Name="image" Source="/GrassTest01;component/Res/Grass01.png" Canvas.Left="-25" Canvas.Top="-77" RenderTransformOrigin="0.5,0.9">
</Image>
</Canvas>
</UserControl>
上述代碼其實使用Blend很容易實作，可惜對于我來說隻有使用這個暴力方法了：）
需要特别說明兩個部分，一個是動畫搖擺部分：動畫搖擺幅度可以通過修改DoubleAnimationUsingKeyFrames中的EasingDoubleKeyFrame來修改。另外一個是搖擺的主體，本來我想直接搖動Image，結果發現不太直覺，尤其是RenderTransformOrigin的對齊，是以我直接将搖擺的動畫設定到LayoutRoot，這樣從根點就可以看到效果了，這是一個非常好的方法，原點可以将很多的資源元素産生的偏移點問題解決。
<a target="_blank" href="http://blog.51cto.com/attachment/201111/123012365.jpg"></a>
由于動畫不會自動啟動，需要在Grass01.xaml.cs中添加如下代碼：
Grass01 類
public partial class Grass01 : UserControl
{
public Grass01()
InitializeComponent();
Ani_Def.BeginTime = TimeSpan.FromSeconds(MainPage._PointRandom.NextDouble());
Ani_Def.Begin();
}
需要特别說明的是Ani_Def.BeginTime，随機了一個啟動時間，為了更好的模拟草的随機性，而MainPage._PointRandom是一個靜态的随機種子，讓随機性更高。
然後就是生成，這個比較簡單就是種草而已，隻需要在MainPage.xaml.cs中加入代碼：
代碼
public static Random _PointRandom = new Random((int)DateTime.Now.Ticks);
public MainPage()
Image Image = new Image();
LayoutRoot.Children.Add(Image);
Image.Source = new BitmapImage(new Uri(@"/GrassTest01;component/Res/Map01.jpg", UriKind.Relative));
for (int i = 0; i < 300; i++)
Grass01 g1 = new Grass01();
LayoutRoot.Children.Add(g1);
Canvas.SetLeft(g1, _PointRandom.Next(50,800));
int y= _PointRandom.Next(50,600);
Canvas.SetTop(g1,y );
Canvas.SetZIndex(g1, y);
}
我随便生成了300顆草，先看看效果：
<a target="_blank" href="http://blog.51cto.com/attachment/201111/123022647.jpg"></a>
動起來效果還是不錯的，随機性很強，有“微風”感，可是CPU咱們可真不可恭維，簡直是噩夢，相信某些“老闆”看了這個效果就直接槍斃了Silverlight，什麼東西啊，一個小小的草動效果就這樣，開什麼玩笑開發大型遊戲？想想也是，咱們還是放棄算了，玩這個真的沒前途。。。。
其實呢，并不是如此，隻需要開啟GPU加速，勝利的女神就開始向你招手了，需要添加兩行代碼：
1、打開Grass01.xaml.cs，添加image.CacheMode = new BitmapCache();，這裡的image是你的草的Image名稱，可以是任何名稱
2、打開.html或者.aspx，就是承載頁面找到object标簽添加代碼，<param name="enableGPUAcceleration" value="true"/>
這下運作再看看。
<a target="_blank" href="http://blog.51cto.com/attachment/201111/123030117.jpg"></a>
微風仍然吹過，看起來還是那麼平靜，效果似乎達到了哦：）想了解這方面更多的請參考深藍色右手有關的GPU加速文章
我發現很多的效果并不是需要很多的代碼來堆積，有的時候，使用簡單的代碼就能達到想要的效果，其實并不複雜，有可能僅僅是靈光一閃而已。
展示效果如下：（小人使用鍵盤WASD控制）
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0"> </a>
本文轉自nowpaper 51CTO部落格，原文連結:http://blog.51cto.com/nowpaper/712380
![Unity遊戲開發背景知識[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)