您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關利用WPF實現一個簡單的文字粒子閃爍動畫特效,小編覺得挺實用的,因此分享給大家學習,希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
實現效果如下:
思路:首先根據顯示文本創建文本路徑Geometry,然后在路徑內隨機生成圓形粒子并添加動畫。
步驟:
1、粒子類Particle.cs
public class Particle { /// <summary> /// 形狀 /// </summary> public Ellipse Shape; /// <summary> /// 坐標 /// </summary> public Point Position; }
2、粒子系統ParticleSystem.cs
/// <summary> /// 粒子路徑 /// </summary> private Geometry particleGeometry; /// <summary> /// 粒子個數 /// </summary> private int particleCount = 100; /// <summary> /// 粒子最小尺寸 /// </summary> private static int sizeMin = 10; /// <summary> /// 粒子最大尺寸 /// </summary> private int sizeMax = 20; /// <summary> /// 隨機數 /// </summary> private Random random; /// <summary> /// 粒子列表 /// </summary> private List<Particle> particles; /// <summary> /// 粒子容器 /// </summary> private Canvas containerParticles; public ParticleSystem(Geometry _path, int _maxRadius, int _particleCount, Canvas _containerParticles) { particleGeometry = _path; particleCount = _particleCount; sizeMax = _maxRadius; containerParticles = _containerParticles; random = new Random(); particles = new List<Particle>(); SpawnParticle(); } /// <summary> /// 初始化粒子 /// </summary> private void SpawnParticle() { //清空粒子隊列 particles.Clear(); containerParticles.Children.Clear(); //生成粒子 for (int i = 0; i < particleCount; i++) { double size = random.Next(sizeMin, sizeMax + 1); while(true) { Point po = new Point(random.Next((int)particleGeometry.Bounds.Left, (int)particleGeometry.Bounds.Right), random.Next((int)particleGeometry.Bounds.Top, (int)particleGeometry.Bounds.Bottom)); if (particleGeometry.FillContains(po, 2, ToleranceType.Absolute)) { Particle p = new Particle { Shape = new Ellipse { Width = size, Height = size, Stretch = System.Windows.Media.Stretch.Fill, Fill = GetRandomColorBursh(), }, Position = po, }; SetParticleSizeAnimation(p.Shape); particles.Add(p); Canvas.SetLeft(p.Shape, p.Position.X); Canvas.SetTop(p.Shape, p.Position.Y); containerParticles.Children.Add(p.Shape); break; } } } } /// <summary> /// 設置粒子大小動畫 /// </summary> private void SetParticleSizeAnimation(Ellipse p) { Storyboard sb = new Storyboard(); //動畫完成事件 再次設置此動畫 sb.Completed += (S, E) => { SetParticleSizeAnimation(p); }; int size = random.Next(sizeMin, sizeMax + 1); int time = random.Next(100, 1000); DoubleAnimation daX = new DoubleAnimation(size, new Duration(TimeSpan.FromMilliseconds(time))); DoubleAnimation daY = new DoubleAnimation(size, new Duration(TimeSpan.FromMilliseconds(time))); Storyboard.SetTarget(daX, p); Storyboard.SetTarget(daY, p); Storyboard.SetTargetProperty(daX, new PropertyPath("Width")); Storyboard.SetTargetProperty(daY, new PropertyPath("Height")); sb.Children.Add(daX); sb.Children.Add(daY); sb.Begin(); } /// <summary> /// 獲取隨機顏色畫刷 /// </summary> private SolidColorBrush GetRandomColorBursh() { byte r = (byte)random.Next(128, 256); byte g = (byte)random.Next(128, 256); byte b = (byte)random.Next(128, 256); return new SolidColorBrush(Color.FromArgb(125, r, g, b)); }
3、主窗體交互
private ParticleSystem ps; public MainWindow() { InitializeComponent(); this.Loaded += MainWindow_Loaded; } private void MainWindow_Loaded(object sender, RoutedEventArgs e) { Geometry g = CreateTextPath("H E L L O", new Point(this.cvs_particleContainer.Margin.Left, this.cvs_particleContainer.Margin.Top), new Typeface(new FontFamily("Arial"), FontStyles.Normal, FontWeights.Bold, FontStretches.Normal), 200); ps = new ParticleSystem(g, 25, 350, this.cvs_particleContainer); } /// <summary> /// 創建文本路徑 /// </summary> /// <param name="word">文本字符串</param> /// <param name="point">顯示位置</param> /// <param name="typeface">字體信息</param> /// <param name="fontSize">字體大小</param> /// <returns></returns> private Geometry CreateTextPath(string word, Point point, Typeface typeface, int fontSize) { FormattedText text = new FormattedText(word, new System.Globalization.CultureInfo("en-US"), FlowDirection.LeftToRight, typeface, fontSize, Brushes.Black); Geometry g = text.BuildGeometry(point); PathGeometry path = g.GetFlattenedPathGeometry(); return path; }
以上就是利用WPF實現一個簡單的文字粒子閃爍動畫特效,小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。