Skip to content

ekaterinadvolkova/Animation-Creation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 

Repository files navigation

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

About

Practicing creation different kids of animation

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages