The Wayback Machine - https://web.archive.org/web/20200902032756/https://github.com/Juanpe/SkeletonView/issues/318
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

Custom animation on showAnimatedSkeleton not working #318

Open
ricardoisidro opened this issue Aug 29, 2020 · 1 comment
Open

Custom animation on showAnimatedSkeleton not working #318

ricardoisidro opened this issue Aug 29, 2020 · 1 comment

Comments

@ricardoisidro
Copy link

@ricardoisidro ricardoisidro commented Aug 29, 2020

What did you do?

Trying to create a showAnimatedSkeleton, where solid color animation change from one color to another:

What did you expect to happen?

Views displaying custom backgroundColor CAAnimation.

What happened instead?

Skeletonable views take default color (clouds) while animation is on, and custom animation is ignored.

Steps to reproduce the behavior

  1. Implement showAnimatedSkeleton as follows works fine (using default solid animation):
extension UIView {
    func showSkeletonLoader(cornerRadius: Float = 8) {
        let color = UIColor(red: 0.97, green: 0.98, blue: 1.00, alpha: 1.00)
        SkeletonAppearance.default.multilineHeight = 8
        SkeletonAppearance.default.multilineSpacing = 10
        SkeletonAppearance.default.multilineLastLineFillPercent = 70
        SkeletonAppearance.default.multilineCornerRadius = 8
        self.skeletonCornerRadius = cornerRadius
        return self.showAnimatedSkeleton(usingColor: color, transition: .crossDissolve(0.25))
    }
}
  1. Modifying function, adding custom animation:
extension UIView {
    func showSkeletonLoader(cornerRadius: Float = 8) {
        //let color = UIColor(red: 0.87, green: 0.88, blue: 0.94, alpha: 1.00)
        SkeletonAppearance.default.multilineHeight = 8
        SkeletonAppearance.default.multilineSpacing = 10
        SkeletonAppearance.default.multilineLastLineFillPercent = 70
        SkeletonAppearance.default.multilineCornerRadius = 8
        self.skeletonCornerRadius = cornerRadius
        return self.showAnimatedSkeleton(animation: { (layer) -> CAAnimation in
            let darkerColor = UIColor(red: 222.0 / 255.0, green: 225.0 / 255.0, blue: 239.0 / 255.0, alpha: 1.0)
            let lighterColor = UIColor(red: 0.97, green: 0.98, blue: 1.00, alpha: 1.00)
            let pulseAnimation = CABasicAnimation(keyPath: #keyPath(CALayer.backgroundColor))
            pulseAnimation.fromValue = darkerColor
            pulseAnimation.toValue = lighterColor
            pulseAnimation.duration = 1
            pulseAnimation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
            pulseAnimation.autoreverses = true
            pulseAnimation.repeatCount = .infinity
            pulseAnimation.isRemovedOnCompletion = false
            return pulseAnimation
        }, transition: .crossDissolve(0.25))
    }
}
  1. Animation stops working

SkeletonView Environment

SkeletonView version: 1.8.7
Xcode version: 11.3
Swift version: 4.0

@Juanpe Juanpe self-assigned this Sep 1, 2020
@Juanpe
Copy link
Owner

@Juanpe Juanpe commented Sep 1, 2020

Hi @ricardoisidro, I'm going to check it ASAP, let you know when I've more details

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.