Finally to the animation of the third plate axe, here with UIDynamic to achieve animation. UIDynamic is a new physics simulation animation library added to iOS 7 and included in the UIKit framework.
introduce
To use UIDynamic, you need to understand several concepts: 1. UIDynamicAnimator; 2. UIDynamicBehavior; 3.
UIDynamicAnimatorIt’s an animation engine. When it initializes, it needs a ReferenceView, using its coordinate system as a reference frame.UIDynamicBehaviorEquivalent to simulation animation body. When created, you need to attach the view (UIDynamicItem) that the animation will animate. You can pass an array of views.UIDynamicItemThis is the view that the emulated animation will act on.
UIDynamicBehavior
- UIGravityBehavior Gravity behavior
- UICollisionBehavior Specifies the collision behavior
- UIAttachmentBehavior Attachment behavior
- UIPushBehavior Push behavior
- UIDynamicItemBehavior Dynamic behavior
- UISnapBehavior Capture behavior
Each of these behaviors can be used individually or in combination to achieve complex animation effects.
In actual combat
Creating an animation engine
_animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];
Copy the codeAdd emulated behavior to the view
1.UIGravityBehavior
- (void)animateTest { UIGravityBehavior *gravityBehavior = [[UIGravityBehavior alloc] initWithItems:@[_someView]]; gravityBehavior.gravityDirection = CGVectorMake(0, 1); GravityBehavior. Magnitude = 2.5; [_animator addBehavior:gravityBehavior]; }Copy the codeGravityDirection is the direction of gravity. This is the direction in the 2d coordinate system. The default is (0.0,1.0), which means straight down. Values can be negative, such as (0.0, -1.0) to indicate that the gravity direction is straight up. You can also use x and y to represent any direction in a two-dimensional coordinate system. For example, (1.0,1.0) is 45 degrees along the lower right corner, and (1.0, 100000) is extremely close to the vertical downward direction.
Magnitude denotes the coefficient of force. When the value is positive, it follows the gravityDirection. The larger the value is, the greater the acceleration will be. Negative, gravityDirection opposite, the smaller the value, the greater the acceleration.
2.UICollisionBehavior
In the code above, the _someView will fall directly off the screen due to gravity. When the collision behavior is added and the collision boundary is set, _someView will bounce back at the collision boundary until it stops.
- (void)animateTest {// gravityBehavior = [[UIGravityBehavior alloc] initWithItems:@[_someView]]; gravityBehavior.gravityDirection = CGVectorMake(0, 1); GravityBehavior. Magnitude = 2.5; [_animator addBehavior:gravityBehavior]; UICollisionBehavior *collisionBehavior = [[UICollisionBehavior alloc] initWithItems:@[_someView]]; //1. Set the collision boundary as the referenceView boundary. // collisionBehavior.translatesReferenceBoundsIntoBoundary = YES; // 2. Set the collision boundary with referenceView and insets. [collisionBehaviorsetTranslatesReferenceBoundsIntoBoundaryWithInsets:UIEdgeInsetsMake(0, 0, 20, 0)]; / / 3. With the two attachment points as the collision boundary / / [collisionBehavior addBoundaryWithIdentifier: @"pointBoundary"fromPoint:CGPointMake(0, 300) toPoint:CGPointMake(320, 600)]; / / 4. With a bezier curve as the collision boundary / / [collisionBehavior addBoundaryWithIdentifier: @"pathBoundary" forPath:_bezierPath];
[_animator addBehavior:collisionBehavior];
}
Copy the code
3.UIAttachmentBehavior
The attachment behavior is usually adding gestures and having the view move with the gesture, because it’s usually used with gestures.
- (void)panAction:(UIPanGestureRecognizer *)panGesture
{
CGPoint location = [panGesture locationInView:self.view];
if (panGesture.state == UIGestureRecognizerStateBegan) {
_attachmentBehavior = [[UIAttachmentBehavior alloc] initWithItem:_someView attachedToAnchor:location];
[_animator addBehavior:_attachmentBehavior];
} else if (panGesture.state == UIGestureRecognizerStateChanged) {
_attachmentBehavior.anchorPoint = location;
} else if(panGesture.state == UIGestureRecognizerStateEnded) { [_animator removeBehavior:_attachmentBehavior]; }}Copy the code
pushDirection
magnitude
The following animation gives the view an upward push, then moves to the highest point under the action of gravity, then falls, and finally comes to a standstill at the set collision boundary.
- (void)animateTest {UIPushBehavior *pushBehavior = [[UIPushBehavior alloc] initWithItems:@[_someView] mode:UIPushBehaviorModeInstantaneous]; PushBehavior. PushDirection = CGVectorMake (0, 80.0); PushBehavior. Magnitude = 2.0; [_animator addBehavior:pushBehavior]; UIGravityBehavior *gravityBehavior = [[UIGravityBehavior alloc] initWithItems:@[_someView]]; gravityBehavior.gravityDirection = CGVectorMake(0, 1); GravityBehavior. Magnitude = 2.5; [_animator addBehavior:gravityBehavior]; UICollisionBehavior *collisionBehavior = [[UICollisionBehavior alloc] initWithItems:@[_someView]]; // Set the collision boundary to the referenceView boundary. collisionBehavior.translatesReferenceBoundsIntoBoundary = YES; [_animator addBehavior:collisionBehavior]; }Copy the code
5.UIDynamicItemBehavior
Because parameters such as friction, elasticity, density and resistance can be set, the energy loss of motion in the simulation view can be achieved.
- (void)animateTest {UIDynamicItemBehavior *itemBehavior = [[UIDynamicItemBehavior alloc] initWithItems:@[_someView]]; ItemBehavior. Elasticity = 0.6; // Elastic itembehavior. friction = 1; // Friction behavior. Density = 10; Itembehavior. resistance = 10; / / resistance itemBehavior allowsRotation = YES; // Allow rotation [_animator addBehavior:itemBehavior]; UIPushBehavior *pushBehavior = [[UIPushBehavior alloc] initWithItems:@[_someView] mode:UIPushBehaviorModeInstantaneous]; PushBehavior. PushDirection = CGVectorMake (0, 80.0); PushBehavior. Magnitude = 2.0; [_animator addBehavior:pushBehavior]; UICollisionBehavior *collisionBehavior = [[UICollisionBehavior alloc] initWithItems:@[_someView]]; // Set the collision boundary to the referenceView boundary. collisionBehavior.translatesReferenceBoundsIntoBoundary = YES; [_animator addBehavior:collisionBehavior]; }Copy the codeGive the view an initial upward push, then slowly slow down to rest under parameters such as friction and resistance. There is a loss of energy in boundary collisions. The renderings are as follows:
- (void)animateTest {// Capture behavior UISnapBehavior *snapBehavior = [[UISnapBehavior alloc] initWithItem:_someView snapToPoint:self.view.center]; SnapBehavior. Damping = 0.1; // 0.0~~1.0, damping coefficient, affect energy loss. [_animator addBehavior:snapBehavior]; }Copy the code
To trigger the animation, I’m adding a click gesture and a pan gesture to self.view.
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
UITapGestureRecognizer *gesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(animateTest)];
[self.view addGestureRecognizer:gesture];
UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panAction:)];
[self.view addGestureRecognizer:panGesture];
_someView = [[UIView alloc] initWithFrame:CGRectMake(100, 200, 50, 50)];
_someView.backgroundColor = [UIColor redColor];
[self.view addSubview:_someView];
_animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];
}
Copy the codeIf you look at one of the animations that were shown in the Stanford open class, it was also animated.
A variety of simulation effect combination, you can combine a cool animation effect. You can try more combinations and parameter changes to make cool animation, Have fun!