Animation vjj 1

Transkript

1 Animation vjj 1

2 vjj 3 SetTimer Win32 API (hwnd, timerid, milisec, NULL); WM_TIMER:... // async...

3 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

4 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

5 vjj 6 Storyboard scénář animací

6 vjj 7 scénář animací <Storyboard TargetName="..." TargetProperty="..." >...Animation......Animation......Animation...

7 vjj 8 <Button.Triggers> start animací <EventTrigger RoutedEvent=... > <BeginStoryboard... >

8 vjj 9 <Button.Triggers> reference <EventTrigger RoutedEvent=... > <BeginStoryboard Storyboard= ref >

9 vjj 10 inline <Button.Triggers> <EventTrigger RoutedEvent=... > <BeginStoryboard> <Storyboard>...Animation...

10 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

11 vjj 13 kostra <element.triggers> <EventTrigger RoutedEvent=... > <EventTrigger.Actions> <PauseStoryboard BeginStoryboardName="BSN1" /> <BeginStoryboard Name="BSN2"...

12 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 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

14 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" />

15 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

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" Duration="0:0:02" AutoReverse="True" RepeatBehavior="10x"/> </Storyboard> AnimatedRectangle.xaml vjj 18

17 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

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"

19 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

20 vjj 22 lineární animace End Value BeginTime Duration EndTime Start Value

21 vjj 23 accelerated animation AccelerationRatio="0.4" DecelerationRatio="0.4" End Value Start Value BeginTime accelerating 0.4 constant 0.6 speed decelerating EndTime

22 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.

23 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>

24 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 }

25 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

26 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í

27 <Button Width="100" <DoubleAnimation From="50" To="100" RepeatBehavior="3x" , , IsAdditive="True" AutoReverse="False" /> <DoubleAnimation From="50" To="100" RepeatBehavior="3x" IsAdditive="True" AutoReverse="True" /> , , <DoubleAnimation From="50" To="100" RepeatBehavior="3x" IsCumulative="True" AutoReverse="False" /> , , <DoubleAnimation From="50" To="100" RepeatBehavior="3x" IsCumulative="True" AutoReverse="True" /> , , vjj 29

28 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>

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" Duration="0:0:1" AutoReverse="True" RepeatBehavior="2x" /> </Storyboard> </BeginStoryboard> </EventTrigger.Actions> </EventTrigger> </Button.Triggers> </Button> vjj 31

30 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>

31 Animation Using Key Frames vjj 34

32 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

33 vjj 36 animace End Value BeginTime Duration EndTime Start Value

34 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, ,1" Value="100" /> </DoubleAnimationUsingKeyFrames>

35 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>

36 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

37 vjj 40 DoubleAnimationUsingKeyFrames LinearDoubleKeyFrame KeyTime, Value time: value: DiscreteDoubleKeyFrame KeyTime, Value time: value: SplineDoubleKeyFrame KeyTime, Value, KeySpline

38 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

39 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>

40 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 C , , " /> </PointAnimationUsingPath.PathGeometry> </PointAnimationUsingPath> </Storyboard> </BeginStoryboard> </EventTrigger> </Path.Triggers> </Path> </Canvas>

41 vjj 47 MatrixAnimationUsingPath <PathGeometry x:key="path" Figures="M C 300 0, , C 900 0, , C , , C , , " /> <MatrixAnimationUsingPath Storyboard.TargetName="xformUnicycleMan" Storyboard.TargetProperty="Matrix" Duration="0:0:12" PathGeometry="{StaticResource path}" DoesRotateWithTangent="True" RepeatBehavior="Forever" /> Petzold kapitola 30 příklad UnicycleMan

42 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.

43 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.

44 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.