Yellow Fade Technique with Atlas

After seeing the new animation capabilities in the Atlas Control Toolkit, I wanted to experiment with implementing the Yellow Fade Technique.  I can't believe how simple it is with the new UpdatePanelAnimationExtender.

Demo: http://atlas.vertigosoftware.com/atlasyellowfade/

Source: http://blogs.Vertigosoftware.com/files/alan/atlasyellowfade.zip

The Code

The code should be really straight-forward.  I have an Update panel which contains an ASP.NET Label.  The update panel is triggered by the submit button which will change the label text to say hello to whatever's in the Textbox control.  I also added a server timestamp to the label.

To apply the yellow fade technique, I wrap the update panel around a div container and add the UpdatePanelAnimationExtender with properties to enable animation when the update panel has been updated.  There are two animation configured to fire in parallel for 2 seconds.  The first changes the background color from a shade of yellow back to white.  The second animation fades the content of the updatecontainer.

The work is done in this piece of code.  No knowledge of javascript necessary*!


<atlasToolkit:UpdatePanelAnimationExtender ID="upae" runat="server">
    <atlasToolkit:UpdatePanelAnimationProperties TargetControlID="UpdatePanel1">
        <Animations>
            <OnUpdated>
                <Sequence>
                    <Parallel duration="2" Fps="30">
                          <Color AnimationTarget="updatecontainer" StartValue="#FFEF3F" EndValue="#FFFFFF" Property="style" PropertyKey="backgroundColor" />
                          <FadeIn AnimationTarget="updatecontainer" minimumOpacity=".2" />
                    </Parallel>
                </Sequence>
            </OnUpdated>
        </Animations>
    </atlasToolkit:UpdatePanelAnimationProperties>
</atlasToolkit:UpdatePanelAnimationExtender>

* The design time support for the UpdateAnimationExtender shows the animation as simply "(Text)", so you would need to know the syntax for animations to configure it.

posted on Monday, September 18, 2006 4:50 PM by AlanL

Comments

# re: Yellow Fade Technique with Atlas

Monday, September 18, 2006 8:05 PM by Scott Stanfield
Fantastic! I thought this might be something difficult to do. Alan nailed it on his first attempt.

# September Atlas Control Toolkit Released (Now with Animation Support)

Tuesday, September 19, 2006 8:28 AM by ScottGu's Blog
The latest refresh of the Atlas Control Toolkit, which is a great library of useful ASP.NET AJAX-enabled

# September Atlas Control Toolkit Released (Now with Animation Support)

Tuesday, September 19, 2006 8:53 AM by Community Blogs
The latest refresh of the Atlas Control Toolkit, which is a great library of useful ASP.NET AJAX-enabled

# September Atlas Control Toolkit Released (Now with Animation Support)

Tuesday, September 19, 2006 8:53 AM by ASP.NET Team Blogs
The latest refresh of the Atlas Control Toolkit, which is a great library of useful ASP.NET AJAX-enabled

# re: Yellow Fade Technique with Atlas

Tuesday, September 19, 2006 11:48 AM by Ted
The design time "(Text)" is the default display for the mutliline string editor. If you select the Animations property and click the down button, it'll popup an editor that you can use to change the generic XML animation description just like you can in the markup itself.

Also - you don't need to inlclude the <Condition> tags if your ConditionScript="true" (i.e. this is the same as saying "if (true) { /* do something */ }" ).


This is a really cool demo - thanks for posting it!

# re: Yellow Fade Technique with Atlas

Tuesday, September 19, 2006 4:05 PM by Alan Le
Thanks Ted. I modified the code to remove the unnecessary ConditionScript="true" part.

# re: Yellow Fade Technique with Atlas

Tuesday, September 19, 2006 4:47 PM by Ted
Actually, I meant you could remove it entirely (I think by just taking out ConditionScript it will never play the child animations). The <Condition> animation is meant to selectively include child animations, but since you want the color and fade to always happen, you don't need it. The <Sequence> animation also isn't required here because it only has one child. You could simplify your animation markup to just:

<atlasToolkit:UpdatePanelAnimationExtender ID="upae" runat="server">
<atlasToolkit:UpdatePanelAnimationProperties TargetControlID="UpdatePanel1">
<Animations>
<OnUpdated>
<Parallel duration="2" Fps="30">
<Color
AnimationTarget="updatecontainer"
StartValue="#FFEF3F"
EndValue="#FFFFFF"
Property="style"
PropertyKey="backgroundColor" />
<FadeIn
AnimationTarget="updatecontainer"
minimumOpacity=".2" />
</Parallel>
</OnUpdated>
</Animations>
</atlasToolkit:UpdatePanelAnimationProperties>
</atlasToolkit:UpdatePanelAnimationExtender>

Great work
- Ted

# re: Yellow Fade Technique with Atlas

Tuesday, September 19, 2006 4:59 PM by Alan Le
Thanks again. This is exciting stuff.

# 九月份Atlas控件工具包发布(现支持动画效果)

Tuesday, October 03, 2006 10:48 AM by ASP.NET Chinese Blogs
【原文地址】September Atlas Control Toolkit Released (Now with Animation Support) 【原文发表日期】 Tuesday, September

# 九月份Atlas控件工具包发布(现支持动画效果)

Friday, November 03, 2006 1:14 AM by scottgu
Atlas控件工具包的最新版已于上个星期晚些时候推出。这个工具包基于核心ASP.NET AJAX 运行时，是个提供了很多有用的具备AJAX功能的ASP.NET控件库。

# re: Yellow Fade Technique with Atlas

Thursday, May 17, 2007 7:53 AM by Google排名
Good ! thank the author.

# re: Yellow Fade Technique with Atlas

Tuesday, May 22, 2007 5:25 AM by Matt Berseth
Very cool stuff. I was playing around with this control too speficially fading in/out and centering a progressbar over the updatepanel. There is an example of it here: http://mattberseth.com/blog/2007/05/ajaxnet_example_using_an_updat.html