Using the step
1. Instantiate CABaseAnimation and register the critical path
Instantiate the CABasicAnimation using the “animationWithKeyPath:” method and specify the Layer properties as critical path registrations. Here keypath value using the Layer properties, such as the opacity, the position, the transform and so on, of course you can also use attribute assignment Layer properties, such as the transform, rotation, z, transform. Scale. X, pos Ition. X, etc
// Specify the position property CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
Copy the code
2. Set the properties of the animation
attribute | instructions |
---|---|
duration | Animation Duration (in seconds) |
repeatCount | Number of repetitions. Set to HUGE_VALF for permanent repetition |
beginTime | Specify animation start time,CACurrentMediaTime() + seconds, delay operation |
timingFunction | Set the speed of the animation |
autoreverses | Whether to perform a reverse animation at the end of the animation |
removedOnCompletion | Return to the initial state at the end of the animation |
Animation. Duration = 2.5; RepeatCount = 1; BeginTime = CACurrentMediaTime() + 2; animation.autoreverses = YES; // animation. TimingFunction = [CAMediaTimingFunctionfunctionWithName: kCAMediaTimingFunctionEaseInEaseOut];
Copy the code
3. Set the start and end values of the animation
attribute | instructions |
---|---|
fromValue | Begin to value |
toValue | Terminal value (absolute value) |
byValue | Final value (relative value) |
Set animation start frame and end frame / / / / starting point for animation, fromValue = [NSValue valueWithCGPoint: CGPointMake (0, 0)]; / / end point animation. ToValue = [NSValue valueWithCGPoint: CGPointMake (320, 480)].Copy the code
4. Add animations
Add a set animation to the Layer and give the Key any name you want
[myView.layer addAnimation:animation forKey:@"move-layer"];
Copy the code
Combination of animation
Use the CAAnimationGroup class to combine complex animations
/* CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"]; Animation1. toValue = [NSNumber numberWithFloat:80]; CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; Animation2. fromValue = [NSNumber numberWithFloat:0.0]; // Start Angle animation2.toValue = [NSNumber numberWithFloat:4 * M_PI]; CAAnimationGroup * CAAnimationGroup = [CAAnimationGroup animation]; Group. duration = 3.0; group.repeatCount = 1; Group. animations = @[animation1, animation2];Copy the code
Animation starts and ends events
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"]; animation.delegate = self; Animation. duration = 2.5; RepeatCount = 1; Animation. ToValue = [NSNumber numberWithFloat:100]; // endpoint // addAnimation [myview. layer addAnimation:animationforKey:@"move-layer"]; · · · /** * - (void)animationDidStart:(CAAnimation *)theAnimation {NSLog(@)"begin"); } /** * when theAnimation ends */ - (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {NSLog(@"end");
}
Copy the code
Pay attention to the point
While CABasicAnimation is animating, clicking the Home button and then returning to the app clears the animation.
CAKeyframeAnimation. You can set multiple keyframes to animation.values