教你如何用WPF實現文字粒子閃爍動畫效果
導讀 | 這篇文章主要為大家詳細介紹了WPF實現文字粒子閃爍動畫效果,文中示例程式碼介紹的非常詳細,具有一定的參考價值,感興趣的小夥伴們可以參考一下 |
本文例項為大家分享了WPF實現文字粒子閃爍動畫的具體程式碼,供大家參考,具體內容如下
實現效果如下:
思路:
首先根據顯示文字建立文字路徑Geometry,然後在路徑內隨機生成圓形粒子並新增動畫。
步驟:
1、粒子類Particle.cs
public class Particle { ////// 形狀 ///public Ellipse Shape; ////// 座標 ///public Point Position; }
2、粒子系統ParticleSystem.cs
////// 粒子路徑 ///private Geometry particleGeometry; ////// 粒子個數 ///private int particleCount = 100; ////// 粒子最小尺寸 ///private static int sizeMin = 10; ////// 粒子最大尺寸 ///private int sizeMax = 20; ////// 隨機數 ///private Random random; ////// 粒子列表 ///private Listparticles; ////// 粒子容器 ///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(); SpawnParticle(); } ////// 初始化粒子 ///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; } } } } ////// 設定粒子大小動畫 ///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(); } ////// 獲取隨機顏色畫刷 ///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); } ////// 建立文字路徑 ////// 文字字串 /// 顯示位置 /// 字型資訊 /// 字型大小 ///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; }
以上就是本文的全部內容,希望對大家的學習有所幫助。
原文來自:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69955379/viewspace-2718667/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- css3實現動畫閃爍效果CSSS3動畫
- Flutter——實現閃爍效果Flutter
- 實現閃爍燈星星動畫動畫
- Flutter動畫實現粒子漂浮效果Flutter動畫
- CSS3文字閃爍效果CSSS3
- [譯] 在 Flutter 中實現微光閃爍效果Flutter
- js閃爍效果JS
- Canvas 實現炫麗的粒子運動效果(粒子生成文字)Canvas
- 簡單CSS實現閃爍動畫(+1白話講解)CSS動畫
- javascript實現文字拼寫動畫效果JavaScript動畫
- js點選div實現閃爍效果程式碼例項JS
- javascript實現的div塊閃爍效果程式碼例項JavaScript
- CSS3實現王者匹配時的粒子動畫效果CSSS3動畫
- WPF閃爍預警動畫的控制元件製作及winform呼叫WPF控制元件的方法動畫控制元件ORM
- 粒子效果動畫使用總結動畫
- HTML5-canvas動畫閃爍分析HTMLCanvas動畫
- CSS3中用background-image實現粒子動畫效果CSSS3動畫
- Unity3D中暫停時的動畫及粒子效果實現Unity3D動畫
- WPF簡單動畫實現動畫
- canvas簡單動畫案例(圓圈閃爍漸變動畫)Canvas動畫
- 教你如何實現 Android TextView 文字輪播效果AndroidTextView
- 萬彩動畫大師教程 | 如何實現物件的閃動的動畫效果動畫物件
- WPF 實現陰影效果
- 協程實現canvas影像隨機閃爍Canvas隨機
- ngCloak實現angular初始化閃爍最佳實踐GCAngular
- React實現動畫效果React動畫
- Javascript實現動畫效果JavaScript動畫
- jQuery夜晚天空滿天星星閃爍動畫程式碼jQuery動畫
- vuejs在解析時出現閃爍的原因及防止閃爍的方法VueJS
- 我的部落格--群星閃爍地球旋轉動畫特效動畫特效
- 程式設計師的小浪漫----文字粒子效果程式設計師
- 文字印表機 效果實現
- 用JavaScript實現動畫效果 (轉)JavaScript動畫
- 5分鐘用動效工廠實現粒子動畫動畫
- 使用 WPF 做個 PowerPoint 系列 基於 OpenXML 解析實現 PPT 文字描邊效果XML
- 教你如何用 Java 實現非同步呼叫Java非同步
- 巧用濾鏡實現高階感拉滿的文字快閃切換效果
- 前端實現文字滾動效果前端