An easy way to add a simple, shimmering effect to any view in an iOS app.

Related tags

Animation Shimmer
Overview

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.

Comments
  • About FBShimer

    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.

    opened by ncncff51131420 12
  • Shimmer on a UIButton

    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

    opened by eikebartels 12
  • Memory issue

    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

    opened by lionhylra 9
  • The bounds of a button don't work with text

    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

    opened by AndrewSB 8
  • Tag a new release

    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?

    opened by nicksnyder 7
  • Fix shimmeringHighlightWidth documentation and deprecation attribute

    Fix shimmeringHighlightWidth documentation and deprecation attribute

    The property shimmeringHighlightWidth is causing 2 warnings with strict compiler flags.

    The first one is because placing @deprecated right after @abstract in the documentation comment block causes the parser to think the @abstract is empty. This is fixed by moving @deprecated at the end of the comment block.

    The second is caused by the method being documented as @deprecated but not marked as such with a compiler attribute. This is fixed by using the DEPRECATED_MSG_ATTRIBUTE macro.

    CLA Signed 
    opened by guillaumealgis 5
  • About UIKIT_EXTERN in FBShimmeringLayer.m

    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!

    opened by zixun 5
  • FBShimmeringView with `translatesAutoresizingMaskIntoConstraints` set to NO

    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!

    opened by pheuter 5
  • Reason behind the existence of `contentLayer`

    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)

    opened by yuchi 5
  • Purpose of fadeLayer ?

    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.
    opened by namanhams 5
  • Add Carthage support

    Add Carthage support

    Support Carthage by adding a framework scheme and target.

    I'm aware there are two PRs (#53 and #55) open for this but they appear to be dead and have merge conflicts.

    CLA Signed 
    opened by klaaspieter 4
  • Is there any user data that is either being collected or Tracked by the Shimmer

    Is there any user data that is either being collected or Tracked by the Shimmer

    As part of the iOS 14 /AppTracking Transparency framework, would like to know if any kind of the user data is collected or Tracked by the Shimmer.

    As mentioned in the Apple (Ref: https://developer.apple.com/support/app-privacy-on-the-app-store/), below were some of the examples for Tracking:

    • Sharing device location data or email lists with a data broker.
    • Placing a third-party SDK in our app that combines user data from the app with user data from other developers’ apps to target advertising or measure advertising efficiency, even if we don’t use the SDK for these purposes. For example, using a login SDK that repurposes the data it collects from the app to enable targeted advertising in other developers’ apps.

    The following situations are not considered tracking:

    • When the data is linked solely on the end-user’s device and is not sent off the device in a way that can identify the end-user or device.
    • When the data broker uses the data shared with them solely for fraud detection or prevention or security purposes, and solely on our behalf.
    opened by ghost 0
  • Unable to add Shimmer Framework manually in custom swift Framework

    Unable to add Shimmer Framework manually in custom swift Framework

    Hi,

    I am unable to integrate Shimmer manually in my Custom Framework. I am getting this error Use of undeclared type 'FBShimmeringView'. I have done all the steps and have imported the files in Framework's.h file. Please let me know how I can fix this

    opened by jeetkapadia 0
Owner
Meta Archive
These projects have been archived and are generally unsupported, but are still available to view and use
Meta Archive
Shimmer: A super-light modifier that adds a shimmering effect to any SwiftUI View

SwiftUI-Shimmer ✨ Shimmer is a super-light modifier that adds a shimmering effec

Vikram Kriplaney 389 Jan 2, 2023
MotionBlur allows you to add motion blur effect to iOS animations.

MotionBlur MotionBlur allows you to add motion blur effect to your animations (currently only position's change). See the accompanying blog post to le

Arek Holko 1.5k Nov 3, 2022
Twinkle is a Swift and easy way to make any UIView in your iOS or tvOS app twinkle.

Twinkle ✨ Twinkle is a Swift and easy way to make any UIView in your iOS or tvOS app twinkle. This library creates several CAEmitterLayers and animate

patrick piemonte 600 Nov 24, 2022
RippleEffectView - A Neat Rippling View Effect

RippleEffectView Not only Uber-like animated screen background. RippleEffectView inspired by RayWenderlich.com article How To Create an Uber Splash Sc

Alex Sergeev 318 Dec 13, 2022
RetroBubbleText - A simple effect used in Retrogram which renders text with a fun bubble-style outline in SwiftUI

Retro Bubble Text This is a simple effect used in Retrogram which renders text w

Simeon Saëns 5 Aug 29, 2022
(Animate CSS) animations for iOS. An easy to use library of iOS animations. As easy to use as an easy thing.

wobbly See Wobbly in action (examples) Add a drop of honey ?? to your project wobbly has a bunch of cool, fun, and easy to use iOS animations for you

Sagaya Abdulhafeez 150 Dec 23, 2021
(Animate CSS) animations for iOS. An easy to use library of iOS animations. As easy to use as an easy thing.

wobbly See Wobbly in action (examples) Add a drop of honey ?? to your project wobbly has a bunch of cool, fun, and easy to use iOS animations for you

Sagaya Abdulhafeez 150 Dec 23, 2021
MGFlipView allows to create flipping view in easy way without worrying about flipping animation and flipping logic.

MGFlipView About If you are looking for an easy way of implement 3D flipping view, you are in the right place. MGFlipView allows to create flipping vi

Maciej Gomółka 47 Sep 28, 2022
SYBlinkAnimationKit is a blink effect animation framework for iOS, written in Swift.

SYBlinkAnimationKit is a blink effect animation framework for iOS, written in Swift ?? Demo There are 5 types of animation for component. border borde

Shohei Yokoyama 126 Oct 28, 2021
🎨 Gradient animation effect like Instagram

Pastel ?? Gradient animation effect like Instagram Example override func viewDidLoad() { super.viewDidLoad() let pastelView = PastelView(fram

Cruz 3.4k Jan 1, 2023
Genie - A Playground to recreate the macOS Genie Effect.

Genie A Playground to recreate the macOS Genie Effect. For more information, please read the accompanying blog post: Recreating the macOS Genie Effect

Harshil Shah 66 Nov 18, 2022
Library for creating swipe actions for any SwiftUI View

SwipeActions Library for creating swipe actions for any SwiftUI View, similar to

Alexander Kraev 24 Dec 26, 2022
Allows a swipe on any part of the screen to start an interruptible pop animation to the previous view

Lazy Pop SwiftUI Swiping on any part of the screen starts an interruptible pop animation to the previous view. Forked from https://github.com/rishi420

Joe Hinkle 150 Dec 18, 2022
A lightweight loading animation that can be applied to any SwiftUI view with 1 line of code.

SimpleAFLoader A lightweight loading animation that can be applied to any SwiftUI view with 1 line of code. All animations are built using the SwiftUI

Fahim Rahman 2 Aug 25, 2022
A collection of animations for iOS. Simple, just add water animations.

DCAnimationKit A collection of animations for iOS Simply, just add water! DCAnimationKit is a category on UIView to make animations easy to perform. E

Dalton 797 Sep 23, 2022
Gravity is a simple Swift Package Manager to add gravity to UI objects easily.

Gravity -- Gravity is a simple Swift Package to add gravity to UI objects easily. -- How to use: Add a new Swift Package from XCode and paste the url

alberto 1 Nov 23, 2021
Letters animation allows you to click on different letters and accordingly it will animate letters in a cool way. It has a very attractive UI and is very easy to use.

Letters Animation Cool Letters Animation in iOS written in Swift. Preview Table of content :- Description How to add in your project Requirement Licen

MindInventory 31 Oct 4, 2022
Numbers animation allows you to click on different numbers and accordingly it will animate numbers in a cool way. It has a very attractive UI and is very easy to use.

Numbers Animation Cool Numbers Animation in iOS written in Swift. Preview Table of content :- Description How to add in your project Requirement Licen

MindInventory 31 Oct 4, 2022
Reading animation allows you to click on the different page numbers and accordingly it will animate page changes in a cool way. It has a very attractive UI and is very easy to use.

Reading Animation Cool Reading Animation in iOS written in Swift. Preview Table of content :- Description How to add in your project Requirement Licen

MindInventory 42 Oct 4, 2022