Core Animation2-CABasicAnimation

Cabasicanimation is a subclass of capropertyanimation. It can be used to achieve some basic animation effects. It can make a calayer attribute gradient from one value to another. The following describes how to use cabasicanimation to implement several simple animations.

* Initialize a uiview and add it to the Controller's view. Then, execute an animation on the uiview layer. The following self refers to the Controller.

1 _myView = [[UIView alloc] init];2 _myView.layer.position = CGPointMake(100, 100);3 _myView.layer.bounds = CGRectMake(0, 0, 100, 100);4 _myView.backgroundColor = [UIColor blueColor];5 [self.view addSubview:_myView];6 [_myView release];

Back to Top 1. Pan Animation

There are several ways to implement Pan animation. Here are two examples.

1. method 1

1 // This animation object needs to be animated on the position attribute of calayer 2 cabasicanimation * anim = [cabasicanimation animationwithkeypath: @ "position"]; 3 // The animation lasts for 1.5 s and 4 anim. duration = 1.5; 5 6 // position value gradient from (50, 80) to (300,350) 7 anim. fromvalue = [nsvalue valuewithcgpoint: cgpointmake (50, 80)]; 8 anim. tovalue = [nsvalue valuewithcgpoint: cgpointmake (300,350)]; 9 10 // sets the animation proxy 11 anim. delegate = self; 12 13 // keep the animation status after execution 14 anim. removedoncompletion = no; 15 anim. fillmode = kcafillmodeforwards; 16 17 // Add the animation object to layer 18 [_ myview. layer addanimation: anim forkey: @ "translate"];

* The keypath set in row 2nd is @ "position", indicating that the position attribute of calayer is to be modified, that is, the translation animation is executed.

* Note that rows 7th and 8 do not directly use the cgpoint struct type. Instead, they must be packaged into nsvalue objects before being used. The two lines of code indicate that calayer moves from location (50, 80) to location (300,350)

* If you change the tovalue of the first row to byvalue, it means that calayer moves 8th to the right from the position (50, 80) and 300 down, that is, to the position (350)

* By default, after an animation is executed, it is automatically removed from calayer and calayer returns to its original state. To maintain the animation execution status, you can add 14th or 15 lines of code.

* @ "Translate" behind the row 18th is a name for the animation object. You can call the removeanimationforkey of calayer to stop the animation based on the animation name.

* Row 3 is the animation proxy. You can monitor the animation execution process. Here, set the Controller as the proxy. The proxy must implement the following methods:

1 # pragma mark animation start 2-(void) animationdidstart :( caanimation *) anim {3 nslog (@ "animation started "); 4} 5 6 # pragma mark animation end 7-(void) animationdidstop :( caanimation *) anim finished :( bool) flag {8 // view the position value after the animation is executed 9 nsstring * string = nsstringfromcgpoint (_ myview. layer. position); 10 nslog (@ "the animation is finished, position: % @", string); 11}

The output is as follows:

1 2013-04-14 23:44:26. 197 caanimation [5995: c07] animation started 2 2013-04-14 23:44:27. 697 caanimation [5995: c07] animation ended, position: {100,100}

We can see from the print information of Row 3 that after the animation is executed, the position attribute value of calayer is not actually changed!

 

2. method 2

1 CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];2 anim.duration = 1;3 4 CATransform3D form = CATransform3DMakeTranslation(350, 350, 0);5 anim.toValue = [NSValue valueWithCATransform3D:form];6 7 [_myView.layer addAnimation:anim forKey:nil];

The calayer transform attribute is used to implement the translation animation. The layer translates the animation from its initial position to the (350,350) position.

 

Back to Top 2. Zoom Animation

There are several ways to implement a zoom animation. Two methods are listed here.

1. method 1

1 CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"bounds"];2 anim.duration = 2;3 4 anim.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 30, 30)];5 6 [_myView.layer addAnimation:anim forKey:nil];

The layer will change from the original size (100x100) to 30x30

 

2. method 2

1 cabasicanimation * anim = [cabasicanimation animationwithkeypath: @ "transform"]; 2 anim. duration = 1.5; // animation duration 1.5s3 4 // calayer width changed from 0.5 times to 2 times 5 // calayer height changed from 0.5 times to 1.5 times 6 anim. fromvalue = [nsvalue valuewithcatransform3d: catransform3dmakescale (0.5, 0.5, 1)]; 7 anim. tovalue = [nsvalue valuewithcatransform3d: catransform3dmakescale (2, 1.5, 1)]; 8 9 [_ myview. layer addanimation: anim forkey: Nil];

 

Back to Top 3. Rotate the animation

1 cabasicanimation * anim = [cabasicanimation animationwithkeypath: @ "transform"]; 2 anim. duration = 1.5; 3 4 // rotate around (0, 0, 1) the vector axis 45 ° 5 anim clockwise. tovalue = [nsvalue valuewithcatransform3d: catransform3dmakerotation (m_pi_4, 0, 0, 1)]; 6 7 [_ myview. layer addanimation: anim forkey: Nil];

You do not need to set fromvalue. Here only tovalue is set.

 

Back to Top 4. Others

* Apart from the position and transform attributes used previously, calayer has many attributes that can be animated. These attributes are collectively referred to as "animatable properties ". This section describes how to search for these attributes at the beginning of calayer3-layer attributes.

* Although cabasicanimation can do a lot of basic animation effects, it has a limitation that it can only make calayer attributes gradient from a value to another value, just gradient between two values.

Core Animation2-CABasicAnimation