Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wrong animation at start of animation #549

Open
1 task done
creactit opened this issue Sep 15, 2023 · 5 comments
Open
1 task done

Wrong animation at start of animation #549

creactit opened this issue Sep 15, 2023 · 5 comments

Comments

@creactit
Copy link

Description

Hi,
I have added skeleton on collectionview cell.

At start of animation I have two problems:

  1. On my cell the labels and button are centered but at start of skeleton I see the entering animation from left
  2. While step 1 is completed the skeleton animation it's wrong (forever top/down animation).

What type of issue is this? (place an x in one of the [ ])

  • bug

Requirements (place an x in each of the [ ])

  • [ X] I've read and understood the Contributing guidelines and have done my best effort to follow them.
  • [ X] I've read and agree to the Code of Conduct.
  • [ X I've searched for any related issues and avoided creating a duplicate issue.

Bug Report

Filling out the following details about bugs will help us solve your issue sooner.

SkeletonView Environment:

SkeletonView version: 1.30.4
Xcode version: 14.2
Swift version: 5.7.2

Steps to reproduce:

Please replace this with the steps to reproduce the behavior.

  1. Create collectionview cell with centered label
  2. Apply skeleton at cell

Expected result:

Don't see animation from left to right
Don't see incorrect animation

1 2 3
@Serg-Pogrebnyak
Copy link

same on my end, here a video with a bug
cell created in a xib

skeleton.bug.mp4

@creactit
Copy link
Author

Yes the problem it's the same of top left cell

@Serg-Pogrebnyak
Copy link

and also in the video, you can see when the animation starts from the default gradient (from top to bottom) and then switches on the animation which was sent as a parameter (left to right)

@Serg-Pogrebnyak
Copy link

So, looks like I found the problem and fixed it on my end, here are my solution and description of why it's happening:
All skeletons it's a layers, and they build on the fly recursively, as you know at some time application UI is not ready and as a result, skeletons layers has incorrect frame and bounds. In the library, they make swizzling of the UIView.layoutSubviews method, so when the system calls layoutSubviews it changes in the runtime on their, and at this time skeletons update their frame and bounds. But in viewWillAppear, we already have the final UI, but layoutSubviews will be called slightly late, that's why you will see the old position and animated change of the skeleton view.

To avoid this I made two things:

  1. In the func startTransition(transitionBlock: @escaping () -> Void) function, I added layoutIfNeeded() to build the finish UI and avoid animation change;
    Снимок экрана 2023-09-19 в 19 14 09
  2. In
    func recursiveShowSkeleton (skeletonConfig config: SkeletonConfig, root: UIView? = nil)
    and
    func recursiveUpdateSkeleton (skeletonConfig config: SkeletonConfig, root: UIView? = nil)
    functions I added the layoutSkeletonIfNeeded() function, this force call will update the frame and bounds set all skeletons in the correct position at THIS moment, and does not wait when the system calls layoutSubviews(), as a result when the controller will be presented, you will see correct position of your skeletons.
    Снимок экрана 2023-09-19 в 19 14 40

matstevenson pushed a commit to matstevenson/SkeletonView-debug that referenced this issue Feb 5, 2024
nazadigio added a commit to nazadigio/SkeletonView that referenced this issue Feb 22, 2024
@peterpaulis
Copy link

this should make it into the release

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants