关于引导页帧动画学习

最新推荐文章于 2024-07-03 14:00:10 发布

CJHwking

最新推荐文章于 2024-07-03 14:00:10 发布

阅读量789

点赞数

分类专栏： ios学习文章标签：动画引导页 ios

本文链接：https://blog.csdn.net/u010356727/article/details/39251197

版权

ios学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

偶然在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类