Core animation taobao

Core Animation for iOS
孔祥波 @yarshure

11年7月12日星期二

自我介绍

FreeBSD 用户

摄影爱护者

就职盛大创新院


Mee Code


WWDC08 Session 711 演示


CoverFlow特效


什么是Core Animation？

• Objc Class: graphics rendering, projection,
and animation

• provides ﬂuid animations

• provide with Leopard


Why use Core Animation?
• High performance compositing with a
simple approachable programming model

• create complex user interfaces using a
hierarchy of layer objects

• A lightweight data structure

• allows animations to run on a separate
thread

• Improved application performance

• A ﬂexible layout manager model


Basic Animation

• UIView Animation
• UIImageView Animation


UIView Animation
-(void)beginAnimation{
[UIView beginAnimations:@”uiviewanimiton” context:nil];
[UIView setAnimationDuration:0.125];
[UIView setAnimationDelegate:self];
[UIView
setAnimationWillStartSelector:@selector(beginAnimations:context:)];
[UIView
setAnimationDidStopSelector:@selector(animationDidStop:finished:con
text:)];
CGPoint center=CGPointMake(header.center.x,header.center.y+75);
header.center=center;
[UIView commitAnimations];
}


Delegate

• -animationWillStart:(NSString *)animationID context:(void
*)context

• -animationDidStop:(NSString *)animationID finished:
(NSNumber *)finished context:(void *)context


使用Block

- (void)setSelectedVeg:(id)sender
{
[selectedVegetableIcon setAlpha:0.0];

[UIView animateWithDuration:0.4
animations: ^{
float angle = [self
spinnerAngleForVegetable:sender];
[vegetableSpinner
setTransform:CGAffineTransformMakeRotation(angle)];
}
completion:^(BOOL finished) {
[selectedVegetableIcon setAlpha:1.0];
}];

}
以上代码来自WWDC2010 iPlant PlantCareViem.m


UIImageView Animation
imageArray = [[NSMutableArray alloc] initWithCapacity:IMAGE_COUNT];
for (int i = 0; i < IMAGE_COUNT; i++)
[imageArray addObject:[UIImage imageNamed:[NSString stringWithFormat:@"Frame_
%d.jpg", i]]];
animatedImages = [[UIImageView alloc]
initWithFrame:CGRectMake(
(SCREEN_WIDTH / 2) - (IMAGE_WIDTH / 2),
(SCREEN_HEIGHT / 2) - (IMAGE_HEIGHT / 2) + STATUS_BAR_HEIGHT,
IMAGE_WIDTH, IMAGE_HEIGHT)];
animatedImages.animationImages = [NSArray arrayWithArray:imageArray];
animatedImages.animationDuration = 1.0;
animatedImages.animationRepeatCount = -1;
// Start it up
[animatedImages startAnimating];
// Wait 5 seconds, then stop animation
[self performSelector:@selector(stopAnimation) withObject:nil afterDelay:5.0];
停止方法：
-(void)stopAnimation
{
[animatedImages stopAnimating];
}


Core Animation
CATransition
CaAnimation CaAnimationGroup
NSObject <CAAction,CAMediaTiming>
CABasicAnimationn
CAPropertyAnimationn
CAKeyframeAnimationn

CATransaction

CAMediaTimingFuncation

CAScrollLayer
CALayer CAEmitterLayer(iOS5)
<CAMediaTiming> CATiledLayer

CATextLayer

CAEAGLLayer


CATransaction

• CATransaction is the Core Animation
mechanism for batching multiple layer-
tree operations into atomic updates to the
render tree.

• Every modiﬁcation to a layer tree must be
part of a transaction. Nested transactions
are supported.

• customize duration, timing function


CATransaction
Implicit transactions
theLayer.opacity=0.0;

theLayer.zPosition=-200;

thelayer.position=CGPointMake(0.0,0.0);

Explicit Transactions
[CATransaction begin];

[CATransaction setValue:(id)kCFBooleanTrue

forKey:kCATransactionDisableActions];

[aLayer removeFromSuperlayer];

[CATransaction commit];


CATransaction(Nested)
[CATransaction begin]; // outer transaction
// change the animation duration to 2 seconds
[CATransaction setValue:[NSNumber numberWithFloat:2.0f]
forKey:kCATransactionAnimationDuration];
// move the layer to a new position
theLayer.position = CGPointMake(0.0,0.0);
[CATransaction begin]; // inner transaction

// change the animation duration to 5 seconds

[CATransaction setValue:[NSNumber numberWithFloat:5.0f]

forKey:kCATransactionAnimationDuration];

// change the zPosition and opacity

theLayer.zPosition=200.0;
[CATransaction commit]; // inner transaction
[CATransaction commit]; // outer transaction


- (void)layoutContents
{
// layoutContents gets called via KVO whenever properties within our oalPlayback object change

// Wrap these layer changes in a transaction and set the animation duration to 0 so we don't get implicit animation
[CATransaction begin];
[CATransaction setValue:[NSNumber numberWithDouble:0.]

forKey: kCATransactionAnimationDuration] ;

// Position and rotate the listener
_listenerLayer.position = playback.listenerPos;
_listenerLayer.transform = CATransform3DMakeRotation(playback.listenerRotation, 0., 0., 1.);

// The speaker gets rotated so that it's always facing the listener
CGFloat rot = atan2(-(playback.sourcePos.x - playback.listenerPos.x), playback.sourcePos.y - playback.listenerPos.y);

// Rotate and position the speaker
_speakerLayer.position = playback.sourcePos;
_speakerLayer.transform = CATransform3DMakeRotation(rot, 0., 0., 1.);
void (^transactionEnd)(void);

transactionEnd = ^(void) {
NSLog(@"from opt");
};

[CATransaction setValue:oneFrom forKey: kCATransactionCompletionBlock ];
[CATransaction commit];
}


CAMediaTimingFuncation
• timing curve

• + functionWithName:

• + functionWithControlPoints::::
x(t)

1.0

t
1.0

CAMediaTiming Protocol


CATransition

• The CATransition class implements
transition animations for a layer. You can
specify the transition effect from a set of
predeﬁned transitions or (on Mac OS X) by
providing a custom CIFilter(optional
Core Image ﬁlter object) instance.


// First create a CATransition object to describe the transition

CATransition
CATransition *transition = [CATransition animation];
// Animate over 3/4 of a second
transition.duration = 0.75;
// using the ease in/out timing function

transition.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

// Now to set the type of transition. Since we need to choose at random, we'll setup a couple of arrays to help
us.

NSString *types[4] = {kCATransitionMoveIn, kCATransitionPush,
kCATransitionReveal, kCATransitionFade};
NSString *subtypes[4] = {kCATransitionFromLeft,
kCATransitionFromRight, kCATransitionFromTop,
kCATransitionFromBottom};
int rnd = random() % 4;
transition.type = types[rnd];
if(rnd < 3) // if we didn't pick the fade transition, then we need to set a subtype too
{
transition.subtype = subtypes[random() % 4];
}
// Finally, to avoid overlapping transitions we assign ourselves as the delegate for the animation and wait for
the
// -animationDidStop:finished: message. When it comes in, we will flag that we are no longer transitioning.
transitioning = YES;
transition.delegate = self;
// Next add it to the containerView's layer. This will perform the transition based on how we change its
contents.

[containerView.layer addAnimation:transition forKey:nil];

// Here we hide view1, and show view2, which will cause Core Animation to animate view1 away and view2 in.
view1.hidden = YES;
view2.hidden = NO;

// And so that we will continue to swap between our two images, we swap the instance variables referencing them.
UIImageView *tmp = view2;

UIResponder UIEvent

帧动画
UIViewController
UIView UIImageView

CALayer
UIScreen UIWindow UIImage(Draw

contents
CGImageRef(D
UI

Draw
CGContext
UIImage,NSString


UIResponder UIEvent

帧动画
UIViewController
UIImageView
UIView 缩放/倒影
UIGraphicsBeginImageConte
CALayer UIImage(Draw)
指定位置拉伸
stretchableImageWithLeftCapWidth

contents CGImageRef(Draw) 分割
CGImageCreateWithImageInRect
UI

Draw
CGContext
UIImage,NSString


CALayer

• 层像是铺在⼀一个内容固定对象上的⼀一个片
• Layer Properties （ Animatable 26个）


大小和位置
CGRect teamLogoFrame = CGRectMake(150.0, 100.0, 50.0, 75.0);
teamLogoView.layer.frame = teamLogoFrame;
管理和显示
要在⼀一个特殊的索引里面插入层，可以使用atIndex 参数。

[ gameLayer insertSublayer: HUDView.layer atIndex: 1 ];

要在另⼀一个层的上面或者下面插入层，可以使用above 或者 below 参数

[ gameLayer insertSublayer: HUDView.layer below: backgroundView.layer ];
[ gameLayer insertSublayer: HUDView.layer above: characterView.layer ];

渲染
[ gameLayer setNeedsDisplay ];

圆角
layer.cornerRadius = 3;
layer.masksToBounds = YES;


3D或仿射变换

characterView.layer.transform = CATransform3DMakeScale(-1.0, -1.0, 1.0);

CGAffineTransform transform = CGAffineTransformMakeRotation(45.0);
backgroundView.layer.affineTransform = transform;

CGAffineTransform 不是Layer属性，但是可以和CATransform3D转换
变形
iPhone的支持缩放，旋转，仿射，翻转（translation）的转变
CATransform3D myTransform;
myTransform = CATransform3DMakeRotation(angle, x, y, z);
double radians(float degrees) {
return ( degrees * 3.14159265 ) / 180.0;
}
当你创建⼀一个转换的时候，你将要调用这个方法：
myTransform = CATransform3DMakeRotation(radians(45.0), 0.0, 1.0, 0.0);
层将执行分配给transform属性的转换：
imageView.layer.transform = myTransform;


Implicit Animation
// assume that the layer is current positioned at
(100.0,100.0)

theLayer.position=CGPointMake(500.0,500.0);

Implicitly animating multiple properties of multiple
layers
// animate theLayer's opacity to 0 while moving it
// further away in the layer
theLayer.zPosition=-100;
// animate anotherLayer's opacity to 1
// while moving it closer in the layer
anotherLayer.opacity=1.0;
anotherLayer.zPosition=100.0;


Explicit Animation
CABasicAnimation *theAnimation;

theAnimation=[CABasicAnimation animationWithKeyPath:@"opacity"];
theAnimation.duration=3.0;
theAnimation.repeatCount=2;
theAnimation.autoreverses=YES;
theAnimation.fromValue=[NSNumber numberWithFloat:1.0];
theAnimation.toValue=[NSNumber numberWithFloat:0.0];
[theLayer addAnimation:theAnimation forKey:@"animateOpacity"];

Starting and Stopping Explicit Animations

addAnimation:forKey:
removeAnimationForKey:
removeAllAnimations


CGMutablePathRef thePath = CGPathCreateMutable();
CGPathMoveToPoint(thePath,NULL,74.0,74.0);
CGPathAddCurveToPoint(thePath,NULL,74.0,500.0,
320.0,500.0,
320.0,74.0);
CGPathAddCurveToPoint(thePath,NULL,320.0,500.0,
566.0,500.0,
566.0,74.0);

CAKeyframeAnimation * theAnimation;
// create the animation object, specifying the position property as the
key path
// the key path is relative to the target animation object (in this case
a CALayer)
theAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
theAnimation.path=thePath;

// set the duration to 5.0 seconds
theAnimation.duration=5.0;
// release the path
CGPathRelease(thePath);


CALayer *welcomeLayer = placardView.layer;
// Create a keyframe animation to follow a path back to the center
CAKeyframeAnimation *bounceAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
bounceAnimation.removedOnCompletion = NO;
CGFloat animationDuration = 1.5;
// Create the path for the bounces
CGMutablePathRef thePath = CGPathCreateMutable();
CGFloat midX = self.center.x;
CGFloat midY = self.center.y;
CGFloat originalOffsetX = placardView.center.x - midX;
CGFloat originalOffsetY = placardView.center.y - midY;
CGFloat offsetDivider = 4.0;
BOOL stopBouncing = NO;
// Start the path at the placard's current location
CGPathMoveToPoint(thePath, NULL, placardView.center.x, placardView.center.y);
CGPathAddLineToPoint(thePath, NULL, midX, midY);
// Add to the bounce path in decreasing excursions from the center
while (stopBouncing != YES) {
CGPathAddLineToPoint(thePath, NULL, midX + originalOffsetX/offsetDivider, midY + originalOffsetY/offsetDivider);
CGPathAddLineToPoint(thePath, NULL, midX, midY);
...............
}
bounceAnimation.path = thePath;
bounceAnimation.duration = animationDuration;
// Create a basic animation to restore the size of the placard
CABasicAnimation *transformAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
transformAnimation.removedOnCompletion = YES;
transformAnimation.duration = animationDuration;
transformAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
// Create an animation group to combine the keyframe and basic animations
CAAnimationGroup *theGroup = [CAAnimationGroup animation];
// Set self as the delegate to allow for a callback to reenable user interaction
theGroup.delegate = self;
theGroup.duration = animationDuration;
theGroup.timingFunction = [[CAMediaTimingFunction alloc] initWithControlPoints:0.5 :1.0 :0.5 :0];
theGroup.animations = [NSArray arrayWithObjects:bounceAnimation, transformAnimation, nil];
// Add the animation group to the layer
[welcomeLayer addAnimation:theGroup forKey:@"animatePlacardViewToCenter"];

// Set the placard view's center and transformation to the original values in preparation for the end of the animation
placardView.center = self.center;
placardView.transform = CGAffineTransformIdentity;
}


Demo


设置回调方法

[theGroup setValue:name forKey:@"name"];

- (void)animationDidStop:(CAAnimation *)theAnimation finished:
(BOOL)flag {
NSLog(@"[MainView]%@",[theAnimation valueForKey:@"name"]);

if(flag && [[theAnimation valueForKey:@"name"]
isEqual:@"animation"]){
[self test];
}else{
//[[NSNotificationCenter defaultCenter]
postNotificationName:@"TailAnimationDidStop" object:self];
return;
}
}

{
letters = [[NSMutableArray alloc] initWithCapacity:1];
}

CALayer* letter;
for(letter in letters)

CATextLayer Create
{
[letter removeFromSuperlayer];
}
[letters removeAllObjects];

CGFontRef font = CGFontCreateWithFontName(CFSTR("Courier"));
NSString* text = @"The quick brown fox";
CGFloat fontSize = 28;
// We are using a mono-spaced font, so
CGFloat textWidth = [text length]*fontSize;
// We want to center the text
CGFloat xStart= CGRectGetMidX(layer.bounds)-textWidth/2.0;
NSUInteger i;
for(i=0;i<1;++i)
{
CGPoint pos = CGPointMake(xStart,CGRectGetMaxY(layer.bounds)-50);
NSUInteger k;
for(k=0;k<text.length;++k)
{
CATextLayer* letter = [[CATextLayer alloc] init];
[letters addObject:letter];

letter.foregroundColor = [UIColor blueColor].CGColor;
letter.bounds = CGRectMake(0, 0, fontSize, fontSize);
letter.position = pos;
letter.font = font;
letter.fontSize = fontSize;
letter.string = [text substringWithRange:NSMakeRange(k,
1)];
[layer addSublayer:letter];
[letter release];
pos.x+=fontSize;
}
}
CGFontRelease(font);
topOfString = CGRectGetMaxY(layer.bounds)-50;
}


参考资源
Core Animation Cookbook

Core Animation Programming Guide

Core Animation

Programming With Quartz 2D


WWDC11 Session 421
WWDC10 Session 123 ，Session 424, Session 425
WWDC09 Session 132, Session 303
WWDC08 Session 711, Session 716


谢谢！


Core animation taobao

More Related Content

What's hot (10)

Similar to Core animation taobao (20)

Core animation taobao