A fun little swoop effect proof-of-concept that can be used to do cool layout to layout animation effect. (Layout to layout is when an object moves from one layout container to another, such as animating an item moving from a list box to a larger view content area.)
The idea is pretty basic and turned out quite well- basically I used a placeholder to demarcate the animation source, then create a 3D mesh with bezier curves between the two positions. The drawing is just a VisualBrush and I'm animating the brush's transform (not the mesh) so the effect runs quite well. On my desktop this loops at 0% CPU usage, my laptop is a bit chunky, which I need to investigate. For a little bit of polish I threw in some z-depth w/ a directional light on the model for some shadowing.
The sample uses keyframing in the XAML to animate the object- I was playing around with animating the scale and offset gave it a bit of a rubbery feel. If you edit Window1.xaml and delete the animations, then it's controllable via the slider on the window.
Source
The idea is pretty basic and turned out quite well- basically I used a placeholder to demarcate the animation source, then create a 3D mesh with bezier curves between the two positions. The drawing is just a VisualBrush and I'm animating the brush's transform (not the mesh) so the effect runs quite well. On my desktop this loops at 0% CPU usage, my laptop is a bit chunky, which I need to investigate. For a little bit of polish I threw in some z-depth w/ a directional light on the model for some shadowing.
The sample uses keyframing in the XAML to animate the object- I was playing around with animating the scale and offset gave it a bit of a rubbery feel. If you edit Window1.xaml and delete the animations, then it's controllable via the slider on the window.
Source
posted by pete blois at 2/17/2006
12 Comments:
Could not find "c:\code\shots\Gauss.PNG".
Very easy to fix: Just open window1.xaml and substitute the value on the source attribute within the swoop element with the path to a picture on your own computer.
Oops! Sorry about that!
I just updated the code with a version that doesn't use the image, thanks a bunch for pointing that out!
I also added a handful of comments to the Swoop class, I hope the code's not too painful to peruse, definitely not the cleanest stuff around.
When I try to build using Sparkel or VS I get the following error:
Error 3 No overload for method 'ProvideValue' takes '2' arguments Swoop.cs Line 234
I'm a designer with XSML, XML, VB, ActionScript but don't know C# and overloading class, public vs. private classes using statements seems like a lot of code to so stuff similar to flash
I tried getting this sample to work on the July CTP - it seems like the changes to the ProvideValue method of the Binding object have broken this sample. Unfortunately transforms don't seem to have a "SetBinding" method so I couldn't see how to port this. Any chance you could provide some pointers?
For RC1, replace the following lines in Swoop.cs:
translation.SetValue(TranslateTransform.XProperty, binding.ProvideValue(translation, TranslateTransform.XProperty));
with
BindingOperations.SetBinding(translation, TranslateTransform.XProperty, binding);
and
scale.SetValue(ScaleTransform.ScaleXProperty, binding.ProvideValue(scale, ScaleTransform.ScaleXProperty));
with
BindingOperations.SetBinding(scale, ScaleTransform.ScaleXProperty, binding);
I've encountered a different issue, though. The bezier gets cropped for some reason. Any idea how to fix that?
I'm experiencing the same clipping issue. Has anyone figured this out?
Good design!
Thanks for interesting article.
I like articles like this. Thanks!
Well done. Keep up the great work. Best regards!
I like it a lot! Nice site, I will bookmark!
Post a Comment
<< Home