美文网首页
动画库 - 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

    目录: 动画库 - Lottie-iOS[https://www.jianshu.com/p/1bbd64b047...

  • 前端第三方插件

    动画 tweenmax js动画库 tweenJS js动画库 easeljs js列表动画 ...

  • manim学习

    动画库Manim学习笔记——安装与环境配置(一)动画库Manim学习笔记——Manim库的基本结构(二)动画库Ma...

  • 有用的Vue第三方库

    Animate.css - CSS动画库 Velocity.js - JS动画库 TweenJS - 状态过渡动画...

  • 静态库

    静态库简介基本概念基本动画关键帧动画动画组转场动画 一. 静态库简介

  • [有梦想的IT人] Android优秀的动画库

    1. Spruce(安卓动画库)(是一个轻量级的动画库,可以帮助排版屏幕上的动画。使用有很多不同的动画库时,开发人...

  • 2019年11个JavaScript动画库

    一些最好的JS-CSS动画库 浏览网络寻找整洁的Javascript动画库时,我发现许多“推荐”的动画库都没有保存...

  • 【iOS】Airbnb 开源动画库 Lottie 介绍以及详细示

    【iOS】Airbnb 开源动画库 Lottie 介绍以及详细示例 【iOS】Airbnb 开源动画库 Lotti...

  • 动画库

    1.imagehover地址:https://github.com/ciar4n/imagehover.css[h...

  • Lottie开源动画库初探

    安卓同事分享了一款Lottie的动画库,效果挺好,查了一下发现这款动画库可以支持H5。 Lottie开源动画库 A...

网友评论

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

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