Animation - vjj root page

Animation
24.1.16
vjj
1
Win32 API
SetTimer
(hWnd, timerID, milisec, NULL);
WM_TIMER:
.......
// async
.......
24.1.16
vjj
3
WPF animations
• Co lze animovat?
•
•
Dependency properties libovolných objektů
(tedy většinu vlastností)
Musí existovat animace pro příslušný datový typ
• typy animací
•
•
•
24.1.16
<DataType>Animation
<DataType>AnimationUsingKeyFrames
•
•
•
lineární
spline
diskrétní
<DataType>AnimationUsingPath
vjj
4
<DataType>
Animation
<DataType>
24.1.16
<DataType>
AnimationUsingKeyFrames
Discrete
Linear
Spline
Double
Point
ano
ano
ano
ano
Byte
Decimal
Int16
Int32
Int64
Single
Vector
Rect
Size
Thickness
Point3D
Vector3D
Rotation3D
Color
ano
ano
ano
ano
Matrix
ano
Object
Boolean
Char
String
ano
<DataType>
AnimationUsingPath
ano
ano
vjj
5
Storyboard
• scénář animací
24.1.16
vjj
6
scénář animací
<Storyboard
TargetName="..."
TargetProperty="..." >
...Animation...
...Animation...
...Animation...
24.1.16
vjj
7
reference
<Button.Triggers>
<EventTrigger RoutedEvent=... >
<BeginStoryboard
24.1.16
Storyboard= ref >
vjj
8
inline
<Button.Triggers>
<EventTrigger RoutedEvent=... >
<BeginStoryboard>
<Storyboard>
...Animation...
24.1.16
vjj
9
ovládání scénářů
• BeginStoryboard
• PauseStoryboard
• SeekStoryboard
•
•
•
•
24.1.16
Name="sbn"
BeginStoryboardName="sbn"
BeginStoryboardName="sbn"
Offset="0:0:5"
ResumeStoryboard BeginStoryboardName="sbn"
StopStoryboard
BeginStoryboardName="sbn"
SkipStoryboardToFill
BeginStoryboardName="sbn"
C:\Users\vjj\Documents\VYUKA\GUI\500 Animations\AnimatedImage.xaml
vjj
11
kostra
<element.Triggers>
<EventTrigger RoutedEvent=... >
<EventTrigger.Actions>
<PauseStoryboard
BeginStoryboardName="BSN1" />
<BeginStoryboard
24.1.16
vjj
Name="BSN2" ...
12
Storyboard
• TargetName
• TargetProperty
myButton
Button.Width
• při odkazu na atribut vnořeného podobjektu je třeba
správně používat závorky pro Attached Properties a
indexy pro Children prvky kontejneru
• BeginTime
• Duration
• SpeedRatio
• RepeatBehavior
24.1.16
vjj
13
TargetProperty
<Button.LayoutTransform>
<TransformGroup>
<ScaleTransform ScaleX="1.5" ScaleY="1.2" />
<RotateTransform Angle="-15" />
<SkewTransform AngleX="-15" />
</TransformGroup>
</Button.LayoutTransform>
• Jak zapsat odkaz na úhel rotační transformace?
•
24.1.16
AnimatedImage.xaml
vjj
14
TargetProperty
<Button.LayoutTransform>
<TransformGroup>
<ScaleTransform
ScaleX="1.5"
<RotateTransform
<SkewTransform
ScaleY="1.2" />
Angle="-15" />
AngleX="-15" />
</TransformGroup>
</Button.LayoutTransform>
<DoubleAnimation
Storyboard.TargetProperty=
"Button.LayoutTransform.TransformGroup.RotateTransform.Angle"
From="-15"
24.1.16
To="15"
Duration="0:0:10" />
vjj
15
TargetProperty
<Button.LayoutTransform>
<TransformGroup>
<ScaleTransform
<RotateTransform
<SkewTransform
ScaleX="1.5"
ScaleY="1.2" />
Angle="-15" />
AngleX="-15" />
</TransformGroup>
</Button.LayoutTransform>
<DoubleAnimation
Storyboard.TargetProperty=
"(Button.LayoutTransform)
.(TransformGroup.Children)[1]
.(RotateTransform.Angle) "
From="-15" To="15" Duration="0:0:10" />
24.1.16
vjj
16
sekvence animací
<Storyboard
TargetName="myRectangle"
TargetProperty="Rectangle.Height">
<DoubleAnimation
From="100" To="0"
BeginTime="0:0:02"
Duration="0:0:02" />
<DoubleAnimation
From="0" To="100"
BeginTime="0:0:04"
AutoReverse="True"
Duration="0:0:02"
RepeatBehavior="10x"/>
</Storyboard>
•
24.1.16
AnimatedRectangle.xaml
vjj
17
paralelní animace
<Storyboard ...>
<...Animation...
<ParallelTimeline
BeginTime=
<...Animation...
<...Animation...
<...Animation...
•
•
24.1.16
více animací se stejným začátkem bez nutnosti
uvádět individuálně stejný BeginTime
jinak animace bez uvedeného BeginTime běží sice
také paralelně, ale hned od začátku Storyboard
vjj
18
…Animation…
• Attached Properties:
•
•
Storyboard.TargetName
myButton
Storyboard.TargetProperty
Width
• při odkazu na atribut vnořeného podobjektu je třeba
správně používat závorky pro Attached Properties a
indexy pro Children prvky kontejneru
• posun začátku animace
– BeginTime ="0:0:2"
• doba trvání animace
– Duration ="0:0:10"
24.1.16
vjj
19
…Animation…
•
•
•
24.1.16
zpětná automatická animace
– AutoReverse ="True"
– animace reagující na činnost uživatele (Click) ???
opakování
•
RepeatBehavior="10x"
RepeatBehavior="Forever"
RepeatBehavior="0:0:11"
rychlost
•
•
SpeedRatio="2"
Zrychlování pří startu a zpomalování při zastavování
• AccelerationRatio="0.4"
• DecelerationRatio="0.4"
• EasingFunction
vjj
20
lineární animace
End
Value
Start
Value
BeginTime
24.1.16
Duration
vjj
EndTime
21
accelerated animation
•
•
AccelerationRatio="0.4"
End
Value
DecelerationRatio="0.4"
Start
Value
BeginTime
24.1.16
accelerating
0.4
constant
speed
vjj
0.6
decelerating
EndTime
22
…Animation…
•
FillBehavior
•
•
•
24.1.16
Gets or sets a value that specifies how the animation
behaves after it reaches the end of its active period.
• Specifies how a Timeline behaves when it is outside its
active period while its parent is still active
• Specifies how a Timeline behaves when it is outside its
active period but its parent is inside its active or hold
period
HoldEnd – after it reaches the end of its active period, the
timeline holds its progress until the end of its parent's
active and hold periods
Stop – the timeline stops if it is outside its active period
despite its parent is inside its active period.
vjj
23
HoldEnd 1/3
<Button Content="Animate and Then Set">
<Button.Background>
<SolidColorBrush x:Name="Brush1" Color="Red" />
</Button.Background>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard TargetName="Brush1"
TargetProperty="Color"
Duration="0:1:0">
<ColorAnimation From="Red" To="Yellow" Duration="0:0:5"
FillBehavior="HoldEnd" Completed="setBrush1Color" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
24.1.16
vjj
24
HoldEnd 2/3
• After the ColorAnimation completes, the program
attempts to change the brush's color to blue.
private void setBrush1Color
(object sender, EventArgs e)
{
Brush1.Color = Colors.Blue;
// Does not appear to have any effect:
// the brush remains yellow
}
24.1.16
vjj
25
HoldEnd 3/3
•
The previous code doesn't appear to do anything:
the brush remains yellow, which is the value supplied by
the ColorAnimation that animated the brush.
The underlying property value (the base value) is actually
changed to blue.
However, the effective, or current, value remains yellow
because the ColorAnimation is still overriding the base
value.
If you want the base value to become the effective value
again, you must stop the animation from influencing the
property.
•
Set the animation's FillBehavior property to Stop
24.1.16
vjj
26
iterační animace
•
From
počáteční hodnota
•
To
koncová hodnota
•
By
rozdíl koncové a počáteční hodnoty
•
IsAdditive
•
24.1.16
•
current value + From
...
current value + To
IsCumulative (with RepeatBehavior)
•
hodnoty z jednotlivých opakování animace se sčítají
vjj
27
<Button Width="100"
<DoubleAnimation From="50" To="100" RepeatBehavior="3x"
IsAdditive="True" AutoReverse="False" />
•
150 ... 200,
150 ...200 ,
150 ...200
<DoubleAnimation From="50" To="100" RepeatBehavior="3x"
IsAdditive="True" AutoReverse="True" />
•
150 ... 200 ... 150,
150 ... 200 ... 150 ,
150 ... 200 ... 150
<DoubleAnimation From="50" To="100" RepeatBehavior="3x"
IsCumulative="True" AutoReverse="False" />
•
50 ... 100,
100 ... 150 ,
150 ... 200
<DoubleAnimation From="50" To="100" RepeatBehavior="3x"
IsCumulative="True" AutoReverse="True" />
•
24.1.16
50 ... 100 ... 50,
100 ... 150 ... 100 ,
150 ... 200 ... 150
vjj
28
Expanding Button
<Button Width="100" Height="30" Margin="5" >
my Button
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard
TargetProperty="Width">
<DoubleAnimation
From="100" To="200" Duration="0:0:1"
AutoReverse="True" RepeatBehavior="2x" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
24.1.16
vjj
29
Expanding Button
<Button Width="100" Height="30" Margin="5" >
my Button
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Width"
From="100"
To="200"
AutoReverse="True"
Duration="0:0:1"
RepeatBehavior="2x" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
24.1.16
vjj
30
Expanding Button
<Button FontSize="8" Margin="5"
HorizontalAlignment="Center"
VerticalAlignment="Center">
Expanding Button
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard TargetProperty="FontSize">
<DoubleAnimation From="8" To="32"
Duration="0:0:2"
AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
24.1.16
vjj
31
Animation Using Key Frames
24.1.16
vjj
33
KeyFrames animace
•
Zadávají se klíčové snímky animace
(pomocí klíčových snímků lze animovat i text)
•
•
•
24.1.16
čas a hodnota vlastnosti v tomto čase
typ přechodu od minulé k této hodnotě
Typy přechodů mezi klíčovými snímky
•
DiscreteDoubleKeyFrame
– skok
•
LinearDoubleKeyFrame
– lineární změna
•
SplineDoubleKeyFrame
– beziérova křivka
vjj
34
animace
End
Value
Start
Value
BeginTime
24.1.16
Duration
vjj
EndTime
35
sample
<Rectangle Fill="Blue" Width="50" Height="50" Margin="5" HorizontalAlignment="Left">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="MyTransform" X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyTransform"
Storyboard.TargetProperty="X"
Duration="0:0:10">
<LinearDoubleKeyFrame KeyTime="0:0:2" Value="100" />
<DiscreteDoubleKeyFrame KeyTime="0:0:5" Value="-100" />
<SplineDoubleKeyFrame KeyTime="0:0:10" KeySpline="0,0.7 1,1" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
24.1.16
vjj
37
AnimationUsingKeyFrames
Property type
animation
Interpolation methods supported
Byte
ByteAnimationUsingKeyFrames
Discrete, Linear, Splined
Color
ColorAnimationUsingKeyFrames
Discrete, Linear, Splined
Decimal
DecimalAnimationUsingKeyFrames
Discrete, Linear, Splined
Double
DoubleAnimationUsingKeyFrames
Discrete, Linear, Splined
Int16
Int16AnimationUsingKeyFrames
Discrete, Linear, Splined
Int32
Int32AnimationUsingKeyFrames
Discrete, Linear, Splined
Int64
Int64AnimationUsingKeyFrames
Discrete, Linear, Splined
Point
PointAnimationUsingKeyFrames
Discrete, Linear, Splined
Quaternion
QuaternionAnimationUsingKeyFrames
Discrete, Linear, Splined
Rect
RectAnimationUsingKeyFrames
Discrete, Linear, Splined
Rotation3D
Rotation3DAnimationUsingKeyFrames
Discrete, Linear, Splined
Single
SingleAnimationUsingKeyFrames
Discrete, Linear, Splined
Size
SizeAnimationUsingKeyFrames
Discrete, Linear, Splined
Thickness
ThicknessAnimationUsingKeyFrames
Discrete, Linear, Splined
Vector3D
Vector3DAnimationUsingKeyFrames
Discrete, Linear, Splined
Vector
VectorAnimationUsingKeyFrames
Discrete, Linear, Splined
Matrix
MatrixAnimationUsingKeyFrames
Discrete
String
StringAnimationUsingKeyFrames
Discrete
Object
ObjectAnimationUsingKeyFrames
Discrete
Boolean
BooleanAnimationUsingKeyFrames
Discrete
24.1.16
vjj
38
DoubleAnimationUsingKeyFrames
•
•
•
24.1.16
LinearDoubleKeyFrame
•
•
KeyTime, Value
time: 0 .. 1 .. 2 ... 5 ... 10
value: 0 .. 2 .. 4 ... 10 ... 20
DiscreteDoubleKeyFrame
•
•
KeyTime, Value
time: 0 .. 1 .. 2 ... 5 ... 10
value: 0 .. 0 .. 0 ... 0 ... 20
SplineDoubleKeyFrame
•
KeyTime, Value, KeySpline
vjj
39
ObjectAnimationUsingKeyFrames
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas Name="myGrid" Background="Wheat">
<Button Content="click" FontSize="32" FontWeight="Bold" Margin="150" Padding="20,2,20,5" />
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard TargetName="myGrid" TargetProperty="Background">
<ObjectAnimationUsingKeyFrames>
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="Blue" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:1">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="Wheat" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
</Canvas>
</Page>
24.1.16
vjj
40
KeySpline
•
•
A KeySpline is defined by cubic Bezier curves.
•
The two coordinates in the KeySpline define those two control
points.
•
When describing key splines,
the start point of the Bezier curve is always 0,
and the end point is always 1,
which is why you define only the two control points.
•
The resulting curve specifies how an animation is interpolated
during a time segment; that is, the curve represents the rate of
change in the animation's target attribute over the time segment
24.1.16
A cubic Bezier curve is defined by a start point, an end point, and
two control points.
vjj
41
DiscreteAnimation
<Storyboard TargetName="myButton"
TargetProperty="(Button.Content)">
<ObjectAnimationUsingKeyFrames Duration="0:0:10">
<DiscreteObjectKeyFrame KeyTime="0:0:2"
Value="Button is animated" />
<DiscreteObjectKeyFrame KeyTime="0:0:4"
Value="Animation is still running" />
<DiscreteObjectKeyFrame KeyTime="0:0:6"
Value="Hello, World" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
24.1.16
vjj
44
PointAnimationUsingPath
<Canvas Background="DarkOrange" Margin="2" Width="300" Height="300">
<Path Fill="Blue">
<Path.Data>
<EllipseGeometry x:Name="elips" Center="70,40" RadiusX="60" RadiusY="30" />
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard TargetName="elips" TargetProperty="Center">
<PointAnimationUsingPath Duration="0:0:4" AutoReverse="True" RepeatBehavior="Forever">
<PointAnimationUsingPath.PathGeometry>
<PathGeometry Figures="M 70 40 C 400 300, -100 300, 200 40" />
</PointAnimationUsingPath.PathGeometry>
</PointAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Canvas>
24.1.16
vjj
45
MatrixAnimationUsingPath
<PathGeometry x:Key="path"
Figures="M 200
200
C 300
0,
500 400, 700 200
C 900
0, 1000 200, 900 300
C 100 1100, 1200 800, 400 500
C 100
400,
100 400, 200 200" />
<MatrixAnimationUsingPath
Storyboard.TargetName="xformUnicycleMan"
Storyboard.TargetProperty="Matrix"
Duration="0:0:12"
PathGeometry="{StaticResource path}"
DoesRotateWithTangent="True"
RepeatBehavior="Forever" />
•
24.1.16
Petzold – kapitola 30 – příklad UnicycleMan
vjj
46
Animating the Output of an Animation Has No Effect
• You can't animate an object that is the output of
another animation.
• For example,
if you use an ObjectAnimationUsingKeyFrames to
animate the Fill of a Rectangle from a
RadialGradientBrush to a SolidColorBrush,
you can't animate any properties of the
RadialGradientBrush or SolidColorBrush.
24.1.16
vjj
47
Can't Change the Value of a Property after Animating it
• In some cases, it might appear that you can't
•
•
change the value of a property after it's been
animated, even after the animation has ended.
That's because, even though the animation
ended, it's still overriding the property's base
value.
To stop the animation from overriding the
property's current value,
•
•
•
24.1.16
remove it,
or give it a FillBehavior of Stop (instead of HoldEnd),
or start a new animation of the property .
vjj
48
Changing a Timeline Has No Effect
•
•
•
•
•
24.1.16
Although most Timeline properties are animatable and can be data bound,
changing the property values of an active Timeline seems to have no effect.
That's because, when a Timeline is begun, the timing system makes a copy of
the Timeline and uses it to create a Clock object. Modifying the original has no
effect on the system's copy.
For a Timeline to reflect changes, its clock must be regenerated and used to
replace the previously created clock. Clocks are not regenerated for you
automatically. The following are several ways to apply timeline changes:
If the timeline is or belongs to a Storyboard, you can make it reflect changes by
reapplying its storyboard using a BeginStoryboard or the Begin method. This
has the side effect of also restarting the animation. In code, you can use the
Seek method to advance the storyboard back to its previous position.
If you applied an animation directly to a property using the BeginAnimation
method, call the BeginAnimation method again and pass it the animation that
has been modified.
If you are working directly at the clock level, create and apply a new set of
clocks and use them to replace the previous set of generated clocks.
vjj
49