Shake Animation View - Starting Position wrong with Auto layout

[wuf810]

Hi,

With a Shake animation embedded in a ViewControler that has Auto Layout enabled. the starting position for the Shake Animation view is incorrect.

Best way to see this in action is to take the demo app, turn on Autolayout for the Animnation Table View Controller. For the Shake view itself, change the Delay attribute to 4 seconds.

Now when you run the app, you will see the Shake view is offset to the left - probably it's starting position for the shake but this should not happen until the animation is active i.e. after the animation actually starts?

[wuf810]

Here is an image of the issue. NB I have tried applying various constraints but nothing I've tried "fixes" the incorrect start position so far.

[wuf810]

Ok it seems this problem occurs with other animations too - try Pop with a delay to see it's starting position.

So the question is, is this an issue with Auto Layout and missing constraints or an issue with Canvas?

[wozuo]

hey @wuf810 I have the exact same issue too, not in the example app but when I'm implementing the pop animation into an app im developing right now. The starting position is also wrong and then it flips to the upper left.
Also a weird thing: When I'm building and running the app on my iPhone the first time it animates (wrong though as described before) but when I'm closing the app and reopen it it only animates a little or not at all. Do you have this problem as well?

[wuf810]

Hi @gizmou

Sorry I've not done enough experimenting to confirm your other issue. I'll check soon

NB The issue is only visible in the Demo app by

1. Turning Auto layout on
2. Setting a delay to the animation.

I hope one of the developers can investigate this issue and offer a fix.

Thanks, M.

[wuf810]

Proposed fix:

For each animation, before any transform is applied, add the following line:

view.translatesAutoresizingMaskIntoConstraints = YES;

This seems to fix the issue regardless of whether Auto Layout is set to On or Off for the ViewController. However I do not know enough about auto layout as to why this works and whether there would be other side effects.

[wozuo]

Thanks for your fix! When I'm setting some of the animations directly the interface builder (so the animaions get executed when I open the app) where do I put "view.translatesAutoresizingMaskIntoConstraints = YES;" ? In the "viewWillAppear" method?

[wuf810]

I'm not sure at what point the runtime attributes execute but yes worth trying in viewWillAppear. You will obviously need an outlet to the view

self.viewToAnimate. translatesAutoresizingMaskIntoConstraints = YES

NB I am hoping the Project Owners will add this to each animation itself so we don't have to do this ourselves.

[wozuo]

Ok I will try that later today and will report back how it went.
Yes hopefully they'll add it soon.

[jamztang]

Thanks, do you guys want to make a pull request for this fix so it can be attributed?

[wuf810]

I'm not worried about attribution and to be honest completely over run at the moment with other work. So if you want to make the changes yourself, I am happy for you to do so. If not it will take me some time.

Thanks again for a great project.

[wozuo]

@wuf810 @jamztang alright I finally tried it (sorry it took so long). I tried your suggestion with self.splashView.translatesAutoresizingMaskIntoConstraints = YES; but it doesn't really work. I try to do an animation right at the start when the application launches. I have a view and an outlet to this view (called splashView). Then in the viewDidLoad method I try to add a picture to this view like so:

UIImage *image = [UIImage imageNamed:@"somepicture.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
imageView.frame = self.splashView.bounds;
[self.splashView addSubview:imageView];

And then I try to animate:

CSAnimationView *animationView = [[CSAnimationView alloc] initWithFrame:CGRectMake(27, 263, 268, 83)];
self.splashView.translatesAutoresizingMaskIntoConstraints = YES;
animationView.duration = 0.5;
animationView.delay = 0;
animationView.type = CSAnimationTypePop;
[self.splashView addSubview:animationView];
[animationView startCanvasAnimation];

The picture shows but it doesnt animate at all. Did I miss something in my code? Thanks for taking the time.

[jamztang]

It seems that the animationView you create is separate from the imageView. Try adding your imageView as a subview of animationView @gizmou

[wozuo]

@jamztang Thank you, but I've already tried that. You mean like this?
[animationView addSubview:imageView];
[self.splashView addSubview:animationView];
[animationView startCanvasAnimation];
If I'm not mistaken. Doest change anything, it should work though imo.

[jamztang]

Ok, so far in my understanding Autolayout requires to animate the constant variable, now Canvas were animating frames and positions.

To make Canvas support constraints, we probably have to let CSAnimationView knows which constant to animate. I don't quite have a solution right now to keep things simple yet..

It most probably require a major update on how it's currently written, which I am sorry that mostly won't happen too soon due to our current availability. So for now the best description is to tag that current version of Canvas can only work well without autolayout.

[jamztang]

Got a chance to get to my computer to work on Canvas, I've created a branch it seems like I don't have the issue @gizmou mentioned about.

Confirmed that @wuf810 solution works on iOS 7 but it will warns about constraints ambiguity everytime Canvas tried to animate a view. Will take a bit more time for a better solution like stated above.

[salazarseijas]

Hi, I have some troubles whit Canvas when I try to open PPT, PDF or another kind of files, when I login as a student and download some of the archive, every of them are broken, Power point says that the archive is Corrupt, can you help me please?

[brod-ie]

1.5 years later and still no fix for this.. Project looks all but abandoned.

@jamztang would you be interested in letting someone else maintain this project?

[thongtran715]

Hi guys
I can't import Canvas in my viewController after installing pod file.