C1SuperPanel contains thirty-one transition effects that allow you to customize interaction with the control. In this topic, you will set the AnimationEasing and AnimationDuration properties to create an animation effect that occurs when you scroll elements within the C1SuperPanel. This topic illustrates how to set each of these properties in Design view, in Source view, and in code.
Setting Animation Effects in Design View
Complete the following steps to set animation effects:
1. Drag and drop a C1Calendar control inside the C1SuperPanel control.
2. Select C1SuperPanel on the Web page and then navigate to the Properties window.
3. Expand the PanelBehaviorSettings node to reveal another list of properties and then complete the following:
• Set the AnimationEasing property to EaseOutCirc. This property determines the animation transition effect.
• Set the AnimationDuration property to 1500. This will lengthen the duration of the animation effect, guaranteeing that you will notice the effect when you build the project.
4. Press F5 to run your project and then click on any date in the month view area of the C1Calendar control. Observe that it moves diagonally to the lower right corner of the page before settling into a resting state.
Setting Animation Effects in Source View
In Source view place <PanelBehaviorSettings Enabled="True" animationduration="5000" animationeasing="EaseOutCirc"/> between the <cc1:C1SuperPanel> and </cc1:C1SuperPanel> tags so that the markup appears similar to the following:
<cc1:C1SuperPanel ID="C1SuperPanel1" runat="server" Height="1129px"
VisualStylePath="~/C1WebControls/VisualStyles">
<ContentTemplate>
<cc3:C1Calendar ID="C1Calendar1" runat="server" height="180px" width="230px">
</cc3:C1Calendar>
</ContentTemplate>
<PanelBehaviorSettings Enabled="True" animationduration="5000"
animationeasing="EaseOutCirc">
<HScroller SmallChange="1" LargeChange="0" Value="0" Maximum="100" Minimum="0" IncreaseButtonOffsetX="0" DecreaseButtonOffsetX="0" IncreaseButtonOffsetY="0" DecreaseButtonOffsetY="0"></HScroller>
<VScroller SmallChange="1" LargeChange="0" Value="0" Maximum="100" Minimum="0" IncreaseButtonOffsetX="0" DecreaseButtonOffsetX="0" IncreaseButtonOffsetY="0" DecreaseButtonOffsetY="0"></VScroller>
</PanelBehaviorSettings>
</cc1:C1SuperPanel>
Press F5 to run your project and then click on any date in the month view area of the C1Calendar control. Observe that it moves diagonally to the lower right corner of the page before settling into a resting state.
Setting Animation Effects in Code
Complete the following steps to set animation effects:
1. Declare the following namespace into your project:
Imports C1.Web.UI.Controls.C1SuperPanel
• C#
using C1.Web.UI.Controls.C1SuperPanel;
2. Set the duration of the animation:
C1SuperPanel1.PanelBehaviorSettings.AnimationDuration = 1500
• C#
C1SuperPanel1.PanelBehaviorSettings.AnimationDuration = 1500;
3. Select an animation transition effect:
C1SuperPanel1.ResizeSettings.AnimationEasing = Easing.EaseOutBounce
• C#
C1SuperPanel1.ResizeSettings.AnimationEasing = Easing.EaseOutBounce;
4. Press F5 to run your project and then click on any date in the month view area of the C1Calendar control. Observe that it moves diagonally to the lower right corner of the page before settling into a resting state.
|
