美文网首页
仿照淘宝直播点赞的动画效果

仿照淘宝直播点赞的动画效果

作者: ImmortalSummer | 来源:发表于2020-04-22 17:10 被阅读0次

    简单介绍一下, 左边是样式一, 采用的是一个路径动画, 右边是样式二,采用了一组动画组, 相对于第一种形式, 使用动画组扩展性更好, 动画也可以更细腻, 代码后边也贴出了控制器对动画组件的引用和动画组件中涉及到的定时器的类的代码.

    动画部分设计的知识点参考

    左边是样式一, 右边是样式二

    样式一

    #import "WLikeAnimationView.h"
#import "WSafeTimer.h"

@interface WLikeAnimationView()
@property(nonatomic,strong) NSTimer *timer;
@end

@implementation WLikeAnimationView

-(instancetype)initWithStartingPoint:(CGPoint)point{
    
    CGFloat w = 80;
    CGFloat x = point.x - w*0.5;
    CGFloat h = 220;
    CGFloat y = point.y - h;
    self = [[WLikeAnimationView alloc] initWithFrame:CGRectMake(x, y, w, h)];
    
    // 添加计时器, 每隔一段时间自动冒泡泡
    self.timer = [WSafeTimer scheduledTimerWithTimeInterval:6 target:self selector:@selector(changeTimer) userInfo:nil repeats:YES];
    
    return self;
}

#pragma mark - 计时器
-(void)changeTimer {
    [self startAnimation];
}

#pragma mark - 执行冒泡动画
-(void)startAnimation {
    // 每次点击随机弹出3~5次
    int count = 3 + arc4random_uniform(3);
    for (int i=0; i<count; i++) {
        float delayInSeconds = 0.4 * i;
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [self startAnimation_once];
        });
    }
}

#pragma mark - 执行一次冒泡动画
-(void)startAnimation_once {
    CGFloat imgWH = 20;
    CGFloat x_center = (self.bounds.size.width-imgWH) * 0.5;
    CGFloat x_max = self.bounds.size.width - imgWH;
    // 起始位置
    CGFloat x_0 = x_center;
    CGFloat y_0 = self.bounds.size.height;
    
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(x_0, y_0, imgWH, imgWH)];
    [self addSubview:imageView];
    imageView.backgroundColor = [UIColor clearColor];
    
    // 随机获取图片 live_dianzan_anim_icon_01 - 09
    NSString *imageName = [NSString stringWithFormat:@"live_dianzan_anim_icon_%02d",arc4random_uniform(9)+1];
    imageView.image = [UIImage imageNamed:imageName];
    
    // 生成x的随机偏移量, 并创建动画路径的经过的位置
    CGFloat xOffset = self.bounds.size.width*0.4*(arc4random_uniform(10)/10.0);
    // 生成y的随机偏移量, 并创建动画路径的经过的位置
    CGFloat yOffset = self.bounds.size.height*0.2*(arc4random_uniform(10)/10.0);
    CGFloat y_1 = self.bounds.size.height - self.bounds.size.height/10.0*2.0;
    CGFloat y_2 = self.bounds.size.height - self.bounds.size.height/10.0*4.0 - yOffset;
    CGFloat y_3 = self.bounds.size.height - self.bounds.size.height/10.0*6.0 - yOffset;
    CGFloat y_4 = self.bounds.size.height - self.bounds.size.height/10.0*10.0 - yOffset;
    // 生产路径的关键点
    CGPoint p0 = CGPointMake(x_0, y_0);
    CGPoint p1 = CGPointMake(xOffset, y_1);
    CGPoint p2 = CGPointMake(x_max-xOffset, y_2);
    CGPoint p3 = CGPointMake(xOffset, y_3);
    CGPoint p4 = CGPointMake(x_max-xOffset, y_4);
    
    // 生成随机执行时间 3~4秒
    CGFloat duration = 3 + arc4random_uniform(1000)/1000.0;
    
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint:p0]; // 起点
    [bezierPath addLineToPoint:p1]; // 经过点
    [bezierPath addLineToPoint:p2]; // 经过点
    [bezierPath addLineToPoint:p3]; // 经过点
    [bezierPath addLineToPoint:p4]; // 终点
    
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.path = bezierPath.CGPath;
    // 动画时间间隔
    animation.duration = duration;
    // 重复次数为最大值
    animation.repeatCount = 1;
    animation.removedOnCompletion = YES;
    animation.fillMode = kCAFillModeForwards;
    // 控制动画的显示节奏 先慢后快再慢
    CAMediaTimingFunction *timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
    [animation setTimingFunction:timingFunction];
    // 为imageView添加路径动画
    [imageView.layer addAnimation:animation forKey:nil];
    // 添加渐隐动画, 执行完成后移除imageView
    [UIView animateWithDuration:duration+0.25 animations:^{
        imageView.alpha = 0;
    } completion:^(BOOL finished) {
        [imageView removeFromSuperview];
    }];
}

#pragma mark - other
-(void)clearTimer{
    if(self.timer != nil){
        [self.timer invalidate];
        self.timer = nil;
    }
}

-(void)dealloc{
    NSLog(@"like animation view dealloc");
    [self clearTimer];
}

@end

    样式二

    #import "WLikeAnimationView_New.h"
#import "WSafeTimer.h"

@interface WLikeAnimationView_New()
@property(nonatomic,strong) NSTimer *timer;
@end

@implementation WLikeAnimationView_New

-(instancetype)initWithStartingPoint:(CGPoint)point{
    
    CGFloat w = 80;
    CGFloat x = point.x - w*0.5;
    CGFloat h = 220;
    CGFloat y = point.y - h;
    self = [[WLikeAnimationView_New alloc] initWithFrame:CGRectMake(x, y, w, h)];
    
    // 添加计时器, 每隔一段时间自动冒泡泡
    self.timer = [WSafeTimer scheduledTimerWithTimeInterval:6 target:self selector:@selector(changeTimer) userInfo:nil repeats:YES];
    
    return self;
}

#pragma mark - 计时器
-(void)changeTimer {
    [self startAnimation];
}

#pragma mark - 执行冒泡动画
-(void)startAnimation {
    // 每次点击随机弹出3~5次
    int count = 3 + arc4random_uniform(3);
    for (int i=0; i<count; i++) {
        float delayInSeconds = 0.4 * i;
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [self startAnimation_once];
        });
    }
}

/*
 第二种思路, 执行一个动画组,这个动画组根据经过的点动态生成, 更容易扩展
 */
#pragma mark - 执行一次冒泡动画
-(void)startAnimation_once {
    CGFloat imgWH = 20;
    CGFloat x_center = (self.bounds.size.width-imgWH) * 0.5;
    CGFloat x_max = self.bounds.size.width - imgWH;
    // 起始位置
    CGFloat x_0 = x_center;
    CGFloat y_0 = self.bounds.size.height;
    
    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(x_0, y_0, imgWH, imgWH)];
    [self addSubview:imageView];
    imageView.backgroundColor = [UIColor clearColor];
    
    // 随机获取图片 live_dianzan_anim_icon_01 - 09
    NSString *imageName = [NSString stringWithFormat:@"live_dianzan_anim_icon_%02d",arc4random_uniform(9)+1];
    imageView.image = [UIImage imageNamed:imageName];
    
    // 生成x的随机偏移量, 并创建动画路径的经过的位置
    CGFloat xOffset = self.bounds.size.width*0.4*(arc4random_uniform(10)/10.0);
    // 生成y的随机偏移量, 并创建动画路径的经过的位置
    CGFloat yOffset = self.bounds.size.height*0.2*(arc4random_uniform(10)/10.0);
    CGFloat y_1 = self.bounds.size.height - self.bounds.size.height/10.0*2.0;
    CGFloat y_2 = self.bounds.size.height - self.bounds.size.height/10.0*4.0 - yOffset;
    CGFloat y_3 = self.bounds.size.height - self.bounds.size.height/10.0*6.0 - yOffset;
    CGFloat y_4 = self.bounds.size.height - self.bounds.size.height/10.0*10.0 - yOffset;
    // 生产路径的关键点
    CGPoint p0 = CGPointMake(x_0, y_0);
    CGPoint p1 = CGPointMake(xOffset, y_1);
    CGPoint p2 = CGPointMake(x_max-xOffset, y_2);
    CGPoint p3 = CGPointMake(xOffset, y_3);
    CGPoint p4 = CGPointMake(x_max-xOffset, y_4);
    
    NSMutableArray *points = [NSMutableArray array];
    [points addObject:NSStringFromCGPoint(p0)];
    [points addObject:NSStringFromCGPoint(p1)];
    [points addObject:NSStringFromCGPoint(p2)];
    [points addObject:NSStringFromCGPoint(p3)];
    [points addObject:NSStringFromCGPoint(p4)];
    
    CGPoint pStart = p0;
    NSMutableArray *paths = [NSMutableArray array];
    for (int i=1; i<points.count; i++) {
        CGPoint pEnd = CGPointFromString(points[i]);
        
        UIBezierPath *bezierPath = [UIBezierPath bezierPath];
        [bezierPath moveToPoint:pStart]; // 起点
        [bezierPath addLineToPoint:pEnd]; // 终点
        [paths addObject:bezierPath];
        
        pStart = pEnd;
    }
    
    // 生成随机执行时间 3~4秒
    CGFloat duration = 3 + arc4random_uniform(1000)/1000.0;
    CGFloat once = duration / paths.count;
    NSMutableArray *animations = [NSMutableArray array];
    for (int i=0; i<paths.count; i++) {
        UIBezierPath *bezierPath = paths[i];
        
        CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        animation.path = bezierPath.CGPath;
        // 动画时间间隔
        animation.duration = once;
        animation.beginTime = once*i;
        // 重复次数为最大值
        animation.repeatCount = 1;
        animation.removedOnCompletion = YES;
        animation.fillMode = kCAFillModeForwards;
        // 控制动画的显示节奏 先慢后快再慢
        CAMediaTimingFunction *timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
        [animation setTimingFunction:timingFunction];
        
        [animations addObject:animation];
    }
    
    
    CAAnimationGroup *group = [CAAnimationGroup new];
    group.animations = animations;
    group.duration = duration;
    // 为imageView添加路径动画
    [imageView.layer addAnimation:group forKey:nil];
    
    // 添加渐隐动画, 执行完成后移除imageView
    [UIView animateWithDuration:duration+0.25 animations:^{
        imageView.alpha = 0;
    } completion:^(BOOL finished) {
        [imageView removeFromSuperview];
    }];
}

#pragma mark - other
-(void)clearTimer{
    if(self.timer != nil){
        [self.timer invalidate];
        self.timer = nil;
    }
}

-(void)dealloc{
    NSLog(@"like animation view dealloc");
    [self clearTimer];
}

@end

    其他文件:

    控制器

    #import "ViewController.h"
#import "WLikeAnimationView.h"
#import "WLikeAnimationView_New.h"

@interface ViewController ()
@property(nonatomic,strong) WLikeAnimationView *likeAnimationView;
@property(nonatomic,strong) WLikeAnimationView_New *likeAnimationView_new;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(100, 500, 40, 40)];
    [button setImage:[UIImage imageNamed:@"xiaoxinxin"] forState:UIControlStateNormal];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [button addTarget:self action:@selector(buttonClicked) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
    
    self.likeAnimationView = [[WLikeAnimationView alloc] initWithStartingPoint:CGPointMake(120, 500)];
    [self.view addSubview:self.likeAnimationView];
    
    UIButton *button2 = [[UIButton alloc]initWithFrame:CGRectMake(300, 500, 40, 40)];
    [button2 setImage:[UIImage imageNamed:@"xiaoxinxin"] forState:UIControlStateNormal];
    [button2 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [button2 addTarget:self action:@selector(button2Clicked) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button2];
    
    self.likeAnimationView_new = [[WLikeAnimationView_New alloc] initWithStartingPoint:CGPointMake(320, 500)];
    [self.view addSubview:self.likeAnimationView_new];
}


-(void)buttonClicked{
    [self.likeAnimationView startAnimation];
}

-(void)button2Clicked{
    [self.likeAnimationView_new startAnimation];
}
@end

    WSafeTimer

    #import "WSafeTimer.h"

@interface WSafeTimer()
@property(nonatomic,weak) NSTimer *timer;
@property(nonatomic,weak) id target;
@property(nonatomic,assign) SEL selector;
@end

@implementation WSafeTimer
+ (NSTimer *)scheduledTimerWithTimeInterval:(NSTimeInterval)ti target:(id)aTarget selector:(SEL)aSelector userInfo:(nullable id)userInfo repeats:(BOOL)yesOrNo{
    WSafeTimer *safeTimer = [WSafeTimer new];
    
    safeTimer.target = aTarget;
    safeTimer.selector = aSelector;
    safeTimer.timer = [NSTimer scheduledTimerWithTimeInterval:ti target:safeTimer selector:@selector(timerHandle) userInfo:userInfo repeats:yesOrNo];
    
    return safeTimer.timer;
}

-(void)timerHandle{
    if (self.target && [self.target respondsToSelector:self.selector]) {
        [self.target performSelector:self.selector];
    }else {
        [self.timer invalidate];
    }
}
@end

    相关文章

      网友评论

          本文标题：仿照淘宝直播点赞的动画效果

          本文链接：https://www.haomeiwen.com/subject/xfrwihtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|仿照淘宝直播点赞的动画效果|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！