如何在SketchFlow中“键入”文本动画?

时间:2009-08-24 12:55:20

标签: silverlight xaml animation keyframe

在Microsoft的Expression Blend 3 SketchFlow应用程序中。

你将如何制作动画文字输入的动画,理想情况是按角色时尚分段。好像用户正在输入它。

相关的闪烁光标会让它变得完美,但这远远超出了“很高兴”的范围。

关键帧动画系统,不允许您操纵

  

共同财产>文本

字段因此它不会作为动画关键帧中记录的更改而保留。

我正在寻找编辑器步骤(使用某种其他控件)或甚至是XAML代码......

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

1 个答案:

答案 0 :(得分:3)

在文本块上使用solution involving a wipe animation矩形对博客进行博客后,会创建一个响应博客文章,其中包含附加到文本块的更高级using a custom behavior解决方案。

创建'TypeOnAction'行为并添加到TextBlock,将提供所需的字符显示效果,并具有可自定义的出现率。获取完整的代码示例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));

}