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.

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.

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.

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.

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