美文网首页Gif动画
iOS---GIF图渐入消失效果

iOS---GIF图渐入消失效果

作者: 旷世流年 | 来源:发表于2017-05-10 15:44 被阅读0次

制作效果:一组图片以gif的形式出现且 带渐入消失的效果

代码如下:

声明属性

@property (weak, nonatomic)  IBOutlet UIImageView *welcomeImage;//欢迎界面ImageView
@property (nonatomic,strong) NSArray* imageArray;//图片数组

图片数组

#pragma mark--懒加载
-(NSArray*) imageArray{

    if (!_imageArray) {
        _imageArray = [[NSArray alloc] initWithObjects:[UIImage imageNamed:@"welcome01.jpg"], [UIImage imageNamed:@"welcome02.jpg"],[UIImage imageNamed:@"welcome03.jpg"],nil];
    }
    return _imageArray;
}
-(NSTimer*) timer{

    if (!_timer) {
        self.welcomeImage.image = [UIImage imageNamed:@"welcome01.jpg"];//初始图片
        //启动定时器进行图片的循环播放
        _timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(frameAnimation) userInfo:nil repeats:YES];
    }
    return _timer;
}

数据加载完毕 (由于需要在定时器中进行图片的更替,则给予一个ImageView的初始值最后一张图片,在定时器的回调方法中进行启动,进行图片的由123顺序展示)

pragma mark--视图加载完毕

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib
    //启动定时器
    [self.timer setFireDate:[NSDate distantPast]];
}

定时器回调方法

#pragma mark--类似帧动画但额外渐入消失效果
-(void)frameAnimation{

    //创建CATransition对象
    CATransition *transition = [CATransition animation];
    //设置运动类型
    transition.type = kCATransitionFade;
    //设置运动时间
    transition.duration = 2.0f;
    //设置运动速度
    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    //图片layer层添加动画
    [self.welcomeImage.layer addAnimation:transition forKey:nil];

    //获取此时的数组图片
    UIImage *currentImage = self.welcomeImage.image;
    //获取该图片在数组中的位置
    NSUInteger index = [self.imageArray indexOfObject:currentImage];
    //对于得到的位置数较数组长度取余 得到下一张图片的位置数
    index = (index + 1) % [self.imageArray count];
    //更改图片为下一张
    self.welcomeImage.image = self.imageArray[index];
}
方法二 在定时器回调方法中替换方法一
UIImage *currentImage = self.imageView.image;
NSUInteger index = [self.imgs indexOfObject:currentImage];
index = (index + 1) % [self.imgs count];

[UIView transitionWithView:self.imageView duration:1 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
    self.imageView.image = self.imgs[index];
} completion:nil];

相关文章

  • iOS---GIF图渐入消失效果

    制作效果:一组图片以gif的形式出现且 带渐入消失的效果 代码如下: 声明属性 图片数组 数据加载完毕 (由...

  • 自定义View之qq气泡拖拽消失效果

    先看效果图(本篇实现气泡拖拽消失,没有实现回弹和消失时爆炸效果) 观察效果图,可以发现其中有两个圆(固定圆和拖拽圆...

  • 入门ae教程:瞬间消失,你能发现其中的区别吗?

    一、效果图 瞬间消失,听起来是不是很简单啊,其实只是设置出点就瞬间消失了,但是这样的消失给人的视觉效果是非常生硬的...

  • jQuery(动画)

    动画基础隐藏和显示 上卷下拉效果 渐入淡出效果 自定义动画 jQuery核心

  • 效果图公司给地产人带来的反思

    项目建筑效果图,有总平面效果图、总鸟瞰效果图、局部立面效果图、单体效果图、夜景效果图、商业氛围效果图。 户型效果图...

  • 俞孚书画系列:家居

    客厅效果图 一 客厅效果图 二 客厅效果图 三 客厅效果图 四 书房效果图 五 书房效果图 六 餐厅效果图 七 卧...

  • 正面管教

    刚开学的浮躁已渐渐消失,现在越来越认真越来越独立,渐入正轨。

  • 前端框架bootstrap--模态框插件

    例子 效果图 例子 效果图 例子 效果图 例子 效果图 例子 效果图 按esc可以退出例子 效果图 点击第一次时不...

  • 跑马灯小demo

    效果图:闪电接单后面的UILabel实现一个跑马灯效果,缺点是:只在前面的字跑完消失,文字再次出现... 封装的代...

  • [每天进步一点点~] uni-app css 各种条纹背景、格纹

    1.条纹 效果图: 代码: 2 效果图: 代码: 3.条纹 效果图: 代码: 方法二:效果图: 方法三:效果图: ...

网友评论

    本文标题:iOS---GIF图渐入消失效果

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