Animation 13.12.18 vjj 1
13.12.18 vjj 3 SetTimer Win32 API (hwnd, timerid, milisec, NULL); WM_TIMER:... // async...
13.12.18 vjj 4 DoubleAnimation? Co lze animovat? Dependency properties libovolných objektů (tedy většinu vlastností) Musí existovat animace pro příslušný datový typ typy animací <DataType>Animation <DataType>AnimationUsingKeyFrames lineární spline diskrétní <DataType>AnimationUsingPath
13.12.18 vjj 5 <DataType> Animation <DataType> AnimationUsingKeyFrames <DataType> AnimationUsingPath <DataType> Discrete Linear Spline Double Point Byte Decimal Int16 Int32 Int64 Single Vector Rect Size Thickness Point3D Vector3D Rotation3D Color ano ano ano ano ano ano ano ano ano Matrix ano ano Object Boolean Char String ano
13.12.18 vjj 6 Storyboard scénář animací
13.12.18 vjj 7 scénář animací <Storyboard TargetName="..." TargetProperty="..." >...Animation......Animation......Animation...
13.12.18 vjj 8 <Button.Triggers> start animací <EventTrigger RoutedEvent=... > <BeginStoryboard... >
13.12.18 vjj 9 <Button.Triggers> reference <EventTrigger RoutedEvent=... > <BeginStoryboard Storyboard= ref >
13.12.18 vjj 10 inline <Button.Triggers> <EventTrigger RoutedEvent=... > <BeginStoryboard> <Storyboard>...Animation...
13.12.18 vjj 12 ovládání scénářů BeginStoryboard Name="sbn" PauseStoryboard BeginStoryboardName="sbn" SeekStoryboard 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
13.12.18 vjj 13 kostra <element.triggers> <EventTrigger RoutedEvent=... > <EventTrigger.Actions> <PauseStoryboard BeginStoryboardName="BSN1" /> <BeginStoryboard Name="BSN2"...
13.12.18 vjj 14 TargetName TargetProperty Storyboard 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
13.12.18 vjj 15 <Button.LayoutTransform> TargetProperty <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? E:\Documents\VYUKA\GUI\500 Animations\20 AnimatedImage.xaml
13.12.18 vjj 16 TargetProperty <Button.LayoutTransform> <TransformGroup> <ScaleTransform ScaleX="1.5" ScaleY="1.2" /> <RotateTransform Angle="-15" /> <SkewTransform AngleX="-15" /> </TransformGroup> </Button.LayoutTransform> <DoubleAnimation Storyboard.TargetProperty= "Button.LayoutTransform.TransformGroup.RotateTransform.Angle" From="-15" To="15" Duration="0:0:10" />
13.12.18 vjj 17 TargetProperty <Button.LayoutTransform> <TransformGroup> <ScaleTransform ScaleX="1.5" ScaleY="1.2" /> <RotateTransform Angle="-15" /> <SkewTransform AngleX="-15" /> </TransformGroup> </Button.LayoutTransform> <DoubleAnimation Storyboard.TargetProperty= "(Button.LayoutTransform).(TransformGroup.Children)[1].(RotateTransform.Angle) " From="-15" To="15" Duration="0:0:10" /> collection
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" Duration="0:0:02" AutoReverse="True" RepeatBehavior="10x"/> </Storyboard> AnimatedRectangle.xaml 13.12.18 vjj 18
13.12.18 vjj 19 <Storyboard...> <...Animation... paralelní animace <ParallelTimeline BeginTime= <...Animation... <...Animation... <...Animation... 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
13.12.18 vjj 20 Attached Properties: Storyboard.TargetName Animation Storyboard.TargetProperty mybutton 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 kolekce posun začátku animace BeginTime ="0:0:2" doba trvání animace Duration ="0:0:10"
13.12.18 vjj 21 Animation 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
13.12.18 vjj 22 lineární animace End Value BeginTime Duration EndTime Start Value
13.12.18 vjj 23 accelerated animation AccelerationRatio="0.4" DecelerationRatio="0.4" End Value Start Value BeginTime accelerating 0.4 constant 0.6 speed decelerating EndTime
13.12.18 vjj 24 Animation FillBehavior 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.
13.12.18 vjj 25 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>
13.12.18 vjj 26 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 }
13.12.18 vjj 27 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
13.12.18 vjj 28 iterační animace From To počáteční hodnota koncová hodnota By rozdíl koncové a počáteční hodnoty IsAdditive current value + From... current value + To IsCumulative (with RepeatBehavior) hodnoty z jednotlivých opakování animace se sčítají
<Button Width="100" <DoubleAnimation From="50" To="100" RepeatBehavior="3x" 50... 100, 50...100, 50...100 IsAdditive="True" AutoReverse="False" /> <DoubleAnimation From="50" To="100" RepeatBehavior="3x" IsAdditive="True" AutoReverse="True" /> 50... 100... 50, 50... 100... 50, 50... 100... 50 <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" /> 50... 100... 50, 100... 150... 100, 150... 200... 150 13.12.18 vjj 29
13.12.18 vjj 30 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>
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" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Button.Triggers> </Button> 13.12.18 vjj 31
13.12.18 vjj 32 <Button FontSize="8" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center"> Expanding Button 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>
Animation Using Key Frames 13.12.18 vjj 34
13.12.18 vjj 35 KeyFrames animace Zadávají se klíčové snímky animace (pomocí klíčových snímků lze animovat i text) č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 LinearDoubleKeyFrame SplineDoubleKeyFrame skok lineární změna beziérova křivka
13.12.18 vjj 36 animace End Value BeginTime Duration EndTime Start Value
13.12.18 vjj 37 KeyFrames animace <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyTransform" Storyboard.TargetProperty="X" Duration="0:0:10"> <LinearDoubleKeyFrame KeyTime="0:0:4" Value="150" /> <DiscreteDoubleKeyFrame KeyTime="0:0:5" Value="-50" /> <SplineDoubleKeyFrame KeySpline="0,0.7 0.9,1" Value="100" /> </DoubleAnimationUsingKeyFrames>
13.12.18 vjj 38 sample <Rectangle Fill="Yellow" Width="50" Height="50" Margin="100" 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>
13.12.18 vjj 39 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
13.12.18 vjj 40 DoubleAnimationUsingKeyFrames 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
13.12.18 vjj 42 KeySpline A KeySpline is defined by cubic Bezier curves. A cubic Bezier curve is defined by a start point, an end point, and two control points. 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
13.12.18 vjj 45 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>
13.12.18 vjj 46 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>
13.12.18 vjj 47 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" /> Petzold kapitola 30 příklad UnicycleMan
13.12.18 vjj 48 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.
13.12.18 vjj 49 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, remove it, or give it a FillBehavior of Stop (instead of HoldEnd), or start a new animation of the property.
13.12.18 vjj 50 Changing a Timeline Has No Effect 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.