Nick Josevski shows in an article on his blog how to create type-on animations using SketchFlow Animations.
He also asks if anybody knows a different, maybe easier solution.
Here is a really simple, quick&dirty behavior sample that handles type-on animation for text blocks.
Here is how you would use it:
- Create a text block. Make its initial text empty
- Pick the TypeOnAction from the asset panel and drop it on the TextBlock.
- Select the action in the object tree and configure the properties:
- Set the desired text in the TypeOnText property
- Set the desired delay between characters (in seconds) in the IntervalInSeconds property
- Set up whatever trigger you like for the action.
The example in the following screenshot uses the Click event from a button to start the type-on process.
Below the code of the sample. It is really simple:
- It declares two DependencyProperties for the text to use and the delay for typing
- It declares a dispatcher timer for the delayed “typing”
- In the Invoke() method, we set up the timer and start it
- There is a timer callback that sets the text in the TextBox
1: using System;
2: using System.Collections.Generic;
3: using System.Text;
4: using System.Windows;
5: using System.Windows.Controls;
6: using System.Windows.Data;
7: using System.Windows.Documents;
8: using System.Windows.Input;
9: using System.Windows.Media;
10: using System.Windows.Media.Imaging;
11: using System.Windows.Shapes;
12: using System.Windows.Interactivity;
13: using System.Windows.Threading;
14:
15: namespace TypeOnScreens
16: {
17: //
18: // If you want your Action to target elements other than its parent, extend your class
19: // from TargetedTriggerAction instead of from TriggerAction
20: //
21: public class TypeOnAction : TriggerAction<TextBlock>
22: {
23: DispatcherTimer timer;
24: int len = 1;
25:
26: public TypeOnAction()
27: {
28: // Insert code required on object creation below this point.
29: timer = new DispatcherTimer();
30: }
31:
32: protected override void Invoke(object o)
33: {
34: // Insert code that defines what the Action will do when triggered/invoked.
35: if (AssociatedObject == null)
36: return;
37:
38: AssociatedObject.Text = "";
39: timer.Interval = TimeSpan.FromSeconds(IntervalInSeconds);
40: timer.Tick += new EventHandler(timer_Tick);
41: len = 1;
42: timer.Start();
43: }
44:
45:
46: void timer_Tick(object sender, EventArgs e)
47: {
48: if (len > 0 && len <= TypeOnText.Length)
49: {
50: AssociatedObject.Text = TypeOnText.Substring(0, len);
51: len++;
52: timer.Start();
53: }
54: else
55: timer.Stop();
56: }
57:
58: public string TypeOnText
59: {
60: get { return (string)GetValue(TypeOnTextProperty); }
61: set { SetValue(TypeOnTextProperty, value); }
62: }
63:
64: // Using a DependencyProperty as the backing store for TypeOnText. This enables animation, styling, binding, etc...
65: public static readonly DependencyProperty TypeOnTextProperty =
66: DependencyProperty.Register("TypeOnText", typeof(string), typeof(TypeOnAction), new PropertyMetadata(""));
67:
68:
69:
70: public double IntervalInSeconds
71: {
72: get { return (double)GetValue(IntervalInSecondsProperty); }
73: set { SetValue(IntervalInSecondsProperty, value); }
74: }
75:
76: // Using a DependencyProperty as the backing store for IntervalInSeconds. This enables animation, styling, binding, etc...
77: public static readonly DependencyProperty IntervalInSecondsProperty =
78: DependencyProperty.Register("IntervalInSeconds", typeof(double), typeof(TypeOnAction), new PropertyMetadata(0.35));
79:
80:
81:
82: }
83: }
To run the sample, save the code in a file TypeOnAction.cs and add it to your project. You might want to change the name space to match your project as well. After you build, you will find the new action in your asset panel.
Let me know what you think…
[...] So I came up with a solution; that is kind of crude, but works “ok”. The definition of ok is very subjective in this situation. I also describe steps to animate a highlight effect on some text. So if you’re reading this and have a better/easier solution let me know. Update 1: Thanks to Christian Schormann of Electric Beach with a great alternate approaching using a custom behavior in his post Type-On Text For Sketchflow With A Behavior [...]
Pingback by “Typing” animation effect in SketchFlow « [NickJosevski(Blog = ".NET")] — August 24, 2009 @ 17:49
[...] Type-On Text for SketchFlow with a Behavior (Christian Schormann) [...]
Pingback by Dew Drop – August 25, 2009 | Alvin Ashcraft's Morning Dew — August 25, 2009 @ 05:52
[...] electric beach » Type-On Text for SketchFlow with a Behavior electricbeach.org/?p=339 – view page – cached Nick Josevski shows in an article on his blog how to create type-on animations using SketchFlow Animations. — From the page [...]
Pingback by Twitter Trackbacks for electric beach » Type-On Text for SketchFlow with a Behavior [electricbeach.org] on Topsy.com — August 26, 2009 @ 03:26