前言:
对于动画的应用我还是停留在UIView动画的层次上,最近面试的时候被问到动画,面试官那一脸嫌弃的样子至今记忆优新,所以对这一块进行恶补一下
UIView动画:实质上是对Core Animation的封装,提供简洁的动画接口
基本属性动画
1、frame 2、bounds 3、center 4、alpha 5、backgroundColor
transform动画:
1、旋转 2、平移 3、缩放
属性更新:
1、frame
[UIView animateWithDuration:1.5 animations:^{
_middleRect = self.TopRightView.frame;
self.TopRightView.frame = self.TopLeftView.frame;
} completion:^(BOOL finished) {
[UIView animateWithDuration:1.5 animations:^{
self.TopRightView.frame = _middleRect;
}];
}];
2、bounds
CGRect originalBounds = self.BoundsView.bounds;
//尽管这个rect的x,y跟原始的不同,动画也只是改变了宽高
CGRect rect = CGRectMake(0, 0, 300, 120);
[UIView animateWithDuration:1 animations:^{
self.BoundsView.bounds = rect;
} completion:^(BOOL finished) {
[UIView animateWithDuration:1 animations:^{
self.BoundsView.bounds = originalBounds;
}];
}];
3、center
CGPoint pointOne = self.centerView.center;
CGPoint pointTwo = CGPointMake(SCREEN_WIDTH - 50, pointOne.y);
CGPoint pointThree = CGPointMake(50, pointOne.y);
[UIView animateWithDuration:2 animations:^{
self.centerView.center = pointThree;
} completion:^(BOOL finished) {
[UIView animateWithDuration:3 animations:^{
self.centerView.center = pointTwo;
} completion:^(BOOL finished) {
[UIView animateWithDuration:2 animations:^{
self.centerView.center = pointOne;;
}];
}];
}];
4、alpha
[UIView animateWithDuration:2 animations:^{
self.BoundsView.alpha = 0.3;
} completion:^(BOOL finished) {
[UIView animateWithDuration:2 animations:^{
self.BoundsView.alpha = 1;
}];
}];
5、backgroundColor
[UIView animateKeyframesWithDuration:9.0 delay:0.f options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
[UIView addKeyframeWithRelativeStartTime:0.f relativeDuration:1.0 / 4 animations:^{
self.backView.backgroundColor = RGB(0.9475, 0.1921, 0.1746);
}];
[UIView addKeyframeWithRelativeStartTime:1.0 / 4 relativeDuration:1.0 / 4 animations:^{
self.backView.backgroundColor = RGB(0.1064, 0.6052, 0.0334);
}];
[UIView addKeyframeWithRelativeStartTime:2.0 / 4 relativeDuration:1.0 / 4 animations:^{
self.backView.backgroundColor = RGB(0.1366, 0.3017, 0.8411);
}];
[UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{
self.backView.backgroundColor = RGB(0.619, 0.037, 0.6719);
}];
} completion:^(BOOL finished) {
[UIView animateWithDuration:1 animations:^{
self.backView.backgroundColor = [UIColor whiteColor];
}];
}];
transform动画:
CGAffineTransform:是CoreGraphics框架中的类,作为UIView的transform属性,控制视图的缩放、旋转、平移操作,也称为放射变换矩阵
CGAffineTransformIdentity 还原的设置
CGAffineTransformMakeRotation(CGFloat angle) 旋转
CGAffineTransformMakeScale(CGFloat sx, CGFloat sy) 缩放
CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty) 移动
1、旋转
angle = 0;
[NSTimer scheduledTimerWithTimeInterval: 0.03 target: self selector:@selector(transformAction) userInfo: nil repeats: YES];
-(void)transformAction {
angle += 0.05;//angle角度 double angle;
NSLog(@"%f",angle);
if (angle > 6.28) {//大于 M_PI*2(360度) 角度再次从0开始
angle = 0;
}
CGAffineTransform transform;
transform = CGAffineTransformMakeRotation(angle);
// transform = GAffineTransformRotate(self.imageView.transform, angle);
self.imageView.transform = transform;
}
2、缩放
[UIView animateWithDuration:kAnimationDuration animations:^{
CGAffineTransform transform;
//每次旋转都是根据目标对象最原始的transform进行旋转
transform = CGAffineTransformMakeScale(0.4, 0.4);
//则是根据目标对象当前的transform(多次旋转后transform已经变化了)进行旋转
// transform = CGAffineTransformScale(self.imageView.transform, 0.4, 0.4);
self.imageView.transform = transform;
}];
3、移动
[UIView animateWithDuration:kAnimationDuration animations:^{
CGAffineTransform transform;
//每次旋转都是根据目标对象最原始的transform进行旋转
transform = CGAffineTransformMakeTranslation(0, 60);
//则是根据目标对象当前的transform(多次旋转后transform已经变化了)进行旋转
// transform = CGAffineTransformTranslate(self.imageView.transform, 0, 60);
self.imageView.transform = transform;
}];
弹簧动画:
[UIView animateWithDuration:1.5//动画时长
delay:0 //动画延迟
usingSpringWithDamping:0.2 //类似弹簧的震动效果 0~1
initialSpringVelocity:4 //初始速度
options:UIViewAnimationOptionCurveLinear//动画过度效果
animations:^{
self.strechView.backgroundColor = [UIColor redColor];
self.strechView.frame = _pointTwo;
} completion:^(BOOL finished) {
[UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.8 initialSpringVelocity:4 options:UIViewAnimationOptionCurveLinear animations:^{
self.strechView.frame = _pointOne;
} completion:^(BOOL finished) {
self.strechView.backgroundColor = [UIColor orangeColor];
}];
}];
网友评论