今天主要寫的是動畫類的操作赁遗,CAAnimation的兩個子類的運用氢伟,一些動畫的產(chǎn)生高职。
1.CABasicAnimation的屬性疼约,方法的使用
2.CAKeyframeAnimation的屬性,方法的使用
3.CAAnimationGroup組的使用
代碼部分:
屬性
@property (weak, nonatomic) IBOutlet UIImageView *myImageView;
1.翻轉(zhuǎn)屬性
- (void)overturn{
//創(chuàng)建動畫對象,并且設(shè)置動畫的類型 --這里是rotation翻轉(zhuǎn).z是通過Z軸進(jìn)行翻轉(zhuǎn)逃贝。
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
//持續(xù)時間
animation.duration = 3;
//這里從開始位置進(jìn)行動畫谣辞,在結(jié)束時回到開始位置。
//開始位置
animation.fromValue = @0;
//結(jié)束位置:轉(zhuǎn)換成對象
animation.toValue = @(M_PI*2/3);
//重復(fù)次數(shù) 最大數(shù):(MAXFLOAT)一直旋轉(zhuǎn)
animation.repeatCount = MAXFLOAT;
//重復(fù)時間(優(yōu)先級高于重復(fù)次數(shù))(單位:s)
animation.repeatDuration = 3;
//是否移除結(jié)果(不復(fù)原)
animation.removedOnCompletion = NO;
/*
kCAFillModeRemoved 這個是默認(rèn)值沐扳,動畫結(jié)束后泥从,會恢復(fù)到之前的狀態(tài)
kCAFillModeForwards 當(dāng)動畫結(jié)束后,會一直保持著動畫最后的狀態(tài)
kCAFillModeBackwards 在動畫開始前沪摄,便立即進(jìn)入動畫的初始狀態(tài)并等待動畫開始躯嫉。
kCAFillModeBoth 這個其實就是上面兩個的合成.保持動畫最后的狀態(tài)
*/
animation.fillMode = kCAFillModeForwards;
//給imageView添加動畫,forkey是一個標(biāo)識
[self.myImageView.layer addAnimation:animation forKey:@"rotationAnimation"];
}
2.縮放屬性
- (void)scaleAnimation{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation.duration = 3;
//縮放倍數(shù)
animation.fromValue = @1;
animation.toValue = @0.5;
animation.repeatDuration = 3;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
//forkey是一個標(biāo)識
[self.myImageView.layer addAnimation:animation forKey:@"scaleAnimation"];
}
3.路徑繪制
拿貝塞爾曲線舉例:
//繪制一個貝塞爾曲線的路徑
-(void)bezierCurve{
//通過關(guān)鍵幀的動畫來創(chuàng)建
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//設(shè)置時間
animation.duration = 3;
//創(chuàng)建一個路徑
CGMutablePathRef path = CGPathCreateMutable();
//1.創(chuàng)建起點
CGPoint startPoint = self.view.center;
CGPathMoveToPoint(path, nil, startPoint.x,startPoint.y);
//2.創(chuàng)建各個切線
CGPoint point1 = CGPointMake(20,300);
CGPoint point2 = CGPointMake(50, 400);
CGPoint point3 = CGPointMake(100, 600);
CGPathAddCurveToPoint(path, nil, point1.x, point1.y, point2.x, point2.y, point3.x, point3.y);
//3.將路徑添加進(jìn)去
animation.path = path;
//不還原
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
//
[self.myImageView.layer addAnimation:animation forKey:@"bezierCurve"];
//手動釋放路徑
CGPathRelease(path);
}
2.gif
]
//使勁的晃(其實就是翻轉(zhuǎn)--)
-(void)ratationWaggle{
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
//持續(xù)時間
animation.duration = 0.1;
//無限晃動
animation.repeatCount = MAXFLOAT;
//設(shè)置一個數(shù)組杨拐,元素:旋轉(zhuǎn)的角度
CGFloat angle = M_PI/20;
//0 - 左搖-0-右搖-0
animation.values = @[@0,@(-angle),@0,@(angle),@0];
[self.myImageView.layer addAnimation:animation forKey:@"waggle"];
}
1.gif
5.組的運用---合成版
//在點擊事件中進(jìn)行操作
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
//1.翻轉(zhuǎn)動畫
// [self overturn];
//2.縮放動畫
// [self scaleAnimation];
//3.貝塞爾曲線路徑動畫
// [self bezierCurve];
//4.左右晃動
// [self ratationWaggle];
CAAnimationGroup *group = [CAAnimationGroup animation];
CAAnimation *animation1 = [self scaleAnimation];
CAAnimation *animation2 = [self bezierCurve];
CAAnimation *animation3 = [self ratationWaggle];
group.animations = @[animation1,animation2,animation3];
group.duration = 3;
group.repeatCount = MAXFLOAT;
[self.myImageView.layer addAnimation:group forKey:@"group"];
}
- (CAAnimation *)overturn{
//創(chuàng)建動畫對象,并且設(shè)置動畫的類型 --這里是rotation翻轉(zhuǎn).z是通過Z軸進(jìn)行翻轉(zhuǎn)和敬。
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
//持續(xù)時間
animation.duration = 3;
//這里從開始位置進(jìn)行動畫,在結(jié)束時回到開始位置戏阅。
//開始位置
animation.fromValue = @0;
//結(jié)束位置:轉(zhuǎn)換成對象
animation.toValue = @(M_PI*2/3);
//重復(fù)次數(shù) 最大數(shù):(MAXFLOAT)一直旋轉(zhuǎn)
animation.repeatCount = MAXFLOAT;
//重復(fù)時間(優(yōu)先級高于重復(fù)次數(shù))(單位:s)
animation.repeatDuration = 3;
//是否移除結(jié)果(不復(fù)原)
animation.removedOnCompletion = NO;
/*
kCAFillModeRemoved 這個是默認(rèn)值昼弟,動畫結(jié)束后,會恢復(fù)到之前的狀態(tài)
kCAFillModeForwards 當(dāng)動畫結(jié)束后奕筐,會一直保持著動畫最后的狀態(tài)
kCAFillModeBackwards 在動畫開始前舱痘,便立即進(jìn)入動畫的初始狀態(tài)并等待動畫開始。
kCAFillModeBoth 這個其實就是上面兩個的合成.保持動畫最后的狀態(tài)
*/
animation.fillMode = kCAFillModeForwards;
//給imageView添加動畫离赫,forkey是一個標(biāo)識
[self.myImageView.layer addAnimation:animation forKey:@"rotationAnimation"];
return animation;
}
- (CAAnimation*)scaleAnimation{
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation.duration = 3;
//縮放倍數(shù)
animation.fromValue = @1;
animation.toValue = @0.5;
animation.repeatDuration = 3;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
//forkey是一個標(biāo)識
// [self.myImageView.layer addAnimation:animation forKey:@"scaleAnimation"];
return animation;
}
//繪制一個貝塞爾曲線的路徑
- (CAAnimation *)bezierCurve{
//通過關(guān)鍵幀的動畫來創(chuàng)建
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//設(shè)置時間
animation.duration = 3;
//創(chuàng)建一個路徑
CGMutablePathRef path = CGPathCreateMutable();
//1.創(chuàng)建起點
CGPoint startPoint = self.view.center;
CGPathMoveToPoint(path, nil, startPoint.x,startPoint.y);
//2.創(chuàng)建各個切線
CGPoint point1 = CGPointMake(20,300);
CGPoint point2 = CGPointMake(50, 400);
CGPoint point3 = CGPointMake(100, 600);
CGPathAddCurveToPoint(path, nil, point1.x, point1.y, point2.x, point2.y, point3.x, point3.y);
//3.將路徑添加進(jìn)去
animation.path = path;
//不還原
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
//
[self.myImageView.layer addAnimation:animation forKey:@"bezierCurve"];
//手動釋放路徑
CGPathRelease(path);
return animation;
}
-(CAAnimation *)ratationWaggle{
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
//持續(xù)時間
animation.duration = 0.1;
//無限晃動
animation.repeatCount = MAXFLOAT;
//設(shè)置一個數(shù)組芭逝,元素:旋轉(zhuǎn)的角度
CGFloat angle = M_PI/20;
//0 - 左搖-0-右搖-0
animation.values = @[@0,@(-angle),@0,@(angle),@0];
// [self.myImageView.layer addAnimation:animation forKey:@"waggle"];
return animation;
}
3.gif