Shimmer辉光动画效果

简介:


 

效果

 

源码

https://github.com/facebook/Shimmer

https://github.com/YouXianMing/Animations


//
//  ShimmerController.m
//  Animations
//
//  Created by YouXianMing on 15/12/18.
//  Copyright © 2015年 YouXianMing. All rights reserved.
//

#import "ShimmerController.h"
#import "UIView+SetRect.h"
#import "FBShimmeringLayer.h"
#import "FBShimmeringView.h"
#import "StrokeCircleLayerConfigure.h"

@interface ShimmerController ()

@end

@implementation ShimmerController

- (void)setup {

    [super setup];
    
    self.backgroundView.backgroundColor = [UIColor blackColor];
    
    {
        FBShimmeringView *shimmeringView = [[FBShimmeringView alloc] initWithFrame:self.contentView.bounds];
        shimmeringView.shimmering                  = YES;
        shimmeringView.shimmeringBeginFadeDuration = 0.3;
        shimmeringView.shimmeringOpacity           = 0.3;
        [self.contentView addSubview:shimmeringView];
        
        UILabel *logoLabel         = [[UILabel alloc] initWithFrame:shimmeringView.bounds];
        logoLabel.text             = @"Shimmer";
        logoLabel.font             = [UIFont fontWithName:@"HelveticaNeue-UltraLight" size:60.0];
        logoLabel.textColor        = [UIColor whiteColor];
        logoLabel.textAlignment    = NSTextAlignmentCenter;
        logoLabel.backgroundColor  = [UIColor clearColor];
        shimmeringView.contentView = logoLabel;
    }
    
    {
        FBShimmeringLayer *shimmeringLayer          = [FBShimmeringLayer layer];
        shimmeringLayer.frame                       = (CGRect){CGPointZero, CGSizeMake((130 + 1) * 2, (130 + 1) * 2)};
        shimmeringLayer.position                    = self.contentView.center;
        shimmeringLayer.shimmering                  = YES;
        shimmeringLayer.shimmeringBeginFadeDuration = 0.3;
        shimmeringLayer.shimmeringOpacity           = 0.3;
        shimmeringLayer.shimmeringPauseDuration     = 0.6f;
        [self.contentView.layer addSublayer:shimmeringLayer];
        
        CAShapeLayer *circleShape          = [CAShapeLayer layer];
        StrokeCircleLayerConfigure *config = [StrokeCircleLayerConfigure new];
        config.lineWidth                   = 1.f;
        config.startAngle                  = 0;
        config.endAngle                    = M_PI * 2;
        config.radius                      = 130.f;
        config.strokeColor                 = [UIColor redColor];
        [config configCAShapeLayer:circleShape];
        
        shimmeringLayer.contentLayer = circleShape;
    }
}

- (void)buildTitleView {
    
    [super buildTitleView];
    
    // Title label.
    UILabel *headlinelabel      = [UILabel new];
    headlinelabel.font          = Font_Avenir(20.f);
    headlinelabel.textAlignment = NSTextAlignmentCenter;
    headlinelabel.textColor     = [UIColor redColor];
    headlinelabel.text          = self.title;
    [headlinelabel sizeToFit];
    
    headlinelabel.center = self.titleView.middlePoint;
    
    FBShimmeringView *shimmeringView = [[FBShimmeringView alloc] initWithFrame:self.titleView.bounds];
    shimmeringView.shimmering                  = YES;
    shimmeringView.shimmeringBeginFadeDuration = 0.3;
    shimmeringView.shimmeringOpacity           = 0.3;
    [self.titleView addSubview:shimmeringView];
    
    shimmeringView.contentView = headlinelabel;
    
    // Line.
    UIView *line         = [[UIView alloc] initWithFrame:CGRectMake(0, 63.5, self.view.width, 0.5f)];
    line.backgroundColor = [[UIColor grayColor] colorWithAlphaComponent:0.25f];
    [self.titleView addSubview:line];
    [self.titleView addSubview:headlinelabel];
    
    // Back button.
    UIImage  *image      = [UIImage imageNamed:@"backIconVer2"];
    UIButton *backButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 64)];
    backButton.center    = CGPointMake(20, self.titleView.middleY);
    [backButton setImage:image forState:UIControlStateNormal];
    [backButton addTarget:self action:@selector(popSelf) forControlEvents:UIControlEventTouchUpInside];
    [backButton.imageView setContentMode:UIViewContentModeCenter];
    [self.titleView addSubview:backButton];
}

- (void)popSelf {
    
    [self popViewControllerAnimated:YES];
}


@end

细节


目录
相关文章
|
2月前
|
前端开发
Filp动画
Filp动画基于First、Last、Inverse、Play四步实现复杂前端动画效果。首先记录元素初始位置,接着记录目标位置,然后使用transform属性将元素逆向平移回初始位置,最后通过移除transform并添加transition属性实现平滑动画效果。这是一种高效解决CSS不支持过渡动画问题的方法。
44 1
|
图形学 iOS开发
Unity——动效与缓动动画
Unity——动效与缓动动画
165 0
|
JavaScript
3D动画效果
3D动画效果
|
前端开发
CSS动画篇之404动画
CSS动画篇之404动画
162 0
|
存储 文件存储 云计算
不瞒了,我们和追光动画有一个《杨戬》!
不瞒了,我们和追光动画有一个《杨戬》!
206 0
|
JavaScript 前端开发
【jQuery动画】停止动画、淡入淡出、自定义动画
动画队列中所有动画都是按照顺序执行的,默认只有当前的一个动画执行完毕,才会执行后面的动画。为此,jQuery提供了stop()方法用于停止动画效果。通过此方法,可以让动画队列后面的动画提前执行。
An动画优化之遮罩层动画
An动画优化之遮罩层动画
287 0
|
前端开发 开发工具
教你用HTML+CSS实现百叶窗动画效果
我们浏览网页的时候总能看见一些炫酷的特效,比如百叶窗效果,本文我们就用HTML+CSS制作一个百叶窗小项目,适合刚学前端的小伙伴,使用代码简单易懂,很容易上手,学习完本文后,相信你也能敲出来属于自己的百叶窗效果,改变图片及相应盒子的大小,有女朋友的可以试着放几张在一起的照片,也是一件非常浪漫的事
588 0
教你用HTML+CSS实现百叶窗动画效果
|
前端开发
动画
动画
157 0

热门文章

最新文章