App优化

iOS-核心动画示例——心跳效果、抖动效果、转场动画

2018-04-24  本文已影响409人  梦蕊dream

前言:
心跳效果就让一张图片做一个放大缩放小的动画。
抖动效果就是做一个左右旋转的动画.先让它往左边旋转-X°,再往右边旋转X°度,再从X°度旋转到-X°。就会有左右摇摆的效果了。
转场动画就是从旧视图转入新视图的动画效果。

1.心跳效果

代码实现

- (void)heartAnimation{
    CABasicAnimation *anima = [CABasicAnimation animation];
    anima.keyPath = @"transform.scale";
    anima.toValue = @0.5;
    anima.repeatCount = MAXFLOAT;
    anima.duration = 0.3;
    anima.autoreverses = YES;
    [self.clockView.layer addAnimation:anima forKey:nil];
}
实现效果
心跳.gif

2.抖动效果

代码实现

//#define angleValue(angle) ((angle) * M_PI / 180.0)//角度数值转换宏
- (void)imgaeShake{
    CAKeyframeAnimation *anima = [CAKeyframeAnimation animation];
    anima.keyPath = @"transform.rotation";
    anima.values = @[@(angleValue(-5)),@(angleValue(5)),@(angleValue(-5))];
    anima.repeatCount = MAXFLOAT;
    [self.clockView.layer addAnimation:anima forKey:nil];
}
实现效果
抖动.gif

3.转场动画

实现多张图片的切换效果,图片名字为1.png2.png3.png
代码实现

static int name = 1;
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    name++;
    if (name == 4) {
        name = 1;
    }
    NSString *imgName = [NSString stringWithFormat:@"%d",name];
    self.tranImgView.image = [UIImage imageNamed:imgName];
    
    CATransition *anima = [CATransition animation];
    anima.duration = 1.0;
    /** 动画效果有:
     @"fade":交叉淡化过渡
     @"push":推动效果
     @"moveIn":移动效果
     @"cube":立体翻滚
     @"oglFlip":上下左右翻滚
     @"suckEffect":收缩效果,被抽走
     @"rippleEffect":水滴效果
     @"pageCurl":向上翻页
     @"pageUnCurl":向下翻页
     @"cameraIrisHollowOpen":相机镜头打开效果
     @"cameraIrisHollowClose":相机镜头关闭效果
     */
    
    anima.type = @"cube";
    //    //设置动画的起始位置
    //    anim.startProgress = 0.3;
    //    //设置动画的结束位置
    //    anim.endProgress = 0.5;
    
    [self.tranImgView.layer addAnimation:anima forKey:nil];
}
实现效果
立体翻滚效果.gif
翻页效果.gif
上一篇 下一篇

猜你喜欢

热点阅读