Git Product home page Git Product logo

shimmer's Introduction

Shimmer

Shimmer is an easy way to add a shimmering effect to any view in your app. It's useful as an unobtrusive loading indicator.

Shimmer was originally developed to show loading status in Paper.

Shimmer

Usage

To use Shimmer, create a FBShimmeringView or FBShimmeringLayer and add your content. To start shimmering, set the shimmering property to YES.

An example of making a label shimmer:

FBShimmeringView *shimmeringView = [[FBShimmeringView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:shimmeringView];

UILabel *loadingLabel = [[UILabel alloc] initWithFrame:shimmeringView.bounds];
loadingLabel.textAlignment = NSTextAlignmentCenter;
loadingLabel.text = NSLocalizedString(@"Shimmer", nil);
shimmeringView.contentView = loadingLabel;

// Start shimmering.
shimmeringView.shimmering = YES;

There's also an example project. In the example, you can swipe horizontally and vertically to try various shimmering parameters, or tap to start or stop shimmering. (To build the example locally, you'll need to open FBShimmering.xcworkpace rather than the .xcodeproj.)

Installation

There are two options:

  1. Shimmer is available as Shimmer in Cocoapods.
  2. Manually add the files into your Xcode project. Slightly simpler, but updates are also manual.

Shimmer requires iOS 6 or later.

How it works

Shimmer uses the -[CALayer mask] property to enable shimmering, similar to what's described in John Harper's 2009 WWDC talk (unfortunately no longer online). Shimmer uses CoreAnimation's timing features to smoothly transition "on-beat" when starting and stopping the shimmer.

Other Platforms

We have a version of Shimmer for Android, too! It's also available on GitHub.

Contributing

See the CONTRIBUTING file for how to help out.

License

Shimmer is BSD-licensed.

shimmer's People

Contributors

b3ll avatar christianroman avatar croath avatar danielamitay avatar ejensen avatar facebook-github-bot avatar fumoboy007 avatar grp avatar guillaumealgis avatar ide avatar jamesgpearce avatar jbinney avatar klaaspieter avatar laud avatar natansh avatar nicksnyder avatar olejnjak avatar spromicky avatar syotfs avatar xuzhe avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

shimmer's Issues

Updates please!

We'd love to see an update in this pod, any chances to make a swift 4 version?

About FBShimer

I have tried many times ,but I can't see the shimmering effect when launch your project.
all the code is the same as when it was downloaded.
please give me a hand.

Tag a new release

I would love to use the shimmeringDirection property but it is not included in the 1.0.1 Cocoapod release.

Can you tag a new release and update the podspec?

ShimmerView does NOT work with Constraints

I created a UIView. Added it as contentView of the shimmerView.

shimmerView is constrained to my TableViewCell.contentView -- left, right, top, bottom.
The UIView is then constrained to shimmerView -- left, right, top, bottom.

[shimmerView setShimmering:YES]; then gives the error:

[LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x170284150 V:|-(0)-[UIImageView:0x1008b6b90]   (active, names: '|':UITableViewCellContentView:0x1008b1f10 )>",
    "<NSLayoutConstraint:0x1702841f0 UIImageView:0x1008b6b90.height == 175   (active)>",
    "<NSLayoutConstraint:0x170284380 V:[UIImageView:0x1008b6b90]-(0)-[FBShimmeringView:0x1008b4de0]   (active)>",
    "<NSLayoutConstraint:0x1702843d0 FBShimmeringView:0x1008b4de0.bottom == UITableViewCellContentView:0x1008b1f10.bottom   (active)>",
    "<NSLayoutConstraint:0x17409ab80 'UIView-Encapsulated-Layout-Height' UITableViewCellContentView:0x1008b1f10.height == 43.5   (active)>"
)

If I go to FBShimmeringLayer layoutSubViews and comment out:

_contentLayer.anchorPoint = CGPointMake(0.5, 0.5);
  _contentLayer.bounds = r;
  _contentLayer.position = CGPointMake(CGRectGetMidX(r), CGRectGetMidY(r));

the errors go away but Shimmering no longer works.

-[__NSArrayM objectAtIndex:]: index 3 beyond bounds [0 .. 0]

Implemented inside a collection view cell
cell.shimmerDataView.contentView = loadingView

Getting the following crash on 'Crashlytics'

0 CoreFoundation 0x27567e3f __exceptionPreprocess 1 libobjc.A.dylib 0x34c15c8b objc_exception_throw 2 CoreFoundation 0x2747cc49 -[__NSArrayM removeObjectAtIndex:] 3 UIKit 0x2ac95a97 _UIViewTopDownSubtreeTraversal 4 UIKit 0x2b02ea35 -[UIView(UIConstraintBasedLayout_EngineDelegate) _invalidateSystemLayoutSizeFittingSizeAtEngineDelegateLevel] 5 UIKit 0x2aac6175 -[UIView(AdditionalLayoutSupport) _setNeedsUpdateConstraintsNeedingLayout:] 6 UIKit 0x2b02d6c1 -[UIView(AdditionalLayoutSupport) _setSubviewWantsAutolayoutTripWantsAutolayout:] 7 UIKit 0x2aa0be23 -[UIView(Internal) _addSubview:positioned:relativeTo:] 8 UIKit 0x2aa0b8d3 -[UIView(Hierarchy) addSubview:] 9 Shimmer 0xda9c3b (Missing)

Reason behind the existence of `contentLayer`

Ok, I’m surely missing something, but the fact that FBShimmeringLayer can’t simply be used with +layerClass and give whatever view the shimmering effect really bugs me.

Why is there the need for a contentLayer to limit the effect? Shouldn’t be simply self.mask = _maskLayer instead?

I tried this approach and worked perfectly…

(please keep in mind I just moved to Obj-C)

About UIKIT_EXTERN in FBShimmeringLayer.m

I was see such code in FBShimmeringLayer.m

UIKIT_EXTERN float UIAnimationDragCoefficient(void); 

I'm not so clear about the UIKIT_EXTERN.

please give your comments~thx!

Patent

Hey,

I've just released an Android version of that library. But reading your part regarding licensing and patents,

Shimmer is BSD-licensed. We also provide an additional patent grant.

I was wondering if there's any potential problem with me releasing the android version:

https://github.com/RomainPiel/Shimmer-android

Thanks!

Mask angle/tilt

The Java library has an option for angle, but not the iOS one. I'm not sure how to get started, anyone has an idea on what's required to support this?

support arc?

Hello,
Thanks for the great source, it works like a charm.
Or I have a litte problem: this library support arc?

Jack

What happened with this repo?

I wonder what happened with this repo?
I was going to use for my current app but it looks like it hasn't been update in a while.

Shimmer on a UIButton

Hey,

it is possible to set the Shimmer on a UIButton? I tried it already and it is not working. How can I modifier the lib for this feature?

ps: thanks for this awesome lib!!

    FBShimmeringView *shimmeringView = [[FBShimmeringView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:shimmeringView];

    shimmeringView.contentView = self.loginBt.titleLabel;

    // Start shimmering.
    shimmeringView.shimmering = YES;

I added the button via storyboard (weak, nonatomic)

ios simulator screen shot 6 mar 2014 11 08 40 pm

Change Shimmering Direction

Is there an way I can change the Shimmering direction.
Current default animation is from Left to Right.
What can I do to make it from Right to Left.

need ios6?

i use it in ios5.1, and it words fine,and i havn't find any apis need ios6 or later.so who can tell me why

Update CocoaPod

The CocoaPod doesn't appear to have the update that includes being able to set a FBShimmerDirection.

Xcode 8.3 warning

warning info:
Assigning to 'id<CALayerDelegate> _Nullable' from incompatible type 'FBShimmeringLayer *const __strong'

- (void)_createMaskIfNeeded
{
  if (_shimmering && !_maskLayer) {
    _maskLayer = [FBShimmeringMaskLayer layer];
    _maskLayer.delegate = self;     // -> warning here ...
    _contentLayer.mask = _maskLayer;
    [self _updateMaskColors];
    [self _updateMaskLayout];
  }
}

Shimmer crashes EarlGrey

With the help of the engineers who wrote Google's EarlGrey testing framework, we found that including

[UIApplication sharedApplication].keyWindow.layer.speed = 100;

CAAnimations freeze and crash the app. The shimmering view freezes when it starts to shimmer, and isn't able to be dismissed.

Tag a new release ?

The last tagged version is from Febr 2014 (1.0.2) while the last commit is from 12 days ago !
This gives the false first impression that the project is dead, while it isn't.

Unfortunately also, if you add pod 'Shimmer' to your Podfile, CocoaPods will grab by default this 2014 version, which has bugs wrt Autolayout, Simulator and 64bits, that are now fixed in trunk.

Workaround: edit your Podfile like so: pod 'Shimmer', :git => 'https://github.com/facebook/Shimmer.git', :commit => '3589bd7ca0d122fe06792868485d79c622a3f47d'

Not compatible with arm64?

Trying to get Shimmer to work in my Swift project using a bridging header. When I try to implement a FBShimmeringView object in my controller, the linker throws this error:

Undefined symbols for architecture arm64:
  "_OBJC_CLASS_$_FBShimmeringView", referenced from:
      type metadata accessor for __ObjC.FBShimmeringView in FeaturedViewController.o
ld: symbol(s) not found for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

Am I correct in assuming this framework is incompatible with the latest iPhone 64-bit processors, or am I missing something here?

Please update the CocoaPod!

There is functionality in the current master branch not available in the latest CocoaPod, which was last updated December 2014. In the interest of saving other people headaches (too late to salvage mine), please keep the CocoaPod updated. Thanks!

Purpose of fadeLayer ?

I removed fadeLayer property of FBShimmeringMaskLayer, and commented out all the code related to this property. Everything still works fine. So my questions :

  1. What's the purpose of fadeLayer ?
  2. Since FBShimmeringMaskLayer is used as a mask layer, only alpha channel will be used. And fadeLayer is a sublayer of it, how does it affect anything here ? I tried to change the background colour of fadeLayer to various colours with various alpha values, but it doesn't have any effect.

Facebook>Chat panel

There is a bug in facebook in chat, there is a chat panel in right side of facebook page, when there are lots of people are online and that time, if we scroll the scroll bar, then last user are not showing properly.

see the attachment..

screenshot 100

screenshot 100 _3

Ability to change the shimmer colour?

At the moment the shimmer takes the colour from the object its shimmering, it would be nice if you could specify a colour for the shimmer to be.
An example, a white label, could have a gold shimmer.
I hope that makes sense.

Thanks
Andrew.

declaration shadows a local variable 'disableActions'

When compiling with -Wshadow, you get a warning

FBShimmeringView/FBShimmeringLayer.m:404:12: warning: declaration shadows a local variable [-Wshadow]
BOOL disableActions = [CATransaction disableActions];
^
FBShimmeringView/FBShimmeringLayer.m:360:8: note: previous declaration is here
BOOL disableActions = [CATransaction disableActions];
^

Issues when used with views inside of UIStackView

Hey there,

It seems like Shimmer doesn't work well with UIStackViews.

Here's what it's supposed to look like (this is without Shimmer added): https://abload.de/img/simulatorscreenshot15hokh1.png

Here's a screenshot of what happens when I add the Shimmer effect to the small grey view at the bottom: https://abload.de/img/simulatorscreenshot15x1kkz.png

The view hierarchy itself is very simple.

Cell View (grey coloured)
--UIStackView (white coloured)
----View (pink coloured)
----View (grey coloured)

I've got another similar view in my project which doesn't use a UIStackView and it works fine there (except from the fact that it's messed up when I rotate the device, but that's a different issue).

Shimmer direction

Is there anyway I can specify if the shimmer happens from right to left or left to right?

Thanks!

Memory issue

I created a view(shimmerView) and added a FBShimmerView onto it. Then I make my app do this loop:
Show the shimmerView, go to other views, go to shimmerView, go to other views...

Everything was normal except that something increased in the memory.
So I opened Instrument to see what happened. And it showed that instances of FBShimmeringLayer and FBShimmeringMaskLayer increased by one every tine a FBShimmerView is displayed. That means when a FBShimmerView is deallocated, the FBShimmeringLayer is persisted in the memory.
See the screenshot below:
screenshot 2015-10-21 17 17 44

FBShimmeringView with `translatesAutoresizingMaskIntoConstraints` set to NO

If I'm using Auto Layout on an FBShimmeringView, it doesn't seem to work. It appears to work only when initialized with an explicit frame.

This may be a non-issue and a necessary requirement of the library, but I'm just wondering if there are workarounds. I would like to center a shimmering view, and using rects isn't a great experience.

Thanks!

Assigning to 'id<CALayerDelegate> _Nullable' from incompatible type 'FBShimmeringLayer *const __strong'

First, thanks for this Code. It's great and it really helped me.

Using Xcode 8, iOS 10 beta 2 and I started getting two warnings in FBShimmeringLayer.m

Line 287 and 400.

287: _maskLayer.delegate = self;
...
400: fadeInAnimation.delegate = self;

WARNING:
Assigning to 'id<CALayerDelegate> _Nullable' from incompatible type 'FBShimmeringLayer *const __strong'

Since I'm a SWIFT developer I'm not quite sure how to fix it myself. I thought I'd post here before trying to fix it incorrectly myself.

The bounds of a button don't work with text

I'm trying to get Shimmer on a programmatically added button. It's a QBFlatButton, userStateButton = [[QBFlatButton alloc] initWithFrame:CGRectMake((cellView.frame.size.width - (80 + 20)), (self.screenHeight/(cellCount * 4)), 80, ((self.screenHeight + (cellCount * cellCount))/(cellCount * 2)))];

When I turn Shimmer on, the entire bounds that I've set for the button start shimmering (no surprise there, thats what I set the bounds as) so it looks like theres a rectangle around the logout button
FBShimmeringView *shimmeringView = [[FBShimmeringView alloc] initWithFrame:userStateButton.bounds];

screen shot 2014-04-28 at 11 21 10 am

How would I get just the text of the button to shimmer? I've already tried making the frame of the shimmeringView the frame of the titleLabel (which it turns out is {{0, 0}, {0, 0}}

Any way to do this without adding it to the storyboard like issue #8

SIGSEGV when deallocating view controller

We're getting a crash when our UIViewController deallocated:

Thread 0 Crashed:
0   libobjc.A.dylib                      0x000000018620af30 objc_msgSend + 16
1   UIKit                                0x000000018d619c4c -[UIView(Hierarchy) setNeedsLayout] + 348
2   UIKit                                0x000000018d8f429c __UIViewNoteTraitsDidChangeRecursively + 288
3   UIKit                                0x000000018d8f43c0 __UIViewNoteTraitsDidChangeRecursively + 580
4   UIKit                                0x000000018d8f43c0 __UIViewNoteTraitsDidChangeRecursively + 580
5   UIKit                                0x000000018d8f43c0 __UIViewNoteTraitsDidChangeRecursively + 580
6   UIKit                                0x000000018d96a690 -[UIViewController _updateTraitsIfNecessary] + 308
7   UIKit                                0x000000018d6055cc -[UIView(CALayerDelegate) layoutSublayersOfLayer:] + 828
8   QuartzCore                           0x000000018aace40c -[CALayer layoutSublayers] + 144
9   QuartzCore                           0x000000018aac30e8 CA::Layer::layout_if_needed(CA::Transaction*) + 288
10  QuartzCore                           0x000000018aace33c -[CALayer layoutIfNeeded] + 188
11  Shimmer                              0x0000000102e67da8 0x102e60000 + 32168
12  Shimmer                              0x0000000102e67430 0x102e60000 + 29744
13  Shimmer                              0x0000000102e68ec0 0x102e60000 + 36544

Any ideas?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.