LineAnimationView

效果

说明

水平循环无间隔播放动画效果,用于loading的界面

源码

https://github.com/YouXianMing/UI-Component-Collection

//
// LineAnimationView.h
// AnimationLine
//
// Created by YouXianMing on 15/7/4.
// Copyright (c) 2015年 YouXianMing. All rights reserved.
// #import <UIKit/UIKit.h> typedef enum : NSUInteger { /**
* 从左往右(默认)
*/
LEFT_TO_RIGHT, /**
* 从右往左
*/
RIGHT_TO_LEFT, } ELineAnimationType; @interface LineAnimationView : UIView /**
* 动画时间间隔(默认时间为 1 秒)
*/
@property (nonatomic) NSTimeInterval duration; /**
* 动画类型(默认为从左到右)
*/
@property (nonatomic) ELineAnimationType animationType; /**
* 素材图片
*/
@property (nonatomic, strong) UIImage *sourceImage; /**
* 开始执行动画
*/
- (void)startAnimation; @end
//
// LineAnimationView.m
// AnimationLine
//
// Created by YouXianMing on 15/7/4.
// Copyright (c) 2015年 YouXianMing. All rights reserved.
// #import "LineAnimationView.h" @interface LineAnimationView () @property (nonatomic, strong) UIView *contentView; @property (nonatomic, strong) UIImageView *leftImageView;
@property (nonatomic, strong) UIImageView *rightImageView; @end @implementation LineAnimationView #pragma mark - 初始化
- (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame];
if (self) { [self defaultConfig]; [self setup];
} return self;
} - (void)defaultConfig { self.layer.masksToBounds = YES;
} - (void)setup { CGFloat width = self.frame.size.width;
CGFloat height = self.frame.size.height; self.contentView = [[UIView alloc] initWithFrame:CGRectMake(, , width * , height)];
[self addSubview:self.contentView]; self.leftImageView = [[UIImageView alloc] initWithFrame:CGRectMake(, , width, height)];
[self.contentView addSubview:self.leftImageView]; self.rightImageView = [[UIImageView alloc] initWithFrame:CGRectMake(width, , width, height)];
[self.contentView addSubview:self.rightImageView]; _animationType = LEFT_TO_RIGHT;
_duration = .f;
} #pragma mark - 开始动画
- (void)startAnimation { if (_animationType == LEFT_TO_RIGHT) { CGFloat width = self.frame.size.width;
CGFloat height = self.frame.size.height; CGRect startRect = CGRectMake(, , width * , height);
CGRect endRect = CGRectMake(-width, , width * , height); _contentView.frame = startRect; CABasicAnimation *line = [CABasicAnimation animationWithKeyPath:@"bounds"];
line.fromValue = [NSValue valueWithCGRect:startRect];
line.toValue = [NSValue valueWithCGRect:endRect];
line.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
line.duration = _duration;
line.delegate = self; _contentView.frame = endRect;
[_contentView.layer addAnimation:line forKey:nil]; } else if (_animationType == RIGHT_TO_LEFT) { CGFloat width = self.frame.size.width;
CGFloat height = self.frame.size.height; CGRect startRect = CGRectMake(- width, , width * , height);
CGRect endRect = CGRectMake(, , width * , height); _contentView.frame = startRect; CABasicAnimation *line = [CABasicAnimation animationWithKeyPath:@"bounds"];
line.fromValue = [NSValue valueWithCGRect:startRect];
line.toValue = [NSValue valueWithCGRect:endRect];
line.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
line.duration = _duration;
line.delegate = self; _contentView.frame = startRect;
[_contentView.layer addAnimation:line forKey:nil]; }
} - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag { [self startAnimation];
} #pragma mark - 重写setter,getter方法
@synthesize sourceImage = _sourceImage;
- (void)setSourceImage:(UIImage *)sourceImage { _sourceImage = sourceImage;
_leftImageView.image = sourceImage;
_rightImageView.image = sourceImage;
} - (UIImage *)sourceImage { return _sourceImage;
} @end

细节

[控件] LineAnimationView的更多相关文章

  1. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  2. HTML5 progress和meter控件

    在HTML5中,新增了progress和meter控件.progress控件为进度条控件,可表示任务的进度,如Windows系统中软件的安装.文件的复制等场景的进度.meter控件为计量条控件,表示某 ...

  3. 百度 flash html5自切换 多文件异步上传控件webuploader基本用法

    双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name=& ...

  4. JS与APP原生控件交互

    "热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显 ...

  5. UWP开发必备:常用数据列表控件汇总比较

    今天是想通过实例将UWP开发常用的数据列表做汇总比较,作为以后项目开发参考.UWP开发必备知识点总结请参照[UWP开发必备以及常用知识点总结]. 本次主要讨论以下控件: GridView:用于显示数据 ...

  6. 【踩坑速记】开源日历控件,顺便全面解析开源库打包发布到Bintray/Jcenter全过程(新),让开源更简单~

    一.写在前面 自使用android studio开始,就被它独特的依赖方式:compile 'com.android.support:appcompat-v7:25.0.1'所深深吸引,自从有了它,麻 ...

  7. 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传)

    前言 首先声明一下,我这个是对WebUploader开源上传控件的二次封装,底层还是WebUploader实现的,只是为了更简洁的使用他而已. 下面先介绍一下WebUploader 简介: WebUp ...

  8. Windows API 设置窗口下控件Enable属性

    参考页面: http://www.yuanjiaocheng.net/webapi/create-crud-api-1-put.html http://www.yuanjiaocheng.net/we ...

  9. VB.NET设置控件和窗体的显示级别

    前言:在用VB.NET开发射频检测系统ADS时,当激活已存在的目标MDI子窗体时,被其他子窗体遮住了,导致目标MDI子窗体不能显示. 这个问题怎么解决呢?网上看到一篇帖子VB.NET设置控件和窗体的显 ...

随机推荐

  1. Linux中终端和控制台的一些不成熟的理解

    首先声明,这仅仅是在下一些不成熟的想法.是通过看网上的一些资料和自己实践的一些心得,应该都是些很不成熟甚至是不太正确的想法.但是我还是想记录下来,算是一个心路历程吧.等以后成熟了,再来修改. 首先说一 ...

  2. Behave用户自定义数据类型

    在step句子中, 所有的参数默认是string类型, 如果用户想使用复杂的或者其他数据类型, 就需要了解以下bahave中的数据类型. behave的数据类型转换器是在parse和cfparse中支 ...

  3. cordova打包APK,SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode ...

    javascript 严格模式 第一次接触let关键字,有一个要非常非常要注意的概念就是”javascript 严格模式”,比如下述的代码运行就会报错: let hello = 'hello worl ...

  4. MVC 基架不支持 Entity Framework 6 或更高版本 即 NuGet的几个小技巧

    MVC 基架不支持 Entity Framework 6 或更高版本.有关详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=276833. 原因:mvc版 ...

  5. Spring JdbcTemplate详解

    为了使 JDBC 更加易于使用,Spring 在 JDBCAPI 上定义了一个抽象层, 以此建立一个JDBC存取框架. 作为 SpringJDBC 框架的核心, JDBC 模板的设计目的是为不同类型的 ...

  6. 撩课-Web大前端每天5道面试题-Day20

    1.vue生命周期的作用是什么? 它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑. 2. Vue实现数据双向绑定的原理:Object.defineProperty( ...

  7. windows多线程窗口程序设计

    掌握windows基于消息驱动的窗口应用程序设计的基本方法,掌握窗口程序资源的概念与设计,掌握常用的消息的程序处理方法,掌握文字图形输出相关函数编程.掌握设计的基本方法(选项),掌握时钟消息设计动画程 ...

  8. Leetcode 计划

    如何正确高效地使用LeetCode? LeetCode按照怎样的顺序来刷题比较好? LeetCode 题目总结/分类 Leetcode 简略题解 - 共567题 500. Keyboard Row [ ...

  9. AutoFac使用方法总结三:生命周期

         生命周期 AutoFac中的生命周期概念非常重要,AutoFac也提供了强大的生命周期管理的能力.     AutoFac定义了三种生命周期: Per Dependency Single I ...

  10. 一文总结学习 Python 的 14 张思维导图

    本文主要涵盖了 Python 编程的核心知识(暂不包括标准库及第三方库,后续会发布相应专题的文章). 首先,按顺序依次展示了以下内容的一系列思维导图:基础知识,数据类型(数字,字符串,列表,元组,字典 ...