美文网首页
动画库 - Keyframes-iOS

动画库 - Keyframes-iOS

作者: 恩莱客 | 来源:发表于2021-11-03 17:10 被阅读0次

    目录:

    动画库 - Lottie-iOS
    动画库 - SVGA-iOS
    动画库 - Keyframes-iOS

    APP常见的动画库对比:

    动画库 Lottie SVGA Keyframes
    支持平台 Android/iOS/Web Android/iOS/Web Android/iOS
    设计工具支持 AfterEffects(AE) AE&Flash AE
    功能边界 所有 部分 矢量图
    导出工具 插件 插件 脚本
    设计成本 需要命名规范 需要脚本
    资源包大小zip 2.6M 767K
    官网 airbnb.design/lottie/ svga.io/ git地址

    简介

    Keyframes自定义除了开始和结束以外的“关键帧”,实现动画效果。

    优缺点

    优点:
    使用确实简单方便。
    缺点:
    不能动态的修改或定义动画内容,不同的动画无法实现同步,多个动画彼此无法堆叠。需要理解设计师给的动画样式才能做出效果。

    demo实例:

    1. 具体代码
        UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 85, 36)];
        imageView.image = [UIImage imageNamed:@"plane"];
        [self.view addSubview:imageView];
        imageView.center = self.view.center;
        CGPoint originCenter = self.view.center;
        [UIView animateKeyframesWithDuration:1.5f delay:0 options:UIViewKeyframeAnimationOptionRepeat animations:^{
            [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.25 animations:^{
                imageView.center = CGPointMake(imageView.center.x + 80, imageView.center.y - 10);
            }];
            [UIView addKeyframeWithRelativeStartTime:0.1 relativeDuration:0.4 animations:^{
                imageView.transform = CGAffineTransformMakeRotation(-M_PI/8);
            }];
            [UIView addKeyframeWithRelativeStartTime:0.25 relativeDuration:0.25 animations:^{
                imageView.center = CGPointMake(imageView.center.x + 100, imageView.center.y - 50);
                imageView.alpha = 0;
            }];
            [UIView addKeyframeWithRelativeStartTime:0.51 relativeDuration:0.01 animations:^{
                imageView.transform = CGAffineTransformIdentity;
                imageView.center = CGPointMake(0, originCenter.y);
            }];
            [UIView addKeyframeWithRelativeStartTime:0.55 relativeDuration:0.45 animations:^{
                imageView.alpha = 1;
                imageView.center = originCenter;
            }];
        } completion:^(BOOL finished) {
        }];
    
    1. 动画效果


      动画效果图

    目录:

    动画库 - Lottie-iOS
    动画库 - SVGA-iOS
    动画库 - Keyframes-iOS

    相关文章

      网友评论

          本文标题:动画库 - Keyframes-iOS

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