How to do translation animation?

[kruyvanna]

Hi, I want to animate cardview in the example project

    let cardView: CardView = CardView()

    // Title label.
    let titleLabel: UILabel = UILabel()
    titleLabel.text = "Welcome Back!"
    titleLabel.textColor = MaterialColor.blue.darken1
    titleLabel.font = RobotoFont.mediumWithSize(20)
    cardView.titleLabel = titleLabel

    // Detail label.
    let detailLabel: UILabel = UILabel()
    detailLabel.text = "It’s been a while, have you read any new books lately?"
    detailLabel.numberOfLines = 0
    cardView.detailView = detailLabel

    // Yes button.
    let btn1: FlatButton = FlatButton()
    btn1.pulseColor = MaterialColor.blue.lighten1
    btn1.pulseScale = false
    btn1.setTitle("YES", forState: .Normal)
    btn1.setTitleColor(MaterialColor.blue.darken1, forState: .Normal)

    // No button.
    let btn2: FlatButton = FlatButton()
    btn2.pulseColor = MaterialColor.blue.lighten1
    btn2.pulseScale = false
    btn2.setTitle("NO", forState: .Normal)
    btn2.setTitleColor(MaterialColor.blue.darken1, forState: .Normal)

    // Add buttons to left side.
    cardView.leftButtons = [btn1, btn2]

    // To support orientation changes, use MaterialLayout.
    view.addSubview(cardView)
    cardView.translatesAutoresizingMaskIntoConstraints = false
    MaterialLayout.alignFromTop(view, child: cardView, top: 100)
    MaterialLayout.alignToParentHorizontally(view, child: cardView, left: 20, right: 20)

            cardView.animate(MaterialAnimation.translateY(200))

The animation code is at the end. The animation runs, but the click position doesn't reflect the new position of the view.

[daniel-jonathan]

Try before you run the animation to use the cardView.layoutIfNeeded() method, as your coordinates may not be updated yet, since you are using AutoLayout.

cardView.layoutIfNeeded()
cardView.animate(MaterialAnimation.translateY(200))

[daniel-jonathan]

I haven't heard back from you. If you need any further help, please reopen the issue, or create a new one. Thank you!

[kruyvanna]

hi @DanielDahan it works! thank you!

[kruyvanna]

hi sorry the animation works but the touch location and button location is not at the same position

[daniel-jonathan]

Fixed the issue :) Now making tests for the animations to confirm everything. Today's release will have this update.

[kruyvanna]

awesome!!

[daniel-jonathan]

Please checkout version 1.35.3 :)

[Matungos]

Hi,
I'm having this issue now with version 2.4.0.

I've created a UIView programmatically, set 4 NSLayoutConstraints and then perform a Motion.translateY.
Visually it works but events of views inside the UIView are attached to the old position.

I've tried calling layoutIfNeeded before animate but doesn't work.

With UIView.animate(..) is working fine.

[daniel-jonathan]

I will look into this :) Thank you.

[daniel-jonathan]

@Matungos cardView.layoutIfNeeded() this is called in Layout if you are using it. So no need. Can you provide a sample for me to test against. Because I had made a test and all worked fine. Thank you!

[Matungos]

I made this sample project https://drive.google.com/open?id=0B9S3OPPnUMK0dFpOa1pvVDB2TjQ
It's not the same code that I'm using but it have this problem too.

The hitTest function is overridden in the custom view to test it out.

Thanks.

[daniel-jonathan]

@Matungos Thank you, I will take a look.

[daniel-jonathan]

Looking now :)

[daniel-jonathan]

I confirmed an issue, I will be working on this today. Thank you :)

[daniel-jonathan]

A proposed fix is now in development. I will need to test this more. If you can too that would be great :) @Matungos

[Matungos]

It seems to be working with those changes. But I've found another issue but I don't know if it is related to the newer changes.
For instance: http://i.imgur.com/ICueRYz.png I've draw a red circle in the zone where if I tap there, the clear button on the background receive the hit instead of the upper one, the one in the blue searchbar.
Thank you @DanielDahan for your work.
I can't help you more because I'm a newbie in iOS and I don't speak English very well :)

[daniel-jonathan]

I don't see a clear button. Can you send me a sample?

[daniel-jonathan]

The button spans to more than the x, you can see this by setting a background. I think this is what you are seeing.

[daniel-jonathan]

I am going to close this issue and prepare it for release :) Thank you!

[Matungos]

I'll try to describe better.
In this case I have 2 search bars, one below the other.
Tapping the clear button of the top searchbar receive the tap normally.
At some moment I animate the bar on the background, but leaving they overlapped (purposely, if they are completely separated there is no issue, both tap callbacks are correctly called).
Tapping the same (top) clear button trigger the callback for the clear button on the bottom-background.
I can update the previous sample project if you want.

[daniel-jonathan]

Ah I understand. I Don't see how that could really be a Material thing as Material uses the standard UIButton and target handling. There isn't any special hit target setup. If you would like to send a sample over, you are welcome to. In order to help you, I need a reproducible sample. Also, if you are using a SearchBarController, it is not possible to have the Bar actually under the other. The way it is designed, is that it cuts the portion not seen off, so it is not actually under. They are beside each other. In order to have it under, you would need to set the display property to .full. Send a sample to [email protected] and if you would like to continue the discussion, use Material Gitter :)

[daniel-jonathan]

The fix is now available in Material 2.4.1 :) Thank you for sharing the issue :)