همكاري براي آموزش wpf animaition

[mahboube]

سلام دوستان
من اين تاپيك رو ايجاد ميكنم اميدوارم هركدوم از دوستان كه هر شكل انيميشني رو توي wpf ايجاد كردن، مثال و يا آموزششو اينجا بزارن.ايشا.. يه تاپيك به درد بخور ايجاد كنيم باكمك هم.
از همكاريتون واقعا ممنون ميشم.

[mahboube]

خودمم براي شروع يه مثال ساده از storyboad(از Msdn ) رو ميزارم.(انگليسي ميذارم چون فهميدنش آسونتره!)

1:The first part of the example creates a Rectangle (http://msdn.microsoft.com/en-us/library/system.windows.shapes.rectangle.aspx) element and displays it in a Page (http://msdn.microsoft.com/en-us/library/system.windows.controls.page.aspx). The steps that follow show how to create an animation and apply it to the rectangle's Opacity (http://msdn.microsoft.com/en-us/library/system.windows.uielement.opacity.aspx) property.



<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowTitle="Fading Rectangle Example">
<StackPanel Margin="10">
<Rectangle
Name="MyRectangle"
Width="100"
Height="100"
Fill="Blue">
</Rectangle>
</StackPanel>
</Page>


2:To make the animation transition from 1.0 to 0.0 you set its From (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.doubleanimation.fro m.aspx) property to 1.0 and its To (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.doubleanimation.to. aspx) property to 0.0:



<DoubleAnimation From="1.0" To="0.0" />


3:The Duration (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.timeline.duration.a spx) of an animation specifies how long it takes to go from its starting value to its destination value:



<DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />
3:To make the element fade back into view after it vanishes, set the AutoReverse (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.timeline.autorevers e.aspx) property of the animation to true. To make the animation repeat indefinitely, set its RepeatBehavior (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.timeline.repeatbeha vior.aspx) property to Forever (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.repeatbehavior.fore ver.aspx):
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>


4:Create the Storyboard (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.storyboard.aspx) and add the animation as its child:




<Storyboard>
<DoubleAnimation
From="1.0" To="0.0" Duration="0:0:1"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>


5:Use the Storyboard.TargetName (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.storyboard.targetna me.aspx) attached property to specify the object to animate:




<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
From="1.0" To="0.0" Duration="0:0:1"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>


6:Use the TargetProperty (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.storyboard.targetpr operty.aspx) attached property to specify the property to animate. In the following code, the animation is configured to target the Opacity (http://msdn.microsoft.com/en-us/library/system.windows.uielement.opacity.aspx) property of a ،Create a (http://msdn.microsoft.com/en-us/library/system.windows.shapes.rectangle.aspx)BeginStoryboa rd (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.beginstoryboard.asp x) object and associate your storyboard with it: (http://msdn.microsoft.com/en-us/library/system.windows.shapes.rectangle.aspx)




Rectangle:BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard



7:Create an EventTrigger (http://msdn.microsoft.com/en-us/library/system.windows.eventtrigger.aspx) and add the BeginStoryboard (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.beginstoryboard.asp x) to its Actions (http://msdn.microsoft.com/en-us/library/system.windows.eventtrigger.actions.aspx)
collection




<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>



8:Add the EventTrigger (http://msdn.microsoft.com/en-us/library/system.windows.eventtrigger.aspx) to the Triggers (http://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.triggers.aspx) collection of the Rectangle.:




<Rectangle
Name="MyRectangle"
Width="100"
Height="100"
Fill="Blue">
<Rectangle.Triggers>
<!-- Animates the rectangle's opacity. -->
<EventTriggerRoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0"To="0.0"Duration="0:0:5"
AutoReverse="True"RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>


يك مستطيل آبي داريد كه هر وقت روش بريد Opacity ش تغيير مي كنه.اين مثال ساده اي بود ،اميدوارم دوستان مثالاشونو اينجا بذارن تا يه مجموعه جمع بشه.
ممنون.

[mahboube]

"من خودم الان دارم روي انيميشن wpf كار مي كنم بنابراين هرچيزي كه كفيد باشه براي يادگيريش رو اينجا ميذارم.

The following table shows several Duration (http://msdn.microsoft.com/en-us/library/system.windows.duration.aspx) settings and their resulting values.


Setting
Resulting value
0:0:5.5
5.5 seconds.
0:30:5.5
30 minutes and 5.5 seconds.
1:30:5.5
1 hour, 30 minutes, and 5.5 seconds.

[mahboube]

--------------------
AutoReverse


The AutoReverse (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.timeline.autorevers e.aspx) property specifies whether a timeline plays backward after it reaches the end of its Duration (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.timeline.duration.a spx). If you set this animation property to true, an animation reverses after it reaches the end of its Duration (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.timeline.duration.a spx), playing from its ending value back to its starting value. By default, this property is false.


كارش اينه كه مشخص مي كنه وقتي يك انيميشن اجرا شد ،دوباره از آخر به اول اجرا شه.مثلا opacity از 100 به 0 ميره و دوباره به 100 بر مي گرده.
[/quote]
-----------------
RepeatBehavior

The RepeatBehavior (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.timeline.repeatbeha vior.aspx) property specifies how many times a timeline plays. By default, timelines have an iteration count of 1.0, which means they play one time and do not repeat at all.
مشخص مي كنه انيميشن چندبار اجرا شه.

[mahboube]

storyboard
Storyboard (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.storyboard.aspx) objects provide one way to apply animations to properties
The Storyboard (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.storyboard.aspx) class provides the TargetName (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.storyboard.targetna me.aspx) and TargetProperty (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.storyboard.targetpr operty.aspx) attached properties. By setting these properties on an animation, you tell the animation what to animate. However, before an animation can target an object, the object must usually be given a name.

To start a storyboard in XAML, you associate it with an EventTrigger (http://msdn.microsoft.com/en-us/library/system.windows.eventtrigger.aspx). An EventTrigger (http://msdn.microsoft.com/en-us/library/system.windows.eventtrigger.aspx) is an object that describes what actions to take when a specified event occurs. One of those actions can be a BeginStoryboard (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.beginstoryboard.asp x) action, which you use to start your storyboard.
To start a Storyboard (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.storyboard.aspx) in code, you can use an EventTrigger (http://msdn.microsoft.com/en-us/library/system.windows.eventtrigger.aspx) or use the Begin (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.storyboard.begin.as px) method of the Storyboard (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.storyboard.aspx) class.

[mahboube]

تو مثالاي قبلي روي doubleanimatuon كار مي كرديم كه براي ايجاد انيميشن روي بعضي property ها مثل opacity،width,height استفاده ميشد .
اين مثال كاربا coloranimation هست كه براي ايجاد انيميشن روي color استفاده ميشه.

Animates the value of a Color (http://msdn.microsoft.com/en-us/library/system.windows.media.color.aspx) property between two target values using linear interpolation over a
specified Duration (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.timeline.duration.a spx).



<Rectangle Width="100" Height="100">
<Rectangle.Fill>
<SolidColorBrush x:Name="MyAnimatedBrush" Color="Orange" />
</Rectangle.Fill>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="MyAnimatedBrush"
Storyboard.TargetProperty="Color"
To="Gray" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>


<!-- Animates the brush's color to orange
when the mouse leaves the rectangle. -->
<EventTrigger RoutedEvent="Rectangle.MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="MyAnimatedBrush"
Storyboard.TargetProperty="Color"
To="Orange" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

[mahboube]

Key-Frame Animations

يك نوع ديگر از حالت هاي ايجاد انيميشن key-frame animation‌هست كه:




Key-frame animations enable you to animate using more than two target values, and control an animation's interpolation method.


value هاي اين نوع انيميشن با from,to,by‌مانند مثال هاي قبلي ايجاد نميشوند بلكه براي ايجاد اونها بايد از key frames object استفاده كنيم.



Unlike a From/To/By animation, a key frame animation has no From, To, or By properties with which to set its target values. A key-frame animation's target values are described using key frames objects


اگر بانرم افزارهاي گرافيكي مثل فلش كار كرده باشيد مفهوم frame by frame رو ميدونيد.يعني شما فريم هايي ايجاد مي كنيد كه پشت سرهم اجرا مي شوند.
اگر مثال زير رو اجرا كنيد متوجه اجراي فريم باي فريم مي شويد.
در مثال زير location‌يك شي در فريم هاي پشت سر هم تغيير مي كنند.




<Rectangle Fill="Blue"
Width="50" Height="50"
HorizontalAlignment="Left">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from 0 to 350, then 50,
then 200 over 10 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:10">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>


پاورقي.دوستان من اگر كامل نمي نويسم به خاطر اينه كه خودم همين الان دارم اينا رو ميخونم و خب كامل بلدشون نيستم و زيادم وقت ندارم خيلي توضيح بدم.اميدوارم تا همين جاش هم مفيد باشه و بعدا كه اطلاعاتم در مورد هركدوم كاملتر شد حتما اشكالاتشون رو تصحيح مي كنم.

[mahboube]

نكته جالب اينجاست كه با استفاده از key-frame animation مي تونيم روي type هاي مختلف انيميشن ايجاد كنيم.مثلا با BooleanAnimationUsingKeyFrames Class مي تونيم :

Animates the value of a property that takes a Boolean (http://msdn.microsoft.com/en-us/library/system.boolean.aspx) along a set of KeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.booleananimationusi ngkeyframes.keyframes.aspx) over a specified Duration (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.timeline.duration.a spx).



<StackPanel Orientation="Vertical" Margin="20">
<TextBlock>
Click the button to animate its IsEnabled property with a
BooleanAnimationUsingKeyFrames animation.
</TextBlock>
<Button Name="myAnimatedButton" Margin="200">Click Me
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames
Storyboard.TargetName="myAnimatedButton"
Storyboard.TargetProperty="IsEnabled"
Duration="0:0:4" FillBehavior="HoldEnd">
<!-- All the key frames below are DiscreteBooleanKeyFrames. Discrete key frames create
sudden "jumps" between values (no interpolation). Only discrete key frames can be used
for Boolean key frame animations. -->
<DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:0" />
<DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:1" />
<DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:2" />
<DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:3" />
<DiscreteBooleanKeyFrame Value="False" KeyTime="0:0:3.5" />
<DiscreteBooleanKeyFrame Value="True" KeyTime="0:0:4" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>


اگر اين مثالو اجرا كنيد مي بينيد توي يك زمانبندي مشخص خاصيت enable مربوط به button رو (Storyboard.TargetProperty="IsEnabled") تغيير مي ده.
--------------------
يا اين مثال كه براي ايجاد كردن انيميشن روي string .درواقع روي content يك تكست باكس كه از نوع string هست كار مي كنه:



<StackPanel HorizontalAlignment="Center">
<Button Name="myAnimatedButton" Margin="200"
FontSize="16pt" FontFamily="Verdana">Some Text
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<StringAnimationUsingKeyFrames
Storyboard.TargetName="myAnimatedButton" Storyboard.TargetProperty="(Button.Content)"
Duration="0:0:8" FillBehavior="HoldEnd">

<!-- All the key frames below are DiscreteStringKeyFrames. Discrete key frames create
sudden "jumps" between values (no interpolation). Only discrete key frames can be used
for String key frame animations. -->
<DiscreteStringKeyFrame Value="" KeyTime="0:0:0" />
<DiscreteStringKeyFrame Value="A" KeyTime="0:0:1" />
<DiscreteStringKeyFrame Value="An" KeyTime="0:0:1.5" />
<DiscreteStringKeyFrame Value="Ani" KeyTime="0:0:2" />
<DiscreteStringKeyFrame Value="Anim" KeyTime="0:0:2.5" />
<DiscreteStringKeyFrame Value="Anima" KeyTime="0:0:3" />
<DiscreteStringKeyFrame Value="Animat" KeyTime="0:0:3.5" />
<DiscreteStringKeyFrame Value="Animate" KeyTime="0:0:4" />
<DiscreteStringKeyFrame Value="Animated" KeyTime="0:0:4.5" />
<DiscreteStringKeyFrame Value="Animated " KeyTime="0:0:5" />
<DiscreteStringKeyFrame Value="Animated T" KeyTime="0:0:5.5" />
<DiscreteStringKeyFrame Value="Animated Te" KeyTime="0:0:6" />
<DiscreteStringKeyFrame Value="Animated Tex" KeyTime="0:0:6.5" />
<DiscreteStringKeyFrame Value="Animated Text" KeyTime="0:0:7" />
</StringAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>

[mahboube]

-------------------
WPF provides the following key-frame animation classes:



Boolean (http://msdn.microsoft.com/en-us/library/system.boolean.aspx)--- BooleanAnimationUsingKeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.booleananimationusi ngkeyframes.aspx)


Byte (http://msdn.microsoft.com/en-us/library/system.byte.aspx) ----ByteAnimationUsingKeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.byteanimationusingk eyframes.aspx)


Color (http://msdn.microsoft.com/en-us/library/system.windows.media.color.aspx) ---ColorAnimationUsingKeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.coloranimationusing keyframes.aspx)


Decimal (http://msdn.microsoft.com/en-us/library/system.decimal.aspx)--- DecimalAnimationUsingKeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.decimalanimationusi ngkeyframes.aspx)


Double (http://msdn.microsoft.com/en-us/library/system.double.aspx)--- DoubleAnimationUsingKeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.doubleanimationusin gkeyframes.aspx)


Int16 (http://msdn.microsoft.com/en-us/library/system.int16.aspx)--- Int16AnimationUsingKeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.int16animationusing keyframes.aspx)


Int32 (http://msdn.microsoft.com/en-us/library/system.int32.aspx) ---Int32AnimationUsingKeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.int32animationusing keyframes.aspx)


Int64 (http://msdn.microsoft.com/en-us/library/system.int64.aspx) ---Int64AnimationUsingKeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.int64animationusing keyframes.aspx)


Matrix (http://msdn.microsoft.com/en-us/library/system.windows.media.matrix.aspx) ---MatrixAnimationUsingKeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.matrixanimationusin gkeyframes.aspx)


Object (http://msdn.microsoft.com/en-us/library/system.object.aspx)--- ObjectAnimationUsingKeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.objectanimationusin gkeyframes.aspx)


Point (http://msdn.microsoft.com/en-us/library/system.windows.point.aspx) ---PointAnimationUsingKeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.pointanimationusing keyframes.aspx)


Quaternion (http://msdn.microsoft.com/en-us/library/system.windows.media.media3d.quaternion.aspx) ---QuaternionAnimationUsingKeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.quaternionanimation usingkeyframes.aspx)


Rect (http://msdn.microsoft.com/en-us/library/system.windows.rect.aspx)--- RectAnimationUsingKeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.rectanimationusingk eyframes.aspx)


Rotation3D (http://msdn.microsoft.com/en-us/library/system.windows.media.media3d.rotation3d.aspx) ---Rotation3DAnimationUsingKeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.rotation3danimation usingkeyframes.aspx)


Single (http://msdn.microsoft.com/en-us/library/system.single.aspx)--- SingleAnimationUsingKeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.singleanimationusin gkeyframes.aspx)


String (http://msdn.microsoft.com/en-us/library/system.string.aspx)--- StringAnimationUsingKeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.stringanimationusin gkeyframes.aspx)


Size (http://msdn.microsoft.com/en-us/library/system.windows.size.aspx) ---SizeAnimationUsingKeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.sizeanimationusingk eyframes.aspx)


Thickness (http://msdn.microsoft.com/en-us/library/system.windows.thickness.aspx)--- ThicknessAnimationUsingKeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.thicknessanimationu singkeyframes.aspx)


Vector3D (http://msdn.microsoft.com/en-us/library/system.windows.media.media3d.vector3d.aspx)--- Vector3DAnimationUsingKeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.vector3danimationus ingkeyframes.aspx)


Vector (http://msdn.microsoft.com/en-us/library/system.windows.vector.aspx) ---VectorAnimationUsingKeyFrames (http://msdn.microsoft.com/en-us/library/system.windows.media.animation.vectoranimationusin gkeyframes.aspx)

[mahboube]

اينم يك مثال خوشگله از ايجاد انيميشن سه بعدي با wpf:




<DockPanel>
<Viewbox>
<Canvas Width="321" Height="201"> <!-- The Viewport3D provides a rendering surface for 3-D visual content. -->
<Viewport3D Name="MyAnimatedObject"
ClipToBounds="True" Width="150" Height="150"
Canvas.Left="0" Canvas.Top="10">

<!-- Defines the camera used to view the 3D object. -->
<Viewport3D.Camera>
<PerspectiveCamera Position="0,0,2" LookDirection="0,0,-1" FieldOfView="60" />
</Viewport3D.Camera>

<!-- The ModelVisual3D children contain the 3D models -->
<Viewport3D.Children>

<!-- Two ModelVisual3D define the lights cast in the scene. Without light, the
3D object cannot be seen. Also, the direction of the lights affect shadowing. -->
<ModelVisual3D>
<ModelVisual3D.Content>
<DirectionalLight Color="#FFFFFF" Direction="-0.612372,-0.5,-0.612372" />
</ModelVisual3D.Content>
</ModelVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<DirectionalLight Color="#FFFFFF" Direction="0.612372,-0.5,-0.612372" />
</ModelVisual3D.Content>
</ModelVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<GeometryModel3D>

<!-- The geometry specifes the shape of the 3D plane. In this case, a flat sheet is created. -->
<GeometryModel3D.Geometry>
<MeshGeometry3D
TriangleIndices="0,1,2 3,4,5 "
Normals="0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 "
TextureCoordinates="0,0 1,0 1,1 1,1 0,1 0,0 "
Positions="-0.5,-0.5,0.5 0.5,-0.5,0.5 0.5,0.5,0.5 0.5,0.5,0.5 -0.5,0.5,0.5 -0.5,-0.5,0.5 " />
</GeometryModel3D.Geometry>

<!-- The material specifies the material applied to the plane. In this case it is a linear gradient.-->
<GeometryModel3D.Material>
<MaterialGroup>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<LinearGradientBrush.GradientStops>
<GradientStop Color="Yellow" Offset="0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</MaterialGroup>
</GeometryModel3D.Material>

<!-- The Transform specifies how to transform the 3D object. The properties of the
Rotation object are animated causing the 3D object to rotate and "wobble" (see Storyboard below).-->
<GeometryModel3D.Transform>
<RotateTransform3D x:Name="myRotateTransform3D" >
<RotateTransform3D.Rotation>
<AxisAngleRotation3D Axis="0,3,0" Angle="40" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</GeometryModel3D.Transform>
</GeometryModel3D>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D.Children>

<!-- Trigger the rotation animation when the 3D object loads. -->
<Viewport3D.Triggers>
<EventTrigger RoutedEvent="Viewport3D.Loaded">
<BeginStoryboard>
<Storyboard>

<!-- This animation animates the Rotation property of the RotateTransform
causing the 3D shape to rotate and wobble as the rotation angle and
axis are animated. -->
<Rotation3DAnimationUsingKeyFrames
Storyboard.TargetName="myRotateTransform3D"
Storyboard.TargetProperty="Rotation" >
<Rotation3DAnimationUsingKeyFrames.KeyFrames>

<!-- Using a LinearRotation3DKeyFrame, the object gradually rotates to an angle
of -60 degrees while the axis of rotation shifts (animates) to a new value. -->
<LinearRotation3DKeyFrame KeyTime="0:0:1">
<LinearRotation3DKeyFrame.Value>
<AxisAngleRotation3D Axis="1,0,1" Angle="-60" />
</LinearRotation3DKeyFrame.Value>
</LinearRotation3DKeyFrame>

<!-- Using a DiscreteRotation3DKeyFrame, the object suddenly rotates to the an angle
of 80 degrees on a new axis. This happens immdeiately after the first 1 and
a half seconds of the animation. -->
<DiscreteRotation3DKeyFrame KeyTime="0:0:1.5">
<DiscreteRotation3DKeyFrame.Value>
<AxisAngleRotation3D Axis="0,0,1" Angle="80" />
</DiscreteRotation3DKeyFrame.Value>
</DiscreteRotation3DKeyFrame>

<!-- Using a SplineRotation3DKeyFrame, the object rotates back to its starting position.
The animation starts out slowly at first and then speeds up. This KeyFrame ends
after the fourth second. -->
<SplineRotation3DKeyFrame KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:4">
<SplineRotation3DKeyFrame.Value>
<AxisAngleRotation3D Axis="0,3,0" Angle="40" />
</SplineRotation3DKeyFrame.Value>
</SplineRotation3DKeyFrame>

</Rotation3DAnimationUsingKeyFrames.KeyFrames>
</Rotation3DAnimationUsingKeyFrames>

</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Viewport3D.Triggers>
</Viewport3D>
</Canvas>

</Viewbox>
</DockPanel>

[مهدی فرزاد]

سلام و تشکر از کار با ارزش شما
من یک نظر دارم البته شاید خیلی ها تعصب روی کد نویسی رو داشته باشن ولی ساخت انیمیشن با استفاده از نرم افزار blend به مراتب سریع تر و آسان تر از نوشتن چندین خط کد XAML هست
شرکت ماکروسافت برای بهبود در روند طراحی فرم های WPF این نرم افزار رو معرفی کرد و الان ورژن 4 اون توی بازار هست

[mahboube]

سلام و تشکر از کار با ارزش شما
من یک نظر دارم البته شاید خیلی ها تعصب روی کد نویسی رو داشته باشن ولی ساخت انیمیشن با استفاده از نرم افزار blend به مراتب سریع تر و آسان تر از نوشتن چندین خط کد XAML هست
شرکت ماکروسافت برای بهبود در روند طراحی فرم های WPF این نرم افزار رو معرفی کرد و الان ورژن 4 اون توی بازار هست

ميشه يك درمورد كاربااين نرم افزار توضيح بديد؟
بعد از ايجاد انيميشن به xaml تبديل ميشه؟يا بايد به صورت component اضافش كرد به برنامه؟
درواقع نحوه استفاده از انيميشن توليد شده تو برنامه چطوريه؟
ممنون از همكاريتون

[mahboube]

سلام و تشکر از کار با ارزش شما
من یک نظر دارم البته شاید خیلی ها تعصب روی کد نویسی رو داشته باشن ولی ساخت انیمیشن با استفاده از نرم افزار blend به مراتب سریع تر و آسان تر از نوشتن چندین خط کد XAML هست
شرکت ماکروسافت برای بهبود در روند طراحی فرم های WPF این نرم افزار رو معرفی کرد و الان ورژن 4 اون توی بازار هست

ممنون
من يه توضيحاتي درباره اين نرم افزار خوندم ميزارم .لطفا اگر مشكلي داره تصحيحش كنيد.


Microsoft Expression Blend 3 SDK 1.0.1327.0 ابزار گرافیکی و محاوره ای را برای سهولت در ایجاد برنامه های قدرتمند بر پایه NET Framework 3 و ۳٫۵ در اختیار کاربران قرار میدهد. این محیط با دارا بودن ابزار ساده جهت افزایش بهره وری و نیز کاهش چرخه کارها بین designer ها و developer ها طراحی شده است. به خصوص Expression Blend این امکان را به Designer ها می دهد تا رابط های کاربری بر پایه WPF را به سادگی ایجاد نمایند. همچنین Designer ها بدون آشنایی با XAML می توانند به طراحی المان های گرافیکی بپردازند.



خروجی Expression Blend‌ به زبان XAML میباشد که سبب تسهیل همکاری میان Designer ها و developer ها میشود. Designer‌ها با استفاده از ابزار Expression Blend رابط گرافیکی کاربر را طراحی نموده و کدهای XAML‌حاصل را بین بخش های مختلف App‌ به اشتراک می گذارد، Developer‌ ها نیز میتوانند با استفاده از Visual Studio پروژه های ایجاد شده توسط Expression Blend‌ را باز کرده و کدنویسی پروژه را انجام دهند. علاوه بر این فایل های کد (code-behind) و C# و VB.NET نیز مانند کدهای XAML‌ میتوانند بین Expression Blend‌ و Visual Studio به اشتراک گذاشته شوند.


حالا سوالم اينه اين نرم افزار كداي xaml يك انيميشن رو هم توليد ميكنه؟

[مهدی فرزاد]

ممنون



حالا سوالم اينه اين نرم افزار كداي xaml يك انيميشن رو هم توليد ميكنه؟

توضیح کامل بود بله این نرم افزار مثل محیط طراحی VS هست ولی با امکانات بی نهایت بیشتر
شما با استفاده از ابزار مختلف و قابلیت های این نرم افزار انیمیشن یا کنترل و کلا محیط برنامه رو طراحی میکنی خروجیش مثل Vs هست بعدش میتونی توی vs کد نویسی های نهایی #c یا Vb رو انجام بدی نیازی به کانورت و یا وارد کردن در محیط Vs نداره
روی فایل کلیک کنی vs باز میشه و همون رو با تمام کدها در vs میبینی

[مهدی فرزاد]

این button رو در Blend طراحی کردم میتونید با Vs2010 بازش کنید خیلی راحت و کد هاش رو ببینید

[mahboube]

سلام
اين نرم ازار چندتانسخه داره كدومشو بايد بگيرم؟
Expression Studio 4 Ultimate؟
Expression Studio 4 Web Professional؟
Expression Encoder 4؟
يا...؟

[مهدی فرزاد]

سلام
اين نرم ازار چندتانسخه داره كدومشو بايد بگيرم؟
Expression Studio 4 Ultimate؟
Expression Studio 4 Web Professional؟
Expression Encoder 4؟
يا...؟
سلام
Expression Studio 4 Ultimate

که شامل تمام نرم افزار های این مجموعه میشه
Blend
Web
Design
Encoder

[mahboube]

نكته:موقع ايجاد انيميشن يك خاصيت به نام RoutedEvent داريم كه مشخص مي كنيم با چه رويدادي انيميشن ما اجرا شه.حالا وقتي رويداد رو مي نويسيم و اجرا مي كنيم اگر بخوايم برگرديم و تغييرش بديم خطا ميده كه بايد كل خط زير كه اين خصوصيت رو توش تنظيم مي كنيم رو پاك كنيم و دوباره با event جديد بنويسيم.



<EventTrigger RoutedEvent="Rectangle.MouseDown">

[iranpcl]

آقا من الان یه Frame دارم که توش یه Page لود کردم
میخوام وقتی Page توی این Frame عوش میشه مثلا باکد زید(مثلا دیگه)
MyPage mp = new MyPage();
MyFrame.Content = mp;
انیمیشنی تو صفحه ایجاد بشه شبیه به اینکه صفحه قبلی(Page) موجود تو frame از راست خارج بشه و صفحه بعدی(Page)که قرار frame نمایش بده از چپ وارد بشه
از مطالب قبلی این تایپیک برای این انیمیشن چیزی متوجه نشدم
لطفا کدش رو بگذارید

[Amir Oveisi]

میتونین از این روشی که تو این برنامه ارائه شده استفاده کنید:
http://www.japf.fr/download/japf_fr_slide_animation.zip
البته از Page استفاده نشده در این مثال. به جاش از user control استفاده شده.

[S30S60]

سلام .. خیلی خوبه خسته نباشید
من هم در حال یادگیری این برنامه Blend هستم یک مقاله انگلیسی با این نرم افزار هست که خیلی قشنگ یه مقدمه در مورد انیمیشن در Blend گفته بود گفتم برای شما هم لینکش رو بزارم. خودم هم یه ترجمه چرت و پرت ازش نوشتم براتون میزارم..
.. :بوس:

این لینک :
http://www.kirupa.com/net/intro_blend_animation_pg1.htm
یه خلاصه ترجمه شده pdf:
76506