Scaling svg using animate makes the svg blurry

[KarimFikani]

I'm trying to make the SVG animate from one transform matrix to another. Mainly my transform matrices contain just scaling. When I run the following code and tap the svg becomes blurry when scaling up but at the end of the animation it would look correct. The problem is the in-between that is messed up. Is there a way to solve this problem? Am I doing the animation properly?

Example:

class SVGExampleView: MacawView {
    
    var image: Node!
    
    required init?(coder aDecoder: NSCoder) {
        image = SVGParser.parse(path: "Animals/duck50x50")!
        image.place = .scale(sx: 7, sy: 7)
        
        super.init(node: image, coder: aDecoder)
        
        let gesture = UITapGestureRecognizer(target: self, action:  #selector (self.onTap (_:)))
        self.addGestureRecognizer(gesture)
    }
    
    func onTap(_ sender:UITapGestureRecognizer) {
        let toTransform: Transform = .scale(sx: 10, sy: 10)
        
        image.placeVar.animate(from: image.place, to: toTransform, during: 2, delay: 1)
        
    }  
}

[ystrot]

Hey! This issue occurs because of two things:

1. You originally use very small (50x50) image.
2. We're using native iOS animation which use super-fast raster scaling during animation.

The easiest way to fix this would be to use following trick:

1. Make your image 10x bigger by editing your SVG file. You can attach your file here and I'll show how to do this easily.
2. Once you'll parse this SVG, you need to scale it down:

image.place = .scale(sx: 0.7, sy: 0.7)

And then scale it back to the original size during animation:

let toTransform = Transform.identity

This will fix blurring.

[KarimFikani]

@ystrot any plans of implementing the scale (from small to big) anytime soon?

[vhailor13]

Hi @KarimFikani,
Right now I am working on a blurry scale problem solution, so some news will available in a few days.

[KarimFikani]

@vhailor13 that is great news thx!

[vhailor13]

It is a bit tricky to create optimised version without blurring. But we are still looking into it. I can suggest to use Contents Animation, from master branch, you can use it like this:

    
    var imageGroup: Group!
    var image: Node!
    
    required init?(coder aDecoder: NSCoder) {
        let image = SVGParser.parse(path: "Animals/duck50x50")!
        image.place = .scale(sx: 7, sy: 7)
        imageGroup = [image].group()
        
        super.init(node: imageGroup, coder: aDecoder)
        
        let gesture = UITapGestureRecognizer(target: self, action:  #selector (self.onTap (_:)))
        self.addGestureRecognizer(gesture)
    }
    
    func onTap(_ sender:UITapGestureRecognizer) {
        let toTransform: Transform = .scale(sx: 10, sy: 10)
        let fromTransform = image.place
        let imageNode = image!
        
        imageGroup.contentsVar.animate({ t in
            imageNode.place = fromTransform.interpolate(toTransform, progress: t)
            return [imageNode]
            
        }, during: 2, delay: 1)
    }
}

[vhailor13]

Hello @KarimFikani , anti-blur logic was added recently to separate branch, you can test it via pod

pod "Macaw", :git => "https://github.com/exyte/Macaw.git", :branch => 'animation_blur_fix'

[KarimFikani]

@vhailor13 it works! Thanks a lot! Will do more tests to see the performance and test with other svgs but the current solution looks very good 👍