Practicing Animation Creation

This repository is created for practicing making different kinds of animations.

CABasicAnimation

Description Result Screen

1.CABasicAnimationController corresponds to the CABasicAnimation.

2. Outlets: orange, cyan, blue, green.

3. A tap on each of these views triggers a different animation:

OrangeView:
1. Turns into a circle in an animated way.
2. Duration is 1 sec.
3. The timing functinon is kCAMediaTimingFunctionEaseOut.

CyanView:
1. Must become invisible.
2. Duration is 1 sec.
3. The timing functinon is kCAMediaTimingFunctionEaseIn.

BlueView:
1. Must move along the x-axis.
2. The final value of x is the coordinate of its center is the same
coordinate of the center of cyanView.
3. At the same time blueView should rotate 315° clockwise around the Z axis.
4. At the end of the animation, blueView must save this state.
5. Duration is 2 secs.
6. The timing functinon is kCAMediaTimingFunctionEaseInEaseOut.

GreenView:
1. Should move from its initial position to the center of the parent view.
2. At the same time its scale should increase by 1.5 times in both axes
(X and Y) and the background color should become magenta.
3. When these animations are completed, greenView should animatedly return to its
original state.
4. The cycle should be repeated twice.
5. Duration is 1 sec.
6. The timing functinon is kCAMediaTimingFunctionEaseInEaseOut.

Description	Result Screen
1.`CABasicAnimationController` corresponds to the `CABasicAnimation`. 2. Outlets: `orange`, `cyan`, `blue`, `green`. 3. A tap on each of these views triggers a different animation: OrangeView: 1. Turns into a circle in an animated way. 2. Duration is 1 sec. 3. The timing functinon is `kCAMediaTimingFunctionEaseOut`. CyanView: 1. Must become invisible. 2. Duration is 1 sec. 3. The timing functinon is `kCAMediaTimingFunctionEaseIn`. BlueView: 1. Must move along the x-axis. 2. The final value of x is the coordinate of its center is the same coordinate of the center of `cyanView`. 3. At the same time `blueView` should rotate 315° clockwise around the Z axis. 4. At the end of the animation, `blueView` must save this state. 5. Duration is 2 secs. 6. The timing functinon is `kCAMediaTimingFunctionEaseInEaseOut`. GreenView: 1. Should move from its initial position to the center of the parent view. 2. At the same time its scale should increase by 1.5 times in both axes (X and Y) and the background color should become magenta. 3. When these animations are completed, `greenView` should animatedly return to its original state. 4. The cycle should be repeated twice. 5. Duration is 1 sec. 6. The timing functinon is `kCAMediaTimingFunctionEaseInEaseOut`.

CAKeyFrameAnimation

Description Result Screen

1. Controller CAKeyframeAnimationController has two outlets: passcodeTextField
and orangeView.

2. When you click the Start shake animation button, the passcodeTextField
should play a shake animation that imitates an incorrect password entry.

3. The passcodeTextField should be offset along the x-axis with the following
values: 0, 10, -10, 10, -5, 5, -5, 0.

4. Time intervals for this animation: 0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.8, 1.

5. The total duration of the animation is 0.4 seconds.

6. When you click the Start sin animation button, the orangeView center should
start moving along the sine wave that was previously drawn using the showSinPath()
method.

7. The animation must be infinite.

8. The duration of one animation cycle is 6 seconds.

9. When moving along the sine wave, orangeView must rotate so that the
x-axis of orangeView is always parallel to the tangent at any point of the sine wave.

Description	Result Screen
1. Controller `CAKeyframeAnimationController` has two outlets: `passcodeTextField` and `orangeView`. 2. When you click the `Start shake animation` button, the `passcodeTextField` should play a shake animation that imitates an incorrect password entry. 3. The `passcodeTextField` should be offset along the `x`-axis with the following values: 0, 10, -10, 10, -5, 5, -5, 0. 4. Time intervals for this animation: 0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.8, 1. 5. The total duration of the animation is 0.4 seconds. 6. When you click the `Start` sin animation button, the `orangeView` center should start moving along the sine wave that was previously drawn using the `showSinPath()` method. 7. The animation must be infinite. 8. The duration of one animation cycle is 6 seconds. 9. When moving along the sine wave, orangeView must rotate so that the `x`-axis of `orangeView` is always parallel to the tangent at any point of the sine wave.

UIKitDynamic Animation

Description	Result Screen
1. The controller is `UIKitDynamicController`. 2. The controller has two outlets: `anchorView` and `animationView`. 3. `UIPanGestureRecognizer` is added to the `anchorView`. 4. The `animationView` should move with free oscillation around the `anchorView`. 5. It should be possible to move the `anchorView` with your finger across the screen while maintaining a free swing.

CATransition

Description Result Screen

1. Controller CATransitionController has one textLabel outlet with the text "Initial text"
in orange.

2. The text "Initial Text" should be changed to "Sliding".

3. Transition type is kCATransitionMoveIn.

4. The colour is green.

5. The duration is 1 sec

6. The timingFunction is kCAMediaTimingFunctionEaseOut.

7. At the end of this animation, the text should change animatedly to the original text.

8. The transition type - kCATransitionFade.

9. The text color is orange.

10. The animation duration is 1 sec.

11. The timingFunction is kCAMediaTimingFunctionEaseOut.

Description	Result Screen
1. Controller `CATransitionController` has one textLabel outlet with the text "Initial text" in orange. 2. The text "Initial Text" should be changed to "Sliding". 3. Transition type is `kCATransitionMoveIn`. 4. The colour is green. 5. The duration is 1 sec 6. The timingFunction is `kCAMediaTimingFunctionEaseOut`. 7. At the end of this animation, the text should change animatedly to the original text. 8. The transition type - `kCATransitionFade`. 9. The text color is orange. 10. The animation duration is 1 sec. 11. The timingFunction is `kCAMediaTimingFunctionEaseOut`.

UIView Animation

Description Result Screen

1. The controller is UIViewAnimationController.

2. The controller has two outlets: animationView and flipButton.

3. The UITapGestureRecognizer is added to the animationView in the storyboard.

Tapping animationView:

1. The animationView moves animatedly along the X-axis with a simultaneous
180° clockwise rotation around the Z-axis.

2. At the end of the animation, the right
edge of the animationView and the right edge of the root view must coincide.

3. The animation duration is 1 sec.

4. The delay before start is 0.5 sec.

5. The UIViewAnimationOptions is curveEaseInOut.

Tapping flipButton:
1. Pressing the flip button each time should animate the root view and the button itself
180° around the Z axis in a clockwise direction.

2. The animation duration is 1 sec.

3. The UIViewAnimationOptions is curveEaseInOut.

Description	Result Screen
1. The controller is `UIViewAnimationController`. 2. The controller has two outlets: `animationView` and `flipButton`. 3. The `UITapGestureRecognizer` is added to the `animationView` in the storyboard. Tapping `animationView`: 1. The `animationView` moves animatedly along the `X`-axis with a simultaneous 180° clockwise rotation around the `Z`-axis. 2. At the end of the animation, the right edge of the `animationView` and the right edge of the root view must coincide. 3. The animation duration is 1 sec. 4. The delay before start is 0.5 sec. 5. The `UIViewAnimationOptions` is `curveEaseInOut`. Tapping `flipButton`: 1. Pressing the flip button each time should animate the root view and the button itself 180° around the `Z` axis in a clockwise direction. 2. The animation duration is 1 sec. 3. The `UIViewAnimationOptions` is `curveEaseInOut`.

UIViewProperty Animation

Description Result Screen

1. The controller is UIViewPropertyAnimatorController.

2. The controller has one outlet animationView.

3. UIPanGestureRecognizer is added to the root view.

4. Moving the finger horizontally on the root view should cause
the animationView follow the finger.

5. The movement should be along the X-axis with simultaneous rotation
around the Z-axis and zooming of the animationView.

After removing the finger from the screen:

1. If the x-coordinate of the center of the animationView is smaller than
the x-coordinate of the center of the root view, then the animationView
should animatedly return to its original position.

2. The animationView animatedly moves to the end point of the animation.

6. Use the position property of the presentation layer to determine the center of the
animationView.

7. Use the position property of the presentation layer to determine the center of the
animationView.

8. The animationView itself should rotate 180° around the Z-axis clockwise.

9. The scale of the animationView should increase by 1.5 times.

10. The timingParameters should be UISpringTimingParameters with the following
values: mass: 2.0, stiffness: 30.0, damping: 7.0, initialVelocity: .zero..

Description	Result Screen
1. The controller is `UIViewPropertyAnimatorController`. 2. The controller has one outlet `animationView`. 3. `UIPanGestureRecognizer` is added to the root view. 4. Moving the finger horizontally on the root view should cause the `animationView` follow the finger. 5. The movement should be along the `X`-axis with simultaneous rotation around the `Z`-axis and zooming of the `animationView`. After removing the finger from the screen: 1. If the `x`-coordinate of the center of the `animationView` is smaller than the `x`-coordinate of the center of the root view, then the `animationView` should animatedly return to its original position. 2. The `animationView` animatedly moves to the end point of the animation. 6. Use the position property of the presentation layer to determine the center of the `animationView`. 7. Use the position property of the presentation layer to determine the center of the `animationView`. 8. The `animationView` itself should rotate 180° around the `Z`-axis clockwise. 9. The scale of the `animationView` should increase by 1.5 times. 10. The `timingParameters` should be `UISpringTimingParameters` with the following values: `mass: 2.0, stiffness: 30.0, damping: 7.0, initialVelocity: .zero.`.

ekaterinadvolkova / Animation-Creation

Practicing Animation Creation

CABasicAnimation

CAKeyFrameAnimation

UIKitDynamic Animation

CATransition

UIView Animation

UIViewProperty Animation

About

Languages