Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

How to create Frame Button (Custom Button) click animation

RedRaRedRa Member ✭✭✭
edited July 2019 in Xamarin.Forms

Hi everyone,

I am creating custom control and I want to add either standard animation or custom animation on click event on this custom control.
Control is based on Frame, but I haven't an idea how to do it ?!

If it possible it would be nice to add Custom View to Button, it will solve need to create custom event handling ...

Could you suggest how to do it or maybe suggest the standard way of doing so ?

Best Answers

  • Amar_BaitAmar_Bait DZMember ✭✭✭✭✭
    Accepted Answer
    var tapGestureRecognizer = new TapGestureRecognizer();
    
    tapGestureRecognizer.Tapped += async (s, e) => 
    {
        // more info about animations:
        // https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/animation/simple
    
        // scale the frame to x1.2
        var scaleUpAnimationTask = yourFrame.ScaleTo(1.2, 500);
        // set opacity to 0 (transparent)
        var fadeOutAnimationTask = yourFrame.FadeTo(0, 500);
    
        // wait for the 2 animations to finish...
        await Task.WhenAll(scaleUpAnimationTask, fadeOutAnimationTask);
    
        // scale the frame back to original size
        var scaleDownAnimationTask = yourFrame.ScaleTo(1, 500);
        // set opacity back to 1 (solid)
        var fadeInAnimationTask = yourFrame.FadeTo(1, 500);
    
        // wait for the 2 animations to finish...
        await Task.WhenAll(scaleDownAnimationTask, fadeInAnimationTask);
    };
    
    yourFrame.GestureRecognizers.Add(tapGestureRecognizer);
    
  • Amar_BaitAmar_Bait DZMember ✭✭✭✭✭
    edited July 2019 Accepted Answer

    Yes it is possible to do the Ripple animation in Xamarin.Forms. Is it very hard? not really. Is it as simple as you say? No (or else you would know how to do it right?)

    You'll probably need to create a Grid with a circle shape view inside (there are shapes views for Xamarin Forms look for them on Google) with a 0 scale (invisible). You detect the coordinates where the user taps, you translate that circle to those coordinates, then do a scale animation. You may also play with the circle opacity I think (from maybe 0.3 to 1). Circle background color should be translucent white (about 30-40% transparent). Once the animation finishes, you'll fade out the circle than make its scale 0 again.

    That's it.

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    Could you please post a basic demo or some code snippet?

  • Amar_BaitAmar_Bait DZMember ✭✭✭✭✭
    Accepted Answer
    var tapGestureRecognizer = new TapGestureRecognizer();
    
    tapGestureRecognizer.Tapped += async (s, e) => 
    {
        // more info about animations:
        // https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/animation/simple
    
        // scale the frame to x1.2
        var scaleUpAnimationTask = yourFrame.ScaleTo(1.2, 500);
        // set opacity to 0 (transparent)
        var fadeOutAnimationTask = yourFrame.FadeTo(0, 500);
    
        // wait for the 2 animations to finish...
        await Task.WhenAll(scaleUpAnimationTask, fadeOutAnimationTask);
    
        // scale the frame back to original size
        var scaleDownAnimationTask = yourFrame.ScaleTo(1, 500);
        // set opacity back to 1 (solid)
        var fadeInAnimationTask = yourFrame.FadeTo(1, 500);
    
        // wait for the 2 animations to finish...
        await Task.WhenAll(scaleDownAnimationTask, fadeInAnimationTask);
    };
    
    yourFrame.GestureRecognizers.Add(tapGestureRecognizer);
    
  • RedRaRedRa Member ✭✭✭

    @Amar_Bait said:

    var tapGestureRecognizer = new TapGestureRecognizer();
    
    tapGestureRecognizer.Tapped += async (s, e) => 
    {
      // more info about animations:
      // https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/animation/simple
      
      // scale the frame to x1.2
      var scaleUpAnimationTask = yourFrame.ScaleTo(1.2, 500);
      // set opacity to 0 (transparent)
      var fadeOutAnimationTask = yourFrame.FadeTo(0, 500);
    
      // wait for the 2 animations to finish...
      await Task.WhenAll(scaleUpAnimationTask, fadeOutAnimationTask);
    
      // scale the frame back to original size
      var scaleDownAnimationTask = yourFrame.ScaleTo(1, 500);
      // set opacity back to 1 (solid)
      var fadeInAnimationTask = yourFrame.FadeTo(1, 500);
    
      // wait for the 2 animations to finish...
      await Task.WhenAll(scaleDownAnimationTask, fadeInAnimationTask);
    };
    
    yourFrame.GestureRecognizers.Add(tapGestureRecognizer);
    

    Your solution does work for me, but do you know how to make the exactly the same animation as in Xamarin.Form Button on click event ?

  • Amar_BaitAmar_Bait DZMember ✭✭✭✭✭

    Button.Clicked += async (s, e) =>

  • RedRaRedRa Member ✭✭✭
    edited July 2019

    @Amar_Bait said:
    Button.Clicked += async (s, e) =>

    Yea, I understand, but I want Button animation on click event for Frame ...
    I just want to create the same animation for Frame item

  • Amar_BaitAmar_Bait DZMember ✭✭✭✭✭
    edited July 2019

    You want to animate the frame or the button? Show me your XAML and tell me which element you want animate when the button is clicked.

  • RedRaRedRa Member ✭✭✭
    edited July 2019

    @Amar_Bait said:
    You want to animate the frame or the button? Show me your XAML and tell me which element you want animate when the button is clicked.

    I want to create custom button, which on click will have similar animation as Xamarin.Forms.Button:

    public class CustomButton : Frame
    {
        public ViewButton()
        {
            var tapGestureRecognizer = new TapGestureRecognizer();
            tapGestureRecognizer.Tapped += async (s, e) =>
            {
               // ... Here should be animation similar to Xamarin.Forms.Button animation
    
               Clicked?.Invoke(s, e);
            };
           this.GestureRecognizers.Add(tapGestureRecognizer);
        }
    }
    
  • Amar_BaitAmar_Bait DZMember ✭✭✭✭✭
    edited July 2019

    Well there is no Xamarin.Forms button animation per se, button animations are implemented by the OS itself (Android has the Ripple animation, iOS the highlight I think). So I can't give you a solution on that. Just make any animation you see fit to a button. Or you can create a custom button (inherits from Button) and disable default OS animations in a custom renderer, then animate it as you like.

    Disable button animation:
    Android: https://stackoverflow.com/questions/43275507/disable-button-click-animation-withouth-setenablefalse/43275604
    iOS: https://stackoverflow.com/a/43238293

  • RedRaRedRa Member ✭✭✭

    @Amar_Bait said:
    Well there is no Xamarin.Forms button animation per se, button animations are implemented by the OS itself (Android has the Ripple animation, iOS the highlight I think). So I can't give you a solution on that. Just make any animation you see fit to a button. Or you can create a custom button (inherits from Button) and disable default OS animations in a custom renderer, then animate it as you like.

    Disable button animation:
    Android: https://stackoverflow.com/questions/43275507/disable-button-click-animation-withouth-setenablefalse/43275604
    iOS: https://stackoverflow.com/a/43238293

    Thanks for explanation, but Button animation in Android is very simple: From place where user tapped, circle starts expanding, inside the circle the color is different then outside the circle ...

    I am wondering if it possible to do with Xamarin.Forms ?
    I mean such animation like circle which expands and different color inside and outside circle ?

  • Amar_BaitAmar_Bait DZMember ✭✭✭✭✭
    edited July 2019 Accepted Answer

    Yes it is possible to do the Ripple animation in Xamarin.Forms. Is it very hard? not really. Is it as simple as you say? No (or else you would know how to do it right?)

    You'll probably need to create a Grid with a circle shape view inside (there are shapes views for Xamarin Forms look for them on Google) with a 0 scale (invisible). You detect the coordinates where the user taps, you translate that circle to those coordinates, then do a scale animation. You may also play with the circle opacity I think (from maybe 0.3 to 1). Circle background color should be translucent white (about 30-40% transparent). Once the animation finishes, you'll fade out the circle than make its scale 0 again.

    That's it.

  • Amar_BaitAmar_Bait DZMember ✭✭✭✭✭
    edited July 2019

    Found this library, it may help you (it says it supports Ripple effect):
    https://github.com/AndreiMisiukevich/TouchEffect

    Also this blog post:
    https://thisoldbrain.com/creating-a-custom-button-with-ripple-effect-in-xamarin-forms/

Sign In or Register to comment.