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

细节


目录
相关文章
|
JavaScript
3D动画效果
3D动画效果
|
前端开发 开发工具
教你用HTML+CSS实现百叶窗动画效果
我们浏览网页的时候总能看见一些炫酷的特效,比如百叶窗效果,本文我们就用HTML+CSS制作一个百叶窗小项目,适合刚学前端的小伙伴,使用代码简单易懂,很容易上手,学习完本文后,相信你也能敲出来属于自己的百叶窗效果,改变图片及相应盒子的大小,有女朋友的可以试着放几张在一起的照片,也是一件非常浪漫的事
610 0
教你用HTML+CSS实现百叶窗动画效果
|
C# 前端开发
WPF实现渐变淡入淡出的动画效果
原文:WPF实现渐变淡入淡出的动画效果 1、实现原理 1.1 利用UIElement.OpacityMask属性,用于改变对象区域的不透明度的画笔。可以使元素的特定区域透明或部分透明,从而实现比较新颖的效果。
3109 0
|
图形学 iOS开发
Unity——动效与缓动动画
Unity——动效与缓动动画
192 0
|
JavaScript
ScrollMe – 在网页中加入各种滚动动画效果
  ScrollMe 是一款 jQuery 插件,用于给网页添加简单的滚动效果。当你向下滚动页面的时候,ScrollMe 可以缩放,旋转和平移页面上的元素。它易于设置,不需要任何自定义的 JavaScript 代码支持。
792 0
|
前端开发 JavaScript UED
前端动画效果的实现
这篇博客将会介绍前端开发中的动画效果,如何使用 CSS 和 JavaScript 实现动画效果,并提供一些有用的技巧和注意事项,希望读者可以通过这篇文章提升自己的动画设计技能。
260 0
|
XML Java API
一个超简单的渐变平行四边形进度条
这个自定义View,其实就是一个简单的进度条,无非就是平行四边形形状的,加了渐变以及状态颜色的切换。
161 0
An动画优化之遮罩层动画
An动画优化之遮罩层动画
306 0
|
前端开发
超简单的轮播图动画效果 HTML+Css
超简单的轮播图动画效果 HTML+Css

热门文章

最新文章