2016-07-27 11:11:48 CodingFire 阅读数 5160

点赞我们都知道,最简单的就是通过Bool变量或者selected来判断是否选中,然后替换原来的图片,要想有个简单的动画效果,前面博主写过Core Animation里的关键帧动画,这里就用关键帧动画CAKeyframeAnimation来做,只需要在按钮响应方法中添加以下代码,同时替换图片:

 if (_isSelected == NO) {
        _isSelected = YES;
        [likeBtn setBackgroundImage:[UIImage imageNamed:@"detail_unup_group"] forState:UIControlStateNormal];
    }
    else
    {
        _isSelected = NO;
        [likeBtn setBackgroundImage:[UIImage imageNamed:@"detail_up_group"] forState:UIControlStateNormal];
    }
    CAKeyframeAnimation * animation;
    animation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    animation.duration = 0.5;
    animation.delegate = self;
    animation.removedOnCompletion = YES;
    animation.fillMode = kCAFillModeForwards;

    NSMutableArray *values = [NSMutableArray array];
    [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)]];
    [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.1, 1.1, 1.0)]];
    [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.9, 0.9, 0.9)]];
    [values addObject:[NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)]];

    animation.values = values;
    [likeBtn.layer addAnimation:animation forKey:nil];

是不是很简单,自己找张图片试试吧,Demo就不放了。
还可以加上爆炸的烟花效果,使用CAEmitterLayer,基本使用前面有介绍,但是具体的掌控比较复杂,有兴趣的自己研究下吧。

2016-10-24 14:08:27 u011154007 阅读数 749

前言:利用Button简单实现点赞动画

#pragma mark 动画
- (void)btnAddAnimation:(UIButton *)btn
{
    CAKeyframeAnimation *k = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
    k.values = @[@(0.1),@(1.0),@(1.5)];
    k.keyTimes = @[@(0.0),@(0.5),@(0.8),@(1.0)];
    k.calculationMode = kCAAnimationLinear;
    [btn.layer addAnimation:k forKey:@"SHOW"];
}


2016-05-23 22:46:23 qq_34874026 阅读数 1933

1.首先创建一个用于点赞的按钮。在点赞按钮的点击方法里写入一下代码。

创建一个显示动画的控件。

    self.Image1.layer.contents = (id)[UIImageimageNamed:(i%2==0?@"2":@"1")].CGImage;


i是自己定义的一个变量,主要用于在点击按钮时为控件设置不用的图片,当然还有很多的做法,也可以用自己的方法来实现图片的切换

2.然后创建一个CAKeyframeAnimation对象,设置这个对象的values,keytimes和calculationMode.

    CAKeyframeAnimation *k = [CAKeyframeAnimationanimationWithKeyPath:@"transform.scale"];

    k.values =@[@(0.1),@(1.0),@(1.5)];

    k.keyTimes =@[@(0.0),@(0.5),@(0.8),@(1.0)];

    k.calculationMode =kCAAnimationLinear;

    i++;


3.将CAKeyframeAnimation对象加到图片显示的空间上。

    [self.Image1.layeraddAnimation:k forKey:@"SHOW"];


图片如下,不过没有弄gif图也看不到点击时的动画效果,要是有需要或者感兴趣的自己command shift + N自己试试吧。

2017-06-25 18:13:34 u010105969 阅读数 1870

大多数手机App的点赞图标在我们点击的时候都会有一个放大的效果,随后还原。之前公司App有点赞功能但却没有这个放大之后还原的效果,于是研究一下准备将该效果添加到项目中。

思路:为点赞图标添加一个动画,该动画分为两步:1.让点赞图标放大一定的倍数  2.让点赞图标还原到原来的大小

重写点击图标的点击事件,代码:

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

    

    /*

     参数1:动画持续时间

     参数2:多久后开始动画

     参数3:动画类型

     */

    [UIView animateKeyframesWithDuration:0.5 delay:0 options:UIViewKeyframeAnimationOptionLayoutSubviews animations:^{

        /*

         参数1:关键帧开始时间

         参数2:关键帧占用时间比例

         参数3:到达该关键帧时的属性值

         */

        [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:1/2.0 animations:^{

            self.transform = CGAffineTransformMakeScale(1.6, 1.6);

        }];

//        [UIView addKeyframeWithRelativeStartTime:1/3.0 relativeDuration:1/3.0 animations:^{

//            self.transform = CGAffineTransformMakeScale(0.6, 0.6);

//        }];

        [UIView addKeyframeWithRelativeStartTime:1/2.0 relativeDuration:1/2.0 animations:^{

            self.transform = CGAffineTransformIdentity;

        }];

    } completion:nil];

   

}


2018-06-19 17:18:40 aaaaazq 阅读数 13632

做过一个项目,里面涉及到的动画效果比较多,在这里做个小小的总结。

直线动画效果

实现一个物体在某段时间从一个点移动到另一个点。
效果如下:
这里写图片描述
动画相关代码如下:
动画模型:

@interface AnimationModel : NSObject

@property(nonatomic,strong) NSArray * images;
@property(nonatomic,assign) float fromX;
@property(nonatomic,assign) float fromY;
@property(nonatomic,assign) float toX;
@property(nonatomic,assign) float toY;
@property(nonatomic,assign) BOOL loop;
@property(nonatomic,assign) float time;

@end

动画实现:

-(void)addSingleLineAnimationToView:(UIView *)view animationModel:(AnimationModel *)model{
    CABasicAnimation* moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    moveAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(model.fromX,model.fromY)];
    moveAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(model.toX,model.toY)];
    moveAnimation.duration = model.time;
    moveAnimation.removedOnCompletion = NO;
    moveAnimation.repeatCount = MAXFLOAT;
    if (model.loop == 0) {
        moveAnimation.repeatCount = 1;
    }
    [view.layer addAnimation:moveAnimation forKey:@"singleLineAnimation"];
}

爆炸点赞动画效果

效果有点像撒花,效果如下:
这里写图片描述
这个效果的实现也是我在网上找到的,封装了一个View和一个button,调用很方便,下面我贴一下调用的代码,后面会给出完整代码的地址。
调用代码:

-(BZFireworkAnimationButton *)praiseButton{
    if (!_praiseButton) {
        _praiseButton = [[BZFireworkAnimationButton alloc] initWithFrame:CGRectMake(150, 200, 50, 50)];
        _praiseButton.particleImage = [UIImage imageNamed:@"button_bulletin_board_collected"];
        _praiseButton.particleScale = 0.05f;
        _praiseButton.particleScaleRange = 0.02f;
        [_praiseButton addTarget:self action:@selector(praiseAction:) forControlEvents:UIControlEventTouchUpInside];
        [_praiseButton setImage:[UIImage imageNamed:@"button_bulletin_board_uncollect"] forState:UIControlStateNormal];
        [_praiseButton setImage:[UIImage imageNamed:@"button_bulletin_board_collected"] forState:UIControlStateSelected];
    }
    return _praiseButton;
}

-(void)praiseAction:(BZFireworkAnimationButton *)button{
    if (button.selected) {
        [button popInsideWithDuration:0.4f];
    }else{
        [button popOutsideWithDuration:0.4];
        [button animate];
    }
    button.selected = !button.selected;
}

心跳(放大缩小)动画效果

效果如下:
这里写图片描述
实现代码:

-(void)setupHeartbeatAnimationInView:(UIView *)view{
    // 设定为缩放
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    // 动画选项设定
    animation.duration = 1.2; // 动画持续时间
    animation.repeatCount = 10000000000; // 重复次数
    animation.autoreverses = YES; // 动画结束时执行逆动画
    // 缩放倍数
    animation.fromValue = [NSNumber numberWithFloat:1.0]; // 开始时的倍率
    animation.toValue = [NSNumber numberWithFloat:1.4]; // 结束时的倍率
    animation.removedOnCompletion = NO;
    // 添加动画
    [view .layer addAnimation:animation forKey:@"scale-layer"];
}

上下浮动效果

效果如下:
这里写图片描述
代码实现如下:

@interface FloatViewController ()

//判断是否是当前ViewController,如果不是,则停止动画,否则动画一直在,且dealloc方法不会被调用
@property(nonatomic,assign) BOOL isCurrentVC;
@end

@implementation FloatViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColor orangeColor];

    UIImageView * animationImageView = [[UIImageView alloc] initWithFrame:CGRectMake(30, 105, 144, 350)];
    animationImageView.image = [UIImage imageNamed:@"image_city_angel_login_girl"];
    [self setAnimationImageViewAnimation:animationImageView];
    [self.view addSubview:animationImageView];
}

-(void)dealloc{
    NSLog(@"FloatViewController dealloc");
}

-(void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
    self.isCurrentVC = YES;
}

-(void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    self.isCurrentVC = NO;
}

-(void)setAnimationImageViewAnimation:(UIImageView *)animationImageView{
    [UIView animateWithDuration:1 animations:^{
        animationImageView.frame = CGRectMake(30, 90, 144, 350);
    }];
    [UIView animateWithDuration:1 delay:1 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        animationImageView.frame = CGRectMake(30, 105, 144,350);

    } completion:^(BOOL finished) {
        if (self.isCurrentVC) {
            [self setAnimationImageViewAnimation:animationImageView];
        }
    }];

}

这个动画效果有一点需要注意的就是需要手动停止,最好离开该页面的时候就手动让它停止,否则会造成内存泄漏。如果是push到下级页面,手动停止了动画,回到该页面时还需要动画启动的话,可以给动画的view一个tag值,然后在viewWillAppear中调用一下setAnimationImageViewAnimation方法。

图片序列gif效果

开发中经常遇到动图的效果,如果美术给的是gif图,那么可以使用SDWebImage中的方法进行播放,如果给的是图片序列,我们可以用UIImageView自带的属性来实现。
效果如下:
这里写图片描述
使用UIImageView自带属性实现代码如下:

NSArray * images = @[@"gif_ferriswheel1",@"gif_ferriswheel2",@"gif_ferriswheel3",@"gif_ferriswheel4",@"gif_ferriswheel5",@"gif_ferriswheel6"];
    UIImageView * imageViews = [[UIImageView alloc] init];
    UIImage * image = [UIImage imageNamed:images[0]];
    imageViews.frame = CGRectMake(120, 200, image.size.width, image.size.height);
    NSMutableArray * imagesArray = [NSMutableArray array];
    for (NSString * imagesName in images) {
        UIImage * tempImage = [UIImage imageNamed:imagesName];
        [imagesArray addObject:tempImage];
    }
    imageViews.animationImages = [imagesArray copy];
    imageViews.animationDuration = 0.9;
    imageViews.animationRepeatCount = 1000000000;
    [imageViews startAnimating];
    [self.view addSubview:imageViews];

这种方式需要注意的是animationImages这个数组里面的对象是UIImage,所以千万不要把图片名称的数组直接赋值,会造成崩溃。

直线+Gif效果

图片既有位移的改变,又在改变位移的同时自身在变,比如一个人走路。
效果如图:
这里写图片描述
实现动画主要代码如下:

-(void)initData{
    NSString * jsonPath = [[NSBundle mainBundle] pathForResource:@"animation" ofType:@"json"];
    NSData * data = [NSData dataWithContentsOfFile:jsonPath];
    NSDictionary * dic = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];
    NSArray * lineGifArray = dic[@"walk_animation"];
    self.lineGifArray = [NSMutableArray array];
    for (NSDictionary * item in lineGifArray) {
        AnimationModel * model = [[AnimationModel alloc] init];
        [model setValuesForKeysWithDictionary:item];
        [self.lineGifArray addObject:model];
    }
}

-(void)setupLineGifAnimation{
    for (AnimationModel * model in self.lineGifArray) {
        UIImageView * animationImageView = [[UIImageView alloc] init];
        animationImageView.image = [UIImage imageNamed:model.images[0]];
        animationImageView.frame = CGRectMake(model.toX, model.toY, animationImageView.image.size.width, animationImageView.image.size.height);
        NSMutableArray * imagesArray = [NSMutableArray array];
        for (NSString * imagesName in model.images) {
            UIImage * tempImage = [UIImage imageNamed:imagesName];
            [imagesArray addObject:tempImage];
        }
        animationImageView.animationImages = [imagesArray copy];
        animationImageView.animationDuration = 1.2;
        animationImageView.animationRepeatCount = 1000000000;
        [animationImageView startAnimating];
        [self.view addSubview:animationImageView];
        [self addSingleLineAnimationToView:animationImageView animationModel:model];
    }
}

-(void)addSingleLineAnimationToView:(UIView *)view animationModel:(AnimationModel *)model{
    CABasicAnimation* moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    moveAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(model.fromX,model.fromY)];
    moveAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(model.toX,model.toY)];
    moveAnimation.duration = model.time;
    moveAnimation.removedOnCompletion = NO;
    moveAnimation.repeatCount = MAXFLOAT;
    if (model.loop == 0) {
        moveAnimation.repeatCount = 1;
    }
    [view.layer addAnimation:moveAnimation forKey:@"lineGifAnimation"];
}

这个动画效果涉及到两个时间,一个位移从起点到终点的时间和一个完成一套动作的时间,这两个时间需要去调才能做出最自然的效果,我这里提供的是思路,两个时间没有花时间去调,请见谅~

动画能让我们的app显得更有生机和活力,也还有很多其他的动画效果,记住的话更好,记不住可以抽时间整理一下,下次再写的时候找起来方便。
这六个动画效果我自己写了一个完整的demo,点击这里或者这里获取代码。

iOS-各种动画特效

阅读数 2470

没有更多推荐了,返回首页