偶然在code4app上溜达,发现了一个关于引导页的第三方类库,感觉还不错,就学习一下
首先创建一个CJNewDemo类,继承scrollviewController
在CJNewDemo类头文件中导入IFTTTJazzHands.h.
然后将父类改为IFTTTAnimatedScrollViewController后面加上scrollview的代理
.m文件如下
#import "CJnewDemo.h"
#define NUMBER_OF_PAGES 4
//根据第几页来计算当前页面的偏移量
#define timeForPage(page) (self.view.frame.size.width * (page - 1))
#define xForPage(page) timeForPage(page)
@interface CJnewDemo ()
//该引导栏只有两幅图片
@property (strong ,nonatomic) UIImageView *wordImage;
@property (strong ,nonatomic) UIImageView *horse;
@end
@implementation CJnewDemo
{
}
//初始化页面
- (id)init
{
self = [super init];
if (self) {
// Custom initialization
self.scrollView.contentSize = CGSizeMake(NUMBER_OF_PAGES*self.view.frame.size.width, self.view.frame.size.height);
}
self.scrollView.pagingEnabled = YES;
self.scrollView.showsHorizontalScrollIndicator = NO;
[self placeViewAndLabel];
[self configAnimation];
return self;
}
-(void)placeViewAndLabel
{
//设置马的图片
self.horse = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"Unicorn"]];
self.horse.center = self.view.center;
self.horse.frame = CGRectOffset(self.horse.frame, self.view.frame.size.width, -100);
self.horse.alpha = 0.0;
[self.scrollView addSubview:self.horse];
//设置文字图片
self.wordImage = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"IFTTT"]];
self.wordImage.center = self.view.center;
self.wordImage.frame = CGRectOffset(self.wordImage.frame, self.view.frame.size.width, -100);
[self.scrollView addSubview:self.wordImage];
//设置每一页的label
UILabel *firstLabel =[[UILabel alloc]init];
firstLabel.text = @"这是第一页";
[firstLabel sizeToFit];
firstLabel.center = self.view.center;
[self.scrollView addSubview:firstLabel];
UILabel *secondLabel = [[UILabel alloc]init];
secondLabel.text = @"这是第二页";
[secondLabel sizeToFit];
secondLabel.center = self.view.center;
secondLabel.frame = CGRectOffset(secondLabel.frame, xForPage(2), 180);
[self.scrollView addSubview:secondLabel];
UILabel *thirdLabel = [[UILabel alloc]init];
thirdLabel.text = @"这是第三页";
[thirdLabel sizeToFit];
thirdLabel.center = self.view.center;
thirdLabel.frame = CGRectOffset(thirdLabel.frame, xForPage(3), -100);
[self.scrollView addSubview:thirdLabel];
UILabel *fourthLabel = [[UILabel alloc]init];
fourthLabel.text = @"这是第四页";
[fourthLabel sizeToFit];
fourthLabel.center = self.view.center;
fourthLabel.frame = CGRectOffset(fourthLabel.frame, xForPage(4), 0);
[self.scrollView addSubview:fourthLabel];
}
//由于作者已经定义好函数,我们可以直接设置每一帧动画效果
-(void)configAnimation
{
//设置文字图片的动画
IFTTTFrameAnimation *wordAnimation = [IFTTTFrameAnimation new];
wordAnimation.view = self.wordImage;
[self.animator addAnimation:wordAnimation];
[wordAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc]initWithTime:timeForPage(1) andFrame:CGRectOffset(self.wordImage.frame, 200, 0)]];
[wordAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc]initWithTime:timeForPage(2) andFrame:self.wordImage.frame]];
[wordAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc]initWithTime:timeForPage(3) andFrame:CGRectOffset(self.wordImage.frame, self.view.frame.size.width, 200)]];
[wordAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc]initWithTime:timeForPage(4) andFrame:CGRectOffset(self.wordImage.frame, 0, 200)]];
//设置马图片
IFTTTFrameAnimation *horseAnimation = [IFTTTFrameAnimation new];
horseAnimation.view = self.horse;
[self.animator addAnimation:horseAnimation];
//改变马的位置
[horseAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc]initWithTime:timeForPage(2) andFrame:self.horse.frame]];
[horseAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc]initWithTime:timeForPage(3) andFrame:CGRectOffset(CGRectInset(self.horse.frame, 50, 50),xForPage(2),200)]];
//改变马的透明度
IFTTTAlphaAnimation *horseAlphaAnimation = [IFTTTAlphaAnimation new];
horseAlphaAnimation.view = self.horse;
[self.animator addAnimation:horseAlphaAnimation];
[horseAlphaAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc]initWithTime:timeForPage(1) andAlpha:0.0f]];
[horseAlphaAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc]initWithTime:timeForPage(2) andAlpha:1.0f]];
[horseAlphaAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc]initWithTime:timeForPage(3) andAlpha:1.0f]];
[horseAlphaAnimation addKeyFrame:[[IFTTTAnimationKeyFrame alloc]initWithTime:timeForPage(4) andAlpha:0.0f]];
}
注:设置透明度需要使用IFTTTAlphaAnimation类
设置位置变化效果需要使用IFTTTFrameAnimation类