基于WPF實(shí)現(xiàn)跳動(dòng)的字符效果
本文將介紹一個(gè)好玩但實(shí)際作用可能不太大的動(dòng)畫(huà)效果:跳動(dòng)的字符。為了提高動(dòng)畫(huà)效果的可重用性以及調(diào)用的靈活性,通過(guò)Behavior實(shí)現(xiàn)跳動(dòng)的字符動(dòng)畫(huà)。先看下效果:
技術(shù)要點(diǎn)與實(shí)現(xiàn)
通過(guò)TextEffect
的PositionStart
和PositionCount
屬性控制應(yīng)用動(dòng)畫(huà)效果的子字符串的起始位置以及長(zhǎng)度,同時(shí)使用TranslateTransform
設(shè)置字符縱坐標(biāo)的移動(dòng)變換,以實(shí)現(xiàn)跳動(dòng)的效果。主要步驟如下:
- 在OnAttached方法中,注冊(cè)
Loaded
事件,在Load
事件中為TextBlock
添加TextEffect
效果,其中PositionCount
設(shè)置為1,每次只跳動(dòng)一個(gè)字符。 - 添加啟動(dòng)動(dòng)畫(huà)效果的
BeginEffect
方法,并創(chuàng)建控制子字符縱向移動(dòng)變換的線性動(dòng)畫(huà)。然后根據(jù)字符串(剔除空字符)的長(zhǎng)度n,創(chuàng)建n個(gè)關(guān)鍵幀,每個(gè)關(guān)鍵幀中把PositionStart
設(shè)置為要跳動(dòng)的字符在字符串中的索引 - 在開(kāi)啟動(dòng)畫(huà)屬性
IsEnabled=true
和TextBlock
內(nèi)容變化時(shí),啟動(dòng)動(dòng)畫(huà)效果
在創(chuàng)建關(guān)鍵幀設(shè)置跳動(dòng)字符位置時(shí)剔除了空字符,是為了是動(dòng)畫(huà)效果顯得連貫
public class DanceCharEffectBehavior : Behavior<TextBlock> { private TextEffect _textEffect; private string _textEffectName; private TranslateTransform _translateTransform = null; private string _translateTransformName; private Storyboard _storyboard; protected override void OnAttached() { base.OnAttached(); this.AssociatedObject.Loaded += AssociatedObject_Loaded; this.AssociatedObject.Unloaded += AssociatedObject_Unloaded; this.AssociatedObject.IsVisibleChanged += AssociatedObject_IsVisibleChanged; BindingOperations.SetBinding(this, DanceCharEffectBehavior.InternalTextProperty, new Binding("Text") { Source = this.AssociatedObject }); } protected override void OnDetaching() { base.OnDetaching(); this.AssociatedObject.Loaded -= AssociatedObject_Loaded; this.AssociatedObject.Unloaded -= AssociatedObject_Unloaded; this.AssociatedObject.IsVisibleChanged -= AssociatedObject_IsVisibleChanged; this.ClearValue(DanceCharEffectBehavior.InternalTextProperty); if (_storyboard != null) { _storyboard.Remove(this.AssociatedObject); _storyboard.Children.Clear(); } if (_textEffect != null) this.AssociatedObject.TextEffects.Remove(_textEffect); } private void AssociatedObject_IsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e) { if ((bool)e.NewValue == false) { if (_storyboard != null) _storyboard.Stop(this.AssociatedObject); } else { BeginEffect(this.AssociatedObject.Text); } } private void AssociatedObject_Loaded(object sender, RoutedEventArgs e) { if (_textEffect == null) { this.AssociatedObject.TextEffects.Add(_textEffect = new TextEffect() { PositionCount = 1, Transform = _translateTransform = new TranslateTransform(), }); NameScope.SetNameScope(this.AssociatedObject, new NameScope()); this.AssociatedObject.RegisterName(_textEffectName = "n" + Guid.NewGuid().ToString("N"), _textEffect); this.AssociatedObject.RegisterName(_translateTransformName = "n" + Guid.NewGuid().ToString("N"), _translateTransform); if (IsEnabled) BeginEffect(this.AssociatedObject.Text); } } private void AssociatedObject_Unloaded(object sender, RoutedEventArgs e) { StopEffect(); } private void SetEffect(string text) { if (string.IsNullOrEmpty(text) || this.AssociatedObject.IsLoaded == false) { StopEffect(); return; } BeginEffect(text); } private void StopEffect() { if (_storyboard != null) { _storyboard.Stop(this.AssociatedObject); } } private void BeginEffect(string text) { StopEffect(); int textLength = text.Length; if (textLength < 1 || _translateTransformName == null || IsEnabled == false) return; if (_storyboard == null) _storyboard = new Storyboard(); double duration = 0.5d; DoubleAnimation da = new DoubleAnimation(); Storyboard.SetTargetName(da, _translateTransformName); Storyboard.SetTargetProperty(da, new PropertyPath(TranslateTransform.YProperty)); da.From = 0d; da.To = 10d; da.Duration = TimeSpan.FromSeconds(duration / 2d); da.RepeatBehavior = RepeatBehavior.Forever; da.AutoReverse = true; char emptyChar = ' '; List<int> lsb = new List<int>(); for (int i = 0; i < textLength; ++i) { if (text[i] != emptyChar) { lsb.Add(i); } } Int32AnimationUsingKeyFrames frames = new Int32AnimationUsingKeyFrames(); Storyboard.SetTargetName(frames, _textEffectName); Storyboard.SetTargetProperty(frames, new PropertyPath(TextEffect.PositionStartProperty)); frames.Duration = TimeSpan.FromSeconds((lsb.Count) * duration); frames.RepeatBehavior = RepeatBehavior.Forever; frames.AutoReverse = true; int ii = 0; foreach (int index in lsb) { frames.KeyFrames.Add(new DiscreteInt32KeyFrame() { Value = index, KeyTime = TimeSpan.FromSeconds(ii * duration), }); ++ii; } _storyboard.Children.Add(da); _storyboard.Children.Add(frames); _storyboard.Begin(this.AssociatedObject, true); } private string InternalText { get { return (string)GetValue(InternalTextProperty); } set { SetValue(InternalTextProperty, value); } } private static readonly DependencyProperty InternalTextProperty = DependencyProperty.Register("InternalText", typeof(string), typeof(DanceCharEffectBehavior), new PropertyMetadata(OnInternalTextChanged)); private static void OnInternalTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var source = d as DanceCharEffectBehavior; if (source._storyboard != null) { source._storyboard.Stop(source.AssociatedObject); source._storyboard.Children.Clear(); } source.SetEffect(e.NewValue == null ? string.Empty : e.NewValue.ToString()); } public bool IsEnabled { get { return (bool)GetValue(IsEnabledProperty); } set { SetValue(IsEnabledProperty, value); } } public static readonly DependencyProperty IsEnabledProperty = DependencyProperty.Register("IsEnabled", typeof(bool), typeof(DanceCharEffectBehavior), new PropertyMetadata(true, (d, e) => { bool b = (bool)e.NewValue; var source = d as DanceCharEffectBehavior; source.SetEffect(source.InternalText); })); }
調(diào)用的時(shí)候只需要在TextBlock
添加Behavior即可,代碼如下
<TextBlock FontSize="20" Text="Hello"> <i:Interaction.Behaviors> <local:DanceCharEffectBehavior x:Name="titleEffect" IsEnabled="True" /> </i:Interaction.Behaviors> </TextBlock>
結(jié)尾
本例中還有許多可以完善的地方,比如字符跳動(dòng)的幅度可以根據(jù)實(shí)際的FontSize來(lái)設(shè)置,或者增加依賴屬性來(lái)控制;動(dòng)畫(huà)是否倒退播放,是否循環(huán)播放,以及動(dòng)畫(huà)的速度都可以通過(guò)增加依賴屬性在調(diào)用時(shí)靈活設(shè)置。
到此這篇關(guān)于基于WPF實(shí)現(xiàn)跳動(dòng)的字符效果的文章就介紹到這了,更多相關(guān)WPF字符跳動(dòng)效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用C# 的webBrowser寫(xiě)模擬器時(shí)的javascript腳本調(diào)用問(wèn)題
這篇文章主要介紹了C# 的webBrowser寫(xiě)模擬器時(shí)的javascript腳本調(diào)用問(wèn)題,需要的朋友可以參考下2017-07-07C#使用this關(guān)鍵字實(shí)現(xiàn)串聯(lián)構(gòu)造函數(shù)調(diào)用方法
這篇文章主要介紹了C#使用this關(guān)鍵字實(shí)現(xiàn)串聯(lián)構(gòu)造函數(shù)調(diào)用方法,實(shí)例分析了使用this關(guān)鍵字串聯(lián)構(gòu)造函數(shù)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01C#使用WebSocket實(shí)現(xiàn)聊天室功能
這篇文章主要為大家詳細(xì)介紹了C#使用WebSocket實(shí)現(xiàn)聊天室功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02深入分析緩存依賴中cachedependency對(duì)象及周邊小講
本篇文章是對(duì)緩存依賴中cachedependency對(duì)象進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06c#基于WinForm的Socket實(shí)現(xiàn)簡(jiǎn)單的聊天室 IM
這篇文章主要介紹了c#基于WinForm的Socket實(shí)現(xiàn)簡(jiǎn)單的聊天室 IM的步驟,幫助大家更好的理解和學(xué)習(xí)使用c#,感興趣的朋友可以了解下2021-05-05C#實(shí)現(xiàn)Word轉(zhuǎn)PDF的方法總結(jié)
這篇文章主要為大家詳細(xì)介紹了C#中實(shí)現(xiàn)Word轉(zhuǎn)PDF的常用方法,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,有需要的小伙伴可以參考下2023-10-10