OC基础之推荐一个旋转木马(跑马灯)效果的图片展示Demo
这个旋转木马(跑马灯)效果的图片展示Demo,包括设定旋转方向,图片倒影,背景设置,旋转速度,开始结束,点击显示选中的图片,彩色的块展示等等功能
效果图:(源码下载:https://github.com/hbblzjy/OC-CarrouselDemo)
部分代码展示:
- (void)testCarrouselView
{
NSMutableArray *array = [NSMutableArray array];
for (NSInteger i = 0; i < 8; i ++)
{
UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"mm%ld.jpeg", (long)i]];
[array addObject:image];
}
LYCarrouselView *carr = [[LYCarrouselView alloc] initWithFrame:CGRectMake(20, 80, 280, 160) images:array callback:^(NSInteger index, NSInteger event) {
NSLog(@"%ld %@", index, event == 1 ? @"点击" : @"长按");
}];
[carr addImage:[UIImage imageNamed:@"mm8.jpeg"]];
carr.backgroundColor = [UIColor blackColor];
carr.animationSpeed = 2;
carr.showReflectLayer = YES;
[self.view addSubview:carr];
UIButton *start = [UIButton buttonWithType:UIButtonTypeCustom];
[start setFrame:CGRectMake(40, 260, 100, 48)];
[start setTitle:@"开始" forState:UIControlStateNormal];
[start setBackgroundColor:[UIColor blueColor]];
[start handleControlEvents:UIControlEventTouchUpInside withBlock:^(UIControlEvents events) {
//默认为向左,如果暂停了,修改方向,开始向右
[carr startRotateRight:YES];
}];
[self.view addSubview:start];
UIButton *stop = [UIButton buttonWithType:UIButtonTypeCustom];
[stop setFrame:CGRectMake(180, 260, 100, 48)];
[stop setTitle:@"停止" forState:UIControlStateNormal];
[stop setBackgroundColor:[UIColor blueColor]];
[stop handleControlEvents:UIControlEventTouchUpInside withBlock:^(UIControlEvents events) {
[carr stopRotate];
}];
[self.view addSubview:stop];
LYSlider *slopex = [[LYSlider alloc] initWithWidth:280 center:CGPointMake(self.view.bounds.size.width / 2, self.view.bounds.size.height - 120) horizontal:YES];
[self.view addSubview:slopex];
slopex.thumbcolor = [UIColor magentaColor];
slopex.gradientBackInfo = [self sliderBackGraidentInfo];
slopex.value = 2 / 6.0;
[slopex handleSliderAction:UIControlEventValueChanged callback:^(LYSlider *slider, UIControlEvents event) {
carr.animationSpeed = slider.value * 6;
}];
}
视图.h文件内容:
- (NSDictionary *)sliderBackGraidentInfo
{
return @{@"locations" : @[@(0),
@(60 / 360.),
@(120 / 360.),
@(180 / 360.),
@(240 / 360.),
@(300 / 360.),
@(1)],
@"colors" : @[[UIColor redColor],
[UIColor yellowColor],
[UIColor greenColor],
[UIColor cyanColor],
[UIColor blueColor],
[UIColor magentaColor],
[UIColor redColor]]};
}
// index: view/image tag; event:(1 tap, 2 long press)
typedef void(^CarrouselBlock)(NSInteger index, NSInteger event);
// 旋转木马
@interface LYCarrouselView : UIView
@property (nonatomic, assign) BOOL canAutoRotate;// 自动动画开关
@property (nonatomic, assign) CGFloat sensitivity;// 滑动灵敏度 默认为1 越大越灵敏 0无效 正负影响方向
@property (nonatomic, assign) NSTimeInterval minimumPressTime;// 长按最短时间 超过则视为长按 默认为0.4
@property (nonatomic, assign) CGFloat animationSpeed;//默认为3.0 转过一张图时间
@property (nonatomic, assign) BOOL showReflectLayer;//是否显示倒影层
- (LYCarrouselView *)initWithFrame:(CGRect)frame images:(NSArray *)images callback:(CarrouselBlock)block;
- (void)addImage:(UIImage *)image;
- (void)startRotateRight:(BOOL)right; // 开始动画 (right:是否向右) canAutoRotate=YES
- (void)stopRotate; //停止动画 canAutoRotate=NO
OC基础之推荐一个旋转木马(跑马灯)效果的图片展示Demo的更多相关文章
- JS写一个列表跑马灯效果--基于touchslide.js
先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...
- jQuery 3D canvas 旋转木马(跑马灯)效果插件 - cloud carousel
插件名称-cloud carousel 最新版本-1.0.5 支持ie6-ie9,firefox,chrome,opera,safari等 1.引入jquery1.4.2.js 和CloudCarou ...
- flex 简单跑马灯效果(竖着显示)
<mx:Move id="move_area" target="{VBox_AreaWarning}"/> //move效果,模拟跑马灯 <s ...
- Android学习总结——TextView跑马灯效果
Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize="marquee" 2.TextView必须单行显示,即内容必须 ...
- 【Android】TextView跑马灯效果
老规矩,先上图看效果. 说明 TextView的跑马灯效果也就是指当你只想让TextView单行显示,可是文本内容却又超过一行时,自动从左往右慢慢滑动显示的效果就叫跑马灯效果. 其实,TextView ...
- Android界面(1) 使用TextView实现跑马灯效果
方法一:(只能实现单个TextView的跑马灯效果)在TextView添加以下控件 android:singleLine="true"只能单行,超出的文字显示为"...& ...
- TextView的跑马灯效果实现
TextView的跑马灯效果实现 问题描述 当文字内容过长,但是只允许显示一行时,可以将文字显示为跑马灯效果,即文字滚动显示. 代码实现 第一种方法实现 先查询TextView控件的属性,得到以下信息 ...
- Android使用TextView实现跑马灯效果(自定义控件)
对于一个长的TetxView 折行显示是一个很好的办法,另一种方法就是跑马灯显示(单行滚动) 1.折行显示的长TextView <LinearLayout xmlns:android=" ...
- JavaScript小实例-文字跑马灯效果
我们常常能看到显示屏上字体的滚动以及手机弹幕等,下面所示代码就是一个简易的文字跑马灯的效果: <!DOCTYPE html> <html> <head lang=&quo ...
随机推荐
- asp.net core 六 Oracle ORM
.netcore 中 Oracle ORM 在真正将项目移植到.netcore下,才发现会有很多问题,例如访问Oracle,问题出现的时间在2017年底 参考连接 ...
- 深入探究Lua的GC算法(下)-《Lua设计与实现》
紧接着上一篇文章zblade:深入探究Lua的GC算法(上)-<Lua设计与实现> 这篇文章让我们收尾GC的具体后续操作.转载请标明出处:http://www.cnblogs.com/zb ...
- React 深入系列3:Props 和 State
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列3:Props 和 State React 深入系列,深入讲解了React中的重点概念.特性和模式 ...
- 重拾Python(4):Pandas之DataFrame对象的使用
Pandas有两大数据结构:Series和DataFrame,之前已对Series对象进行了介绍(链接),本文主要对DataFrame对象的常用用法进行总结梳理. 约定: import pandas ...
- drupal 8 之 captcha模块
captcha模块的作用: 添加验证码表单 一.模块下载 https://www.drupal.org/project/captcha 二.安装模块 [扩展]>[+安装新的模块] 在模块页面,复 ...
- 删数方案数(regex)
[题目描述] 给出一个正整数序列 a,长度为 n,cyb 不喜欢完美,他要删掉一些数(也可以不删,即删掉0个),但是他不会乱删,他希望删去以后,能将 a 分成 2 个集合,使得两个非空集合的数的和相同 ...
- [HNOI2011]卡农
题目描述 众所周知卡农是一种复调音乐的写作技法,小余在听卡农音乐时灵感大发,发明了一种新的音乐谱写规则.他将声音分成 n 个音阶,并将音乐分成若干个片段.音乐的每个片段都是由 1 到 n 个音阶构成的 ...
- bzoj 4945: [Noi2017]游戏
Description Solution 首先我们发现一个位置如果不是 \('x'\),那么就只有两种选择 而 \('x'\) 的个数小于等于 \(8\),直接枚举是哪个就好了 然后就是 \(2-sa ...
- ●Joyoi Normal
题链: http://www.joyoi.cn/problem/tyvj-1953题解: 定义d(u,v)这个函数,满足: d(u,v)=1,当且仅当在点分树中,u是v的祖先 d(u,v)=0,其它情 ...
- 洛谷mNOIP模拟赛Day2-入阵曲
题目背景 pdf题面和大样例链接:http://pan.baidu.com/s/1cawM7c 密码:xgxv 丹青千秋酿,一醉解愁肠. 无悔少年枉,只愿壮志狂. 题目描述 小 F 很喜欢数学,但是到 ...