SpriteHand
Module Border
  CSS Animation and Behaviors in Blend for VS2013
Module Border
Location: BlogsAndy's Blog    
Posted by: host 9/20/2013 9:41 AM


Blend for Visual Studio 2013 adds some great new features for development of JavaScript-based Windows 8 apps. In this blog post, we'll look at two of those features: CSS Animations and Behaviors.

NOTE: A video walkthrough is available to accompany this post.

CSS Animations allow developers to animate the values of CSS properties using keyframes. These animations can be difficult to write because it is hard to visualize an animation just by writing out CSS in a text editor.

Let's use Blend to create an animation using transforms. The animation will have a "2.5D effect" - because it uses simple transforms on 2D objects to create a 3D-like effect.

  1. Open Blend for Visual Studio 2013 and create a new HTML (Windows Store) app, using the Blank App template:



  2. Let's add in an image to animate. From the Projects Panel, expand the images subfolder and drag the image "logo.scale-100.png" to the artboard.



  3. With the img element selected, go to the CSS Properties Panel and ensure that "inline style" is selected. Then expand the Animation category. (note: normally it is a best practice to create a class for the animation instead of using an inline style, but there are issues with this in the Blend 2013 RC Build - these issues will be fixed by RTM).



  4. In the Animation Pane, click the "+" button to add in a new animation. Enter the following values:

    duration: 1s
    iteration-count: infinite
    play-state: running



  5. Next, we can record the actual animation key frames. Click the "Edit Animation" button in the Animation Pane. At the bottom of the Blend workspace, you will see a timeline, and at the top of the artboard you will see a message "Animation recording is on."



    Note that any changes you make to the CSS properties for the selected object will record a key frame in the animation. If at any time you want to stop keyframe recording, just click the red "record" button to the left of this message.
  6. In the Animation Pane, advance the yellow marker to the 1 second mark.
  7. In the CSS Properties Panel, expand the Transform Category and add a new Skew Transform using the dropdown selection:



  8.  Set the Skew x to 90deg and the y to 45deg.
  9. Add a second transform, this time select a Translate Transform using the dropdown selection.

    Set the Translate x property to 500px and the y property to 300px.
  10. In the Animation pane, click the "play" button to preview the animation. You can also "scrub" the animation by moving the timeline.
  11. To stop recording the animation, click the "Animation recording is on" button at the top of the artboard.
  12. Run the app by hitting F5, and witness the css animation!

Adding Behaviors

Now that we have an animation, let's add some interactivity to it so that the user clicks the image to start the animation. We can do this without writing any code using Behaviors.

  1. First, let's change our animation so that it is in the Paused state. With the image selected, go to the CSS Properties Panel and expand the Animation category. Set the play-state property of the animation to "paused."



  2. Set the iteration-count property to "1" so that the animation only executes once.
  3. Go to the Assets Panel and select the Behaviors category. Then select the SetStyleAction.



  4. Drag the SetStyleAction onto the element on the artboard.
  5. In the CSS Properties Panel, expand the Behaviors Category and you will see a new EventTriggerBehavior and SetStyleAction have been added. Select the EventTriggerBehavior and Note that the default event is "click" - so this action will be executed when the user clicks it.



  6. Select the SetStyleAction and set the styleProperty to "animation-play-state" and the styleValue to "running"



  7. Run the app by pressing F5. Then click the img to execute the SetStyleAction and run the animation.

Summary

In this post, we saw how to get started with two new compelling features of Blend for Visual Studio 2013 - CSS Animations and Behaviors. One limitation of using Blend for HTML/CSS design is that the tool is geared solely towards Windows Store apps. Hopefully someday we will see Blend support other project types such as ASP.NET Web projects, and adhere to more open JavaScript frameworks, because these are great features for web development!

 

Permalink |  Trackback

Title:
Comment:
Add Comment   Cancel 
Module Border Module Border
Module Border
  Subscribe
Module Border
RSS   Twitter
Module Border Module Border
Module Border
  Diversions
Module Border

TALKING RAGDOLL
This Windows Phone 7 App was created using Silverlight, the  Physics Helper Library,  and the Farseer Physics Engine. It gets interesting when you import your friends photos and have your way with them!

MORE INFO



DROPPYPOP
This Windows Phone 7 game was created using Silverlight, the  Physics Helper Library,  and the Farseer Physics Engine.
DEMO

MORE INFO



BOSS LAUNCH
This physics game won first place in the Server Quest Contest. Created using Silverlight 2, the Physics Helper Library,  and the Farseer Physics Engine.
PLAY IT

MORE INFO



DESTROY ALL INVADERS
A scrolling shooter game where the objective is to destroy the invading UFO's flying over a neighborhood of your choosing. Imagery provided by Microsoft Virtual Earth. Created using Silverlight 2.
PLAY IT

INFO AND CODE



PHYSICS HELPER DEMOS
These demos were created for the Physics Helper Library, which makes it easy to create physics games and simulations using Expression Blend, Silverlight, and the Farseer Physics Engine.
PLAY IT

INFO AND CODE



HOOK SHOT
This little basketball game took first place in the TeamZoneSports Silverlight Contest. Created using Silverlight 2 and the Farseer Physics engine.
PLAY IT

MORE INFO



SORT THE FOOBARS
A game where you need to sort the good foobars from the bad ones. Created using Silverlight 2 and the Farseer Physics engine.
PLAY IT

MORE INFO



POLYGON PHYSICS DEMO
A demo showing polygon physics where the user draws physics objects with the mouse. Created using Silverlight 2 and the Farseer Physics engine.
PLAY IT

MORE INFO



SILVERLIGHT ROCKS!
Destroy the asteroids before they destroy your ship! Created using Silverlight 2.
PLAY IT

INFO AND CODE



FISH GAME
A simple game of harpoon-the-fish. Written using the AJAX Sprite Toolkit.
PLAY IT

INFO AND CODE

Module Border Module Border
Module Border
  Search_Blog
Module Border
Module Border Module Border
Module Border
  Blog_Archive
Module Border
Module Border Module Border
Copyright (c) 2014 andy.beaulieu.com - Login