Skeleton Loader Shimmer Effect (Swift/iOS)

แชร์
ฝัง
  • เผยแพร่เมื่อ 25 พ.ย. 2024

ความคิดเห็น • 37

  • @PauloSilva252
    @PauloSilva252 3 ปีที่แล้ว +3

    This was one of the few videos where I could really understand how to do this without using some shady framework that only works for very specific and simple cases. Thank you!

    • @swiftarcade7632
      @swiftarcade7632  3 ปีที่แล้ว

      You are very welcome Paulo. Thank you for the comment.

  • @Vakavadim
    @Vakavadim 11 หลายเดือนก่อน

    Thank you! Great way to implement shimmer by native.

  • @AiltonLessa-bk2ln
    @AiltonLessa-bk2ln 10 หลายเดือนก่อน

    Thank you for saving my time!

  • @swoleavocado
    @swoleavocado 3 ปีที่แล้ว +2

    I'm looking forward to that data structures course. I noticed you have a Java data structures course but I'm not familiar with Java.

    • @swiftarcade7632
      @swiftarcade7632  3 ปีที่แล้ว

      Yes. I have one in Java. Currently working on the Swift version. Just finished the section no BigO notation. Stay tuned :)

    • @CielLearcen
      @CielLearcen 3 ปีที่แล้ว

      @@swiftarcade7632 woah nice to hear that =), will this course contain also an algorithms section or only the data structures?

    • @swiftarcade7632
      @swiftarcade7632  3 ปีที่แล้ว

      @@CielLearcen Data structure and algorithms :)

    • @swiftarcade7632
      @swiftarcade7632  3 ปีที่แล้ว +1

      Hi Avocado - just finished the data structure and algorithms course. You can find it here. Be sure to use this link for a special coupon just for you :) www.udemy.com/course/the-swift-arcade-data-structures-and-algorithms-bootcamp/?couponCode=SWIFTARCADE

    • @swiftarcade7632
      @swiftarcade7632  3 ปีที่แล้ว +1

      Hi DevKit. Data structures and algorithms course is ready to go. Special link for you :) www.udemy.com/course/the-swift-arcade-data-structures-and-algorithms-bootcamp/?couponCode=SWIFTARCADE

  • @swoleavocado
    @swoleavocado 3 ปีที่แล้ว +3

    I've never heard this effect called shimmer. I know it as a skeleton loader. Perhaps, you may want to add skeleton loader to the description for organic search.

    • @swiftarcade7632
      @swiftarcade7632  3 ปีที่แล้ว

      Great point Avacado. Just updated title and description. Thank you so much!

    • @CielLearcen
      @CielLearcen 3 ปีที่แล้ว

      yep, also i've known this from the Skeleton Lib

    • @JakeHawken
      @JakeHawken ปีที่แล้ว

      The overall practice is called skeleton loading. The specific effect on the individual views is a shimmer

  • @j0seph672
    @j0seph672 3 ปีที่แล้ว

    Thanks very helpful

  • @yudhasetyaji7336
    @yudhasetyaji7336 3 ปีที่แล้ว

    thank you😄

    • @swiftarcade7632
      @swiftarcade7632  3 ปีที่แล้ว

      Very welcome Yudha. Thanks for stopping by.

  • @Roam-The-Road
    @Roam-The-Road 3 ปีที่แล้ว

    Hey man im loving the videos a lot. In the future, you think you could do a video and teach us Constraints both programmatically and in storyboard for me it always causes issues because they always conflict it would super helpful.

    • @swoleavocado
      @swoleavocado 3 ปีที่แล้ว

      a lot of the conflicts are caused by temporary constraints you have no control over. The best thing to do is change the priority programmatically of the first constraint being broken to resolve the issue--sometimes you might need to do this to two constraints.
      First declare var. Then, assign the constraint, and then, change the priority.
      var bottom: NSLayoutConstraint!
      bottom = heading.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -7.5)
      bottom.isActive = true
      bottom.priority = UILayoutPriority(999)
      to animate, change the constant. e.g. bottom.constant = 12
      This will save you HOURS

    • @swiftarcade7632
      @swiftarcade7632  3 ปีที่แล้ว

      @@swoleavocado Great tip. Thx Avocado!

    • @swiftarcade7632
      @swiftarcade7632  3 ปีที่แล้ว

      Thanks Zach. No promises but I will see what I can do. Cheers.

  • @bijancronin5142
    @bijancronin5142 3 ปีที่แล้ว

    Hi, any thoughts on the UX for the state where we need to wait for a network call to initially get the number of rows?

    • @swiftarcade7632
      @swiftarcade7632  3 ปีที่แล้ว

      Hi Bijan - yes. When the skeleton is loading, I like to display enough table view skeleton rows to fill the screen. The user can still scroll. They just can't select. So if they tap a skeleton row while its loading, nothing will happen. Cheers!

  • @mattdamon2532
    @mattdamon2532 3 ปีที่แล้ว

    Hello Jonathan, thank you for the beautiful video!
    I have a problem when I enable dark mode, the animation is not working, what should I do?

    • @swiftarcade7632
      @swiftarcade7632  3 ปีที่แล้ว

      Hmmm the animation should work the same (regardless of dark or light mode). Can you confirm by running the app in one and then going Shift+Command+A to flip to the other? Usually when animations don't show for me it is because the view has no size (or rather the size is zero).

    • @mattdamon2532
      @mattdamon2532 3 ปีที่แล้ว

      Thank you so much for you reply Jonathan, I just made a ternary operator to check if the app in dark mode or light, and assigned color literal to the gradient colors.

    • @swiftarcade7632
      @swiftarcade7632  3 ปีที่แล้ว +1

      @@mattdamon2532 Perfect! Glad it worked out.

  • @CyberMew
    @CyberMew 2 ปีที่แล้ว

    Thanks for the tutorial, found it via google by looking for skeleton UI so your SEO worked. Good idea to delay the beginTime for the views on the right so we can kinda fake a flow effect. Any idea how to get the moving shimmering effect? This seems to basically animate the colours as a whole, as I don’t see the CAGradientLayer’s colors being used…

    • @swiftarcade7632
      @swiftarcade7632  2 ปีที่แล้ว

      The color animation happens in the makeAnimationGroupMethod with these two lines here: anim1.fromValue = UIColor.gradientLightGrey.cgColor
      anim1.toValue = UIColor.gradientDarkGrey.cgColor

    • @CyberMew
      @CyberMew 2 ปีที่แล้ว

      @@swiftarcade7632 will this get the same shimmering effect as Facebook android library shimmer?

    • @swiftarcade7632
      @swiftarcade7632  2 ปีที่แล้ว

      @@CyberMew Good question. Not sure as I haven't seen those. But if you check the video you can see and compare. Or even run the source code.

    • @CyberMew
      @CyberMew 2 ปีที่แล้ว

      @@swiftarcade7632 would be great if you can make a tutorial video on this!