2009-08-24 9 views
2

Dans l'application Microsoft Expression Blend 3 SketchFlow.Comment animer le "typage" du texte dans SketchFlow?

Comment voulez-vous faire pour animer le taper du texte, idéalement en caractère personnage par personnage. Comme si l'utilisateur le tapait.

Un curseur clignotant associé le rendrait parfait, mais c'est loin dans le domaine du "agréable à avoir".

Le système d'animation image-clé, ne vous permet pas de manipuler la

commune propriété> Texte

champ

donc par conséquent il ne persiste pas comme un changement enregistré dans cette image-clé de l'animation.

Je cherche soit pas de l'éditeur (en utilisant une sorte d'autre contrôle) ou même le code XAML ...

<VisualState> 
    <StoryBoard> 
     <DoubleAnimationUsingKeyFrame ... > 

Répondre

3

Après les blogs à ce sujet avec un solution involving a wipe animation d'un rectangle sur un bloc de texte, un réponse post de blog avec une solution plus avancée de using a custom behavior attaché à un bloc de texte a été créé. La création d'un comportement 'TypeOnAction' et l'ajout à un TextBlock donnera l'effet désiré de l'affichage caractère par caractère, avec un taux d'apparition personnalisable. Obtenez l'exemple de code complet here.

public class TypeOnAction : TriggerAction<TextBlock> 
{ 
    DispatcherTimer timer; 
    int len = 1; 

    public TypeOnAction() 
    { 
     timer = new DispatcherTimer(); 
    } 

    protected override void Invoke(object o) 
    { 
     if (AssociatedObject == null) 
      return; 

     AssociatedObject.Text = ""; 
     timer.Interval = TimeSpan.FromSeconds(IntervalInSeconds); 
     timer.Tick += new EventHandler(timer_Tick); 
     len = 1; 
     timer.Start(); 
    } 

    void timer_Tick(object sender, EventArgs e) 
    { 
     if (len > 0 && len <= TypeOnText.Length) 
     { 
      AssociatedObject.Text = TypeOnText.Substring(0, len); 
      len++; 
      timer.Start(); 
     } 
     else 
      timer.Stop(); 
    } 

    public string TypeOnText 
    { 
     get { return (string)GetValue(TypeOnTextProperty); } 
     set { SetValue(TypeOnTextProperty, value); } 
    } 

    public static readonly DependencyProperty TypeOnTextProperty = 
     DependencyProperty.Register("TypeOnText", typeof(string), typeof(TypeOnAction), new PropertyMetadata("")); 

    public double IntervalInSeconds 
    { 
     get { return (double)GetValue(IntervalInSecondsProperty); } 
     set { SetValue(IntervalInSecondsProperty, value); } 
    } 

    public static readonly DependencyProperty IntervalInSecondsProperty = 
     DependencyProperty.Register("IntervalInSeconds", typeof(double), typeof(TypeOnAction), new PropertyMetadata(0.35)); 

} 
+0

Mon blog Août 2009 n'a pas assez détaillé sur mon approche, donc je mis à jour récemment, et a ajouté un code source exemple sur GitHub - http://github.com/NickJosevski/SketchFlowSamples (pour la lingette approche d'animation d'action). –

Questions connexes