1.ios中我们能看到的控件都是uiview的子类,比如uibutton uilabel uitextfield uiimageview等等
2.uiview能够在屏幕的显示是因为在创建它的时候内部自动添加一个calayer图层,通过这个图层在屏幕上显示的时候会调用一个drawrect: 的方法,完成绘图,才能在屏幕上显示
3.calayer 本身就具有显示功能,但是它不能响应用户的交互事件,如果只是单纯的显示一个图形,此时你可以使用calayer创建或者是使用uiview创建,但是如果这个图形想响应用户交互事件,必须使用uiview或者子类
动画知识框图如下:
#import viewcontroller.h#import uitextfield+shake.h@interface viewcontroller ()@property (retain, nonatomic) iboutlet uiimageview *balloon;@property (retain, nonatomic) iboutlet uitextfield *tf;@property (retain, nonatomic) iboutlet uibutton *bounces;@property (retain, nonatomic) iboutlet uiview *animationview;@property (retain, nonatomic) iboutlet uiimageview *cloud;@end@implementation viewcontroller
- (void)viewdidload { [super viewdidload]; //取到当前视图控制器自带view的图层 calayer *layer = self.view.layer;// uibutton *button = [uibutton buttonwithtype:uibuttontypesystem];// button.layer //button的图层 //layer 的color必须是cgcolor self.animationview.layer.backgroundcolor = [uicolor greencolor].cgcolor;}
//给tf创建一个类目:
uitextfield+shake.h#import @interface uitextfield (shake)- (void)shake;@enduitextfield+shake.m#import uitextfield+shake.h@implementation uitextfield (shake)//震动的方法- (void)shake{ cakeyframeanimation *keyframe = [cakeyframeanimation animationwithkeypath:@position.x]; keyframe.values = @[@(self.center.x + 10),@(self.center.x),@(self.center.x - 10)]; keyframe.repeatcount = 10; keyframe.duration = 0.03; [self.layer addanimation:keyframe forkey:nil]; }@end
开始动画按钮点击事件
- (ibaction)handleanimation:(uibutton *)sender { //uiview的属性动画 [self handlepropertyanimation]; //uiview的属性动画 block形式 [self handleprepertyanimationblock]; //uiview的过渡动画 [self handletrabsitionanimation]; //calayer动画 [self handlecalayer]; //calayer 的基础动画 [self handlebasicanimation]; //calayer的关键帧动画 [self handlekeyframeanimation]; //uitextfield 调用输入震动框方法 [self.tf shake]; //calayer的过渡动画 [self handlelayercatransactionanimation]; //caainmationgroup 分组动画 [self handleanimatongroup]; }
//uiview的属性动画 可动画的属性 : frame center bounds alpha backgroundcolor transfrom
//修改属性做动画,动画结束后属性修改的结果是真实的作用到动画的视图上,不能恢复到之前的样子
- (void)handlepropertyanimation{ //ios4.0之前必须把要修改的可动画属性写在begin 和 commit 之间 //开始动画 [uiview beginanimations:nil context:nil]; //指定代理 动画的代理不需要遵循协议,因为此代理就没有制定协议 [uiview setanimationdelegate:self]; //设置动画的持续时间 [uiview setanimationduration:3.0]; //设置动画的重复次数 给重复效果旋转效果立即消失 [uiview setanimationrepeatcount:3.0]; //设置动画的反转效果 [uiview setanimationrepeatautoreverses:yes]; //设置动画的变化速度 [uiview setanimationcurve:uiviewanimationcurveeaseinout]; //如果要实现这个方法必须设置代理,此方法在动画结束后触发 [uiview setanimationdidstopselector:@selector(makeanimationback)]; //修改属性做动画 //1.center 修改中心点 cgpoint center = self.animationview.center; center.y += 10; self.animationview.center =center; //2.修改透明度 alpha self.animationview.alpha = 0.0; //3.变形 tranform // 之前形变量 //旋转的角度180/4 self.animationview.transform = cgaffinetransformrotate(self.animationview.transform, m_pi_4); self.animationview.transform = cgaffinetransformscale(self.animationview.transform, 0.5, 0.5); //提交动画 [uiview commitanimations];}
//恢复到视图之前的状态
- (void)makeanimationback{ // self.animationview.center = self.view.center; self.animationview.alpha = 1.0; //恢复到tranform最初状态,最初状态就在cgaffinetransformidentity记录 self.animationview.transform = cgaffinetransformidentity; }//uiview的属性动画 block形式- (void)handleprepertyanimationblock{ //ios4.0之后使用block的形式做动画 __block typeof(self)weakself = self; //1.block 的第一种形式 //01.动画的持续时间// [uiview animatewithduration:2 animations:^{// //1.修改中心点// cgpoint center = weakself.animationview.center;// center.y += 50;// weakself.animationview.center = center;// //2.透明度// weakself.animationview.alpha = 0.0;// //3.变形// weakself.animationview.transform = cgaffinetransformrotate(weakself.animationview.transform, m_pi_4);//}]; //2.block的第二种形式 [uiview animatewithduration:2 animations:^{ //1.获得中心点 cgpoint center = weakself.animationview.center; //改变中心点 center.y += 50; weakself.animationview.center =center; //2.透明度 weakself.animationview.alpha = 0.0; //3.形变修改transform weakself.animationview.transform = cgaffinetransformscale(weakself.animationview.transform, 0.5, 0.2); } completion:^(bool finished) { //返回动画之前的状态 [weakself makeanimationback]; }]; //3.block的第三种形式 //01:持续时间 //02:动画执行的延迟时间 //03:设置动画的特效 //04:修好的动画属性 //05:动画执行结束后的block块 [uiview animatewithduration:3 delay:1 options:uiviewanimationoptionallowanimatedcontent animations:^{ //1.获得中心点 cgpoint center = weakself.animationview.center; //改变中心点 center.y += 50; weakself.animationview.center =center; //2.透明度 weakself.animationview.alpha = 0.0; //3.形变修改transform weakself.animationview.transform = cgaffinetransformscale(weakself.animationview.transform, 0.5, 0.2); } completion:^(bool finished) { //返回动画之前的状态 [weakself makeanimationback]; }]; //block的第四种形式 //参数1:动画持续时间 //参数2:动画的延迟时间 //参数3:设置弹簧的强度 范围(0.0~1.0) //参数4:设置弹簧的速度 //参数5:动画效果 //参数6:改变动画的属性写在这里 //参数7:结束动画的时候调用的block [uiview animatewithduration:2 delay:1 usingspringwithdamping:0.5 initialspringvelocity:500 options:uiviewanimationoptioncurveeaseinout animations:^{ cgpoint center = weakself.bounces.center; center.y += 10; weakself.bounces.center = center; //transform weakself.bounces.transform = cgaffinetransformscale(weakself.bounces.transform, 1.2, 1.2); } completion:^(bool finished) { cgpoint center = weakself.bounces.center; center.y -= 10; weakself.bounces.center = center; weakself.bounces.transform = cgaffinetransformidentity; }];}
//uiview的过渡动画
- (void)handletrabsitionanimation{ __block typeof(self)weakself = self; //01:对哪个视图添加过渡动画 //02:动画时常 //03:动画效果 [uiview transitionwithview:self.animationview duration:2 options:uiviewanimationoptionallowanimatedcontent animations:^{ weakself.animationview.transform = cgaffinetransformrotate(weakself.animationview.transform, m_pi_4); } completion:nil]; }
//calayer动画,修改layer层的属性做动画并没有真实的作用到这个视图上,动画知识一种假象
- (void)handlecalayer{ //calyer 动画就是对layer做动画 //边框的宽 self.animationview.layer.borderwidth = 10.0; //边框颜色 self.animationview.layer.bordercolor = [uicolor redcolor].cgcolor; //切圆角// self.animationview.layer.cornerradius = 100; //取出layer多余的部分// self.animationview.layer.maskstobounds = yes; //减掉layer多出的部分// self.animationview.clipstobounds = yes; //背景图片 self.animationview.layer.contents = (id)[uiimage imagenamed:@wdgj785q{`ckl4j}1{_4{(y.jpg].cgimage; //视图一创建出来的时候 锚点 基准点 中心点三个点是重合的 //锚点 anchorpoint 决定layer层上的哪个点是position 锚点默认是(0.5,0.5),跟视图的中心点重合 self.animationview.layer.anchorpoint = cgpointmake(0.5, 0); self.animationview.transform = cgaffinetransformrotate(self.animationview.transform, m_pi_4); //基准点 position 决定当前视图的layer,在父视图的位置,它以父视图的坐标系为准 self.animationview.layer.position = cgpointmake(160, 184);}
//calayer 的动画基类:caanimation
//cabasicanimation  基础动画
- (void)handlebasicanimation{ //ca动画是根据kvc的原理,就修改layer的属性,以达到做动画的效果 cabasicanimation *basic = [cabasicanimation animationwithkeypath:@position.x]; basic.fromvalue = @(-80); basic.tovalue = @(400); //设置动画持续的时间 basic.duration = 5.0; //设置动画重复的次数 basic.repeatcount = 1000; [self.cloud.layer addanimation:basic forkey:nil];}
//cakeyframeanimation 关键帧动画
- (void)handlekeyframeanimation{ cakeyframeanimation *keyframe = [cakeyframeanimation animationwithkeypath:@position]; cgpoint point1 = self.cloud.center; cgpoint point2 = cgpointmake(160, 100); cgpoint point3 = cgpointmake(270, self.cloud.center.y); //把一组要播放的动画需求的数值,按顺序放到数组中,此时动画执行的效果,就会按照数组中数据的顺序发生变化; //转化point结构体类型 转化成对象类型 nsvalue *value1 = [nsvalue valuewithcgpoint:point1]; nsvalue *value2 = [nsvalue valuewithcgpoint:point2]; nsvalue *value3 = [nsvalue valuewithcgpoint:point3]; keyframe.repeatcount = 1000; keyframe.duration = 15.0; keyframe.values = @[value1,value2,value3,value1]; [self.cloud.layer addanimation:keyframe forkey:nil];}
//catransition calayer 的过度动画
- (void)handlelayercatransactionanimation{ /* 各种动画效果 其中除了'fade', `movein', `push' , `reveal' ,其他属于似有的api(我是这么认为的,可以点进去看下注释). * ↑↑↑上面四个可以分别使用'kcatransitionfade', 'kcatransitionmovein', 'kcatransitionpush', 'kcatransitionreveal'来调用. * @cube 立方体翻滚效果 * @movein 新视图移到旧视图上面 * @reveal 显露效果(将旧视图移开,显示下面的新视图) * @fade 交叉淡化过渡(不支持过渡方向) (默认为此效果) * @pagecurl 向上翻一页 * @pageuncurl 向下翻一页 * @suckeffect 收缩效果，类似系统最小化窗口时的神奇效果(不支持过渡方向) * @rippleeffect 滴水效果,(不支持过渡方向) * @oglflip 上下左右翻转效果 * @rotate 旋转效果 * @push * @camerairishollowopen 相机镜头打开效果(不支持过渡方向) * @camerairishollowclose 相机镜头关上效果(不支持过渡方向) */ //创建过渡动画对象 catransition *transition = [catransition animation]; //配置动画过渡的样式 transition.type = @camerairishollowclose; //将过渡动画添加到layer上 [self.view.layer addanimation:transition forkey:nil]; }
//caainmationgroup 分组动画
- (void)handleanimatongroup{ //1.创建第一个关键帧动画,给热气球一个运动轨迹 cakeyframeanimation *keyframepath = [cakeyframeanimation animationwithkeypath:@position]; //贝塞尔曲线 //1.指定贝塞尔曲线的半径 cgfloat radius = [uiscreen mainscreen].bounds.size.height / 2.0; //01:圆心 //02:半径 //03:开始的角度 //04:结束的角度 //05:旋转方向 (yes表示顺时针 no表示逆时针) uibezierpath *path = [uibezierpath bezierpathwitharccenter:cgpointmake(0, radius) radius:radius startangle:-m_pi_2 endangle:m_pi_2 clockwise:yes]; //将贝塞尔曲线作为运动轨迹 keyframepath.path = path.cgpath; //2.创建第二组关键帧动画,让热气球在运动的时候 由小--->大--->小 ; cakeyframeanimation *keyframescale = [cakeyframeanimation animationwithkeypath:@transform.scale]; //通过一组数据修改热气球的大小 keyframescale.values = @[@1.0,@1.2,@1.4,@1.6,@1.8,@1.6,@1.4,@1.2,@1.0]; //创建动画分组对象 caanimationgroup *group = [caanimationgroup animation]; //将两个动画效果添加到分组动画中 group.animations = @[keyframepath,keyframescale]; group.duration = 8; group.repeatcount = 1000; [self.balloon.layer addanimation:group forkey:nil]; }
最终效果:
版权声明：本文为博主原创文章，未经博主允许不得转载。