WPF实现跳动的字符效果

姨夫般的微笑

本文将介绍一个好玩但实际作用可能不太大的动画效果：跳动的字符。为了提高动画效果的可重用性以及调用的灵活性，通过Behavior实现跳动的字符动画。先看下效果：

技术要点与实现

通过TextEffect的PositionStart和PositionCount属性控制应用动画效果的子字符串的起始位置以及长度，同时使用TranslateTransform设置字符纵坐标的移动变换，以实现跳动的效果。主要步骤如下：

• 在OnAttached方法中，注册Loaded事件，在Load事件中为TextBlock添加TextEffect效果，其中PositionCount设置为1，每次只跳动一个字符。
  
• 添加启动动画效果的BeginEffect方法，并创建控制子字符纵向移动变换的线性动画。然后根据字符串（剔除空字符）的长度n，创建n个关键帧，每个关键帧中把PositionStart设置为要跳动的字符在字符串中的索引
  
• 在开启动画属性IsEnabled=true和TextBlock内容变化时,启动动画效果
  

在创建关键帧设置跳动字符位置时剔除了空字符，是为了是动画效果显得连贯

1. public class DanceCharEffectBehavior : Behavior<TextBlock>
2.     {
3.         private TextEffect _textEffect;
4.         private string _textEffectName;
5.         private TranslateTransform _translateTransform = null;
6.         private string _translateTransformName;
7.         private Storyboard _storyboard;
9.         protected override void OnAttached()
10.         {
11.             base.OnAttached();
13.             this.AssociatedObject.Loaded += AssociatedObject_Loaded;
14.             this.AssociatedObject.Unloaded += AssociatedObject_Unloaded;
15.             this.AssociatedObject.IsVisibleChanged += AssociatedObject_IsVisibleChanged;
16.             BindingOperations.SetBinding(this, DanceCharEffectBehavior.InternalTextProperty, new Binding("Text") { Source = this.AssociatedObject });
17.         }
19.         protected override void OnDetaching()
20.         {
21.             base.OnDetaching();
23.             this.AssociatedObject.Loaded -= AssociatedObject_Loaded;
24.             this.AssociatedObject.Unloaded -= AssociatedObject_Unloaded;
25.             this.AssociatedObject.IsVisibleChanged -= AssociatedObject_IsVisibleChanged;
26.             this.ClearValue(DanceCharEffectBehavior.InternalTextProperty);
28.             if (_storyboard != null)
29.             {
30. <TextBlock FontSize="20" Text="Hello">
31.     <i:Interaction.Behaviors>
32.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
33.     </i:Interaction.Behaviors>
34. </TextBlock>_storyboard.Remove(this.AssociatedObject);
35. <TextBlock FontSize="20" Text="Hello">
36.     <i:Interaction.Behaviors>
37.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
38.     </i:Interaction.Behaviors>
39. </TextBlock>_storyboard.Children.Clear();
40.             }
41.             if (_textEffect != null)
42. <TextBlock FontSize="20" Text="Hello">
43.     <i:Interaction.Behaviors>
44.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
45.     </i:Interaction.Behaviors>
46. </TextBlock>this.AssociatedObject.TextEffects.Remove(_textEffect);
47.         }
49.         private void AssociatedObject_IsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
50.         {
51.             if ((bool)e.NewValue == false)
52.             {
53. <TextBlock FontSize="20" Text="Hello">
54.     <i:Interaction.Behaviors>
55.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
56.     </i:Interaction.Behaviors>
57. </TextBlock>if (_storyboard != null)
58. <TextBlock FontSize="20" Text="Hello">
59.     <i:Interaction.Behaviors>
60.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
61.     </i:Interaction.Behaviors>
62. </TextBlock>    _storyboard.Stop(this.AssociatedObject);
63.             }
64.             else
65.             {
66. <TextBlock FontSize="20" Text="Hello">
67.     <i:Interaction.Behaviors>
68.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
69.     </i:Interaction.Behaviors>
70. </TextBlock>BeginEffect(this.AssociatedObject.Text);
71.             }
72.         }
74.         private void AssociatedObject_Loaded(object sender, RoutedEventArgs e)
75.         {
76.             if (_textEffect == null)
77.             {
78. <TextBlock FontSize="20" Text="Hello">
79.     <i:Interaction.Behaviors>
80.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
81.     </i:Interaction.Behaviors>
82. </TextBlock>this.AssociatedObject.TextEffects.Add(_textEffect = new TextEffect()
83. <TextBlock FontSize="20" Text="Hello">
84.     <i:Interaction.Behaviors>
85.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
86.     </i:Interaction.Behaviors>
87. </TextBlock>{
88. <TextBlock FontSize="20" Text="Hello">
89.     <i:Interaction.Behaviors>
90.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
91.     </i:Interaction.Behaviors>
92. </TextBlock>    PositionCount = 1,
93. <TextBlock FontSize="20" Text="Hello">
94.     <i:Interaction.Behaviors>
95.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
96.     </i:Interaction.Behaviors>
97. </TextBlock>    Transform = _translateTransform = new TranslateTransform(),
98. <TextBlock FontSize="20" Text="Hello">
99.     <i:Interaction.Behaviors>
100.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
101.     </i:Interaction.Behaviors>
102. </TextBlock>});
103. <TextBlock FontSize="20" Text="Hello">
104.     <i:Interaction.Behaviors>
105.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
106.     </i:Interaction.Behaviors>
107. </TextBlock>NameScope.SetNameScope(this.AssociatedObject, new NameScope());
108. <TextBlock FontSize="20" Text="Hello">
109.     <i:Interaction.Behaviors>
110.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
111.     </i:Interaction.Behaviors>
112. </TextBlock>this.AssociatedObject.RegisterName(_textEffectName = "n" + Guid.NewGuid().ToString("N"), _textEffect);
113. <TextBlock FontSize="20" Text="Hello">
114.     <i:Interaction.Behaviors>
115.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
116.     </i:Interaction.Behaviors>
117. </TextBlock>this.AssociatedObject.RegisterName(_translateTransformName = "n" + Guid.NewGuid().ToString("N"), _translateTransform);
118. <TextBlock FontSize="20" Text="Hello">
119.     <i:Interaction.Behaviors>
120.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
121.     </i:Interaction.Behaviors>
122. </TextBlock>if (IsEnabled)
123. <TextBlock FontSize="20" Text="Hello">
124.     <i:Interaction.Behaviors>
125.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
126.     </i:Interaction.Behaviors>
127. </TextBlock>    BeginEffect(this.AssociatedObject.Text);
128.             }
129.         }
131.         private void AssociatedObject_Unloaded(object sender, RoutedEventArgs e)
132.         {
133.             StopEffect();
134.         }
137.         private void SetEffect(string text)
138.         {
139.             if (string.IsNullOrEmpty(text) || this.AssociatedObject.IsLoaded == false)
140.             {
141. <TextBlock FontSize="20" Text="Hello">
142.     <i:Interaction.Behaviors>
143.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
144.     </i:Interaction.Behaviors>
145. </TextBlock>StopEffect();
146. <TextBlock FontSize="20" Text="Hello">
147.     <i:Interaction.Behaviors>
148.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
149.     </i:Interaction.Behaviors>
150. </TextBlock>return;
151.             }
153.             BeginEffect(text);
155.         }
157.         private void StopEffect()
158.         {
159.             if (_storyboard != null)
160.             {
161. <TextBlock FontSize="20" Text="Hello">
162.     <i:Interaction.Behaviors>
163.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
164.     </i:Interaction.Behaviors>
165. </TextBlock>_storyboard.Stop(this.AssociatedObject);
166.             }
167.         }
169.         private void BeginEffect(string text)
170.         {
171.             StopEffect();
173.             int textLength = text.Length;
174.             if (textLength < 1 || _translateTransformName == null || IsEnabled == false) return;
176.             if (_storyboard == null)
177. <TextBlock FontSize="20" Text="Hello">
178.     <i:Interaction.Behaviors>
179.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
180.     </i:Interaction.Behaviors>
181. </TextBlock>_storyboard = new Storyboard();
182.             double duration = 0.5d;
183.             DoubleAnimation da = new DoubleAnimation();
185.             Storyboard.SetTargetName(da, _translateTransformName);
186.             Storyboard.SetTargetProperty(da, new PropertyPath(TranslateTransform.YProperty));
187.             da.From = 0d;
188.             da.To = 10d;
189.             da.Duration = TimeSpan.FromSeconds(duration / 2d);
190.             da.RepeatBehavior = RepeatBehavior.Forever;
191.             da.AutoReverse = true;
193.             char emptyChar = ' ';
194.             List<int> lsb = new List<int>();
195.             for (int i = 0; i < textLength; ++i)
196.             {
197. <TextBlock FontSize="20" Text="Hello">
198.     <i:Interaction.Behaviors>
199.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
200.     </i:Interaction.Behaviors>
201. </TextBlock>if (text[i] != emptyChar)
202. <TextBlock FontSize="20" Text="Hello">
203.     <i:Interaction.Behaviors>
204.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
205.     </i:Interaction.Behaviors>
206. </TextBlock>{
207. <TextBlock FontSize="20" Text="Hello">
208.     <i:Interaction.Behaviors>
209.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
210.     </i:Interaction.Behaviors>
211. </TextBlock>    lsb.Add(i);
212. <TextBlock FontSize="20" Text="Hello">
213.     <i:Interaction.Behaviors>
214.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
215.     </i:Interaction.Behaviors>
216. </TextBlock>}
217.             }
219.             Int32AnimationUsingKeyFrames frames = new Int32AnimationUsingKeyFrames();
220.             Storyboard.SetTargetName(frames, _textEffectName);
221.             Storyboard.SetTargetProperty(frames, new PropertyPath(TextEffect.PositionStartProperty));
222.             frames.Duration = TimeSpan.FromSeconds((lsb.Count) * duration);
223.             frames.RepeatBehavior = RepeatBehavior.Forever;
224.             frames.AutoReverse = true;
226.             int ii = 0;
227.             foreach (int index in lsb)
228.             {
229. <TextBlock FontSize="20" Text="Hello">
230.     <i:Interaction.Behaviors>
231.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
232.     </i:Interaction.Behaviors>
233. </TextBlock>frames.KeyFrames.Add(new DiscreteInt32KeyFrame()
234. <TextBlock FontSize="20" Text="Hello">
235.     <i:Interaction.Behaviors>
236.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
237.     </i:Interaction.Behaviors>
238. </TextBlock>{
239. <TextBlock FontSize="20" Text="Hello">
240.     <i:Interaction.Behaviors>
241.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
242.     </i:Interaction.Behaviors>
243. </TextBlock>    Value = index,
244. <TextBlock FontSize="20" Text="Hello">
245.     <i:Interaction.Behaviors>
246.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
247.     </i:Interaction.Behaviors>
248. </TextBlock>    KeyTime = TimeSpan.FromSeconds(ii * duration),
249. <TextBlock FontSize="20" Text="Hello">
250.     <i:Interaction.Behaviors>
251.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
252.     </i:Interaction.Behaviors>
253. </TextBlock>});
254. <TextBlock FontSize="20" Text="Hello">
255.     <i:Interaction.Behaviors>
256.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
257.     </i:Interaction.Behaviors>
258. </TextBlock>++ii;
259.             }
261.             _storyboard.Children.Add(da);
262.             _storyboard.Children.Add(frames);
263.             _storyboard.Begin(this.AssociatedObject, true);
264.         }
266.         private string InternalText
267.         {
268.             get { return (string)GetValue(InternalTextProperty); }
269.             set { SetValue(InternalTextProperty, value); }
270.         }
272.         private static readonly DependencyProperty InternalTextProperty =
273.         DependencyProperty.Register("InternalText", typeof(string), typeof(DanceCharEffectBehavior),
274.         new PropertyMetadata(OnInternalTextChanged));
276.         private static void OnInternalTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
277.         {
278.             var source = d as DanceCharEffectBehavior;
279.             if (source._storyboard != null)
280.             {
281. <TextBlock FontSize="20" Text="Hello">
282.     <i:Interaction.Behaviors>
283.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
284.     </i:Interaction.Behaviors>
285. </TextBlock>source._storyboard.Stop(source.AssociatedObject);
286. <TextBlock FontSize="20" Text="Hello">
287.     <i:Interaction.Behaviors>
288.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
289.     </i:Interaction.Behaviors>
290. </TextBlock>source._storyboard.Children.Clear();
291.             }
292.             source.SetEffect(e.NewValue == null ? string.Empty : e.NewValue.ToString());
293.         }
296.         public bool IsEnabled
297.         {
298.             get { return (bool)GetValue(IsEnabledProperty); }
299.             set { SetValue(IsEnabledProperty, value); }
300.         }
302.         public static readonly DependencyProperty IsEnabledProperty =
303.             DependencyProperty.Register("IsEnabled", typeof(bool), typeof(DanceCharEffectBehavior), new PropertyMetadata(true, (d, e) =>
304.             {
305. <TextBlock FontSize="20" Text="Hello">
306.     <i:Interaction.Behaviors>
307.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
308.     </i:Interaction.Behaviors>
309. </TextBlock>bool b = (bool)e.NewValue;
310. <TextBlock FontSize="20" Text="Hello">
311.     <i:Interaction.Behaviors>
312.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
313.     </i:Interaction.Behaviors>
314. </TextBlock>var source = d as DanceCharEffectBehavior;
315. <TextBlock FontSize="20" Text="Hello">
316.     <i:Interaction.Behaviors>
317.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
318.     </i:Interaction.Behaviors>
319. </TextBlock>source.SetEffect(source.InternalText);
320.             }));
322.     }

复制代码

调用的时候只需要在TextBlock添加Behavior即可，代码如下

1. <TextBlock FontSize="20" Text="Hello">
2.     <i:Interaction.Behaviors>
3.         <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" />
4.     </i:Interaction.Behaviors>
5. </TextBlock>

复制代码

结尾

本例中还有许多可以完善的地方，比如字符跳动的幅度可以根据实际的FontSize来设置，或者增加依赖属性来控制；动画是否倒退播放，是否循环播放，以及动画的速度都可以通过增加依赖属性在调用时灵活设置。

来源:https://www.cnblogs.com/czwy/archive/2023/08/09/17615551.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！