The C1ProgressBar control features thirty-one built in animations. In this topic, you will set the animation, the duration of the animation, and the delay of the animation in Design view, in Source view, and in code.
Configuring Animations in Design View
To configure animations, complete the following steps:
1. Click the Design button to enter Design view.
2. Right-click the C1ProgressBar control to open its context menu and select Properties.
The Properties window opens with the C1ProgressBar control’s properties in focus.
3. In the Properties window, set the following properties:
• Set the Easing property to EaseOutBounce. This establishes the animation effect.
• Set the AnimationDelay property to “500”. This establishes the length of time that will pass before the animation starts.
• Set the AnimationDuration property to “6000”. This establishes the length of the animation.
• Set the Value property to “100”. This will cause the progress indicator to fill the track at run time.
4. Press F5 to run the project and observe that the animation takes about a half-second to begin and six seconds to complete. The animation, EaseOutBounce, causes the progress indicator to bounce against the end of the track before settling into its resting state.
Configuring Animations in Source View
To configure animations, complete the following steps:
1. Click the Source button to enter Source view.
2. Add Easing=”EaseOutBounce”,AnimationDuraton=”6000”,AnimationDelay=”500”, and Value = “100” to the <cc1:C1ProgressBar> tag so that the markup resembles the following:
<cc2:C1ProgressBar ID="C1ProgressBar2" runat="server"
Value="100" AnimationDuration="40000" AnimationDelay="500" Easing="EaseOutBounce"/>
3. Press F5 to run the project and observe that the animation takes about a half-second to begin and six seconds to complete. The animation, EaseOutBounce, causes the progress indicator to bounce against the end of the track before settling into its resting state.
Configuring Animations in Code
1. To configure animations, complete the following steps:
2. On the Visual Studio toolbar, click View | Code to enter Code view.
3. Add the following code to the Page_Load event:
‘Set animation properties
C1ProgressBar1.Easing = C1.Web.UI.Easing.EaseOutBounce
C1ProgressBar1.AnimationDelay = 500
C1ProgressBar1.AnimationDuration = 6000
‘Set Value property so that the progress indicator automatically fills at run time
C1ProgressBar1.Value = 100
• C#
//Set animation properties
C1ProgressBar1.Easing = C1.Web.UI.Easing.EaseOutBounce;
C1ProgressBar1.AnimationDelay = 500;
C1ProgressBar1.AnimationDuration = 6000;
//Set Value property so that the progress indicator automatically fills at run time
C1ProgressBar1.Value = 100;
4. Press F5 to run the project and observe that the animation takes about a half-second to begin and six seconds to complete. The animation, EaseOutBounce, causes the progress indicator to bounce against the end of the track before settling into its resting state.
|
