Forum Xamarin.Forms

Moving an image from bottom to top.

shubham1shubham1 Member ✭✭✭

Hi Everyone,
I want to use an image as it will move from bottom to top when the App will start (the First time if the app is killed then It will show again when the app is started).
I saw some youtube videos and some sample but I didn't get what actually I want.

help

Thanks in advance.

Answers

  • ManojkumarMaliManojkumarMali USMember ✭✭✭
    edited September 2018

    Hi,

    You can achieve this by using animation effects.
    refer this

    Xamarin provide different methods for animating controls like;
    FadeTo, RotateTo, ScaleTo, TranslateTo etc.

    In your case, you want to move your control, so you can use TranslateTo().
    await view.TranslateTo(view.TranslationX, view.TranslationY - Top, 500, Easing.Linear);

    here, view is your image that you want to move.

    For more details refer below example;
    Xamarin-Form-SplashScreen-Animation

  • shubham1shubham1 Member ✭✭✭
    edited September 2018

    Hi @ManojkumarMali , I want to show a moving image,

    which will move from bottom to top.

    any idea.

  • JohnHardmanJohnHardman GBUniversity admin
    edited September 2018

    @shubham1 said:
    Hi @ManojkumarMali , I want to show a moving image,

    which will move from bottom to top.

    any idea.

    @ManojkumarMali said:
    In your case, you want to move your control, so you can use TranslateTo().
    await view.TranslateTo(view.TranslationX, view.TranslationY - Top, 500, Easing.Linear);

  • shubham1shubham1 Member ✭✭✭

    @JohnHardman , I didn't get you.

  • JohnHardmanJohnHardman GBUniversity admin

    @shubham1 said:
    @JohnHardman , I didn't get you.

    @ManojkumarMali has answered your question already. Try what @ManojkumarMali said. If you get errors when doing that, ask more specific questions about the errors.

  • shubham1shubham1 Member ✭✭✭

    @JohnHardman said:

    @shubham1 said:
    @JohnHardman , I didn't get you.

    @ManojkumarMali has answered your question already. Try what @ManojkumarMali said. If you get errors when doing that, ask more specific questions about the errors.

    I implement that but the thing is my image is not moving.

    here is the code

    public partial class SplashScreenPage : ContentPage
    {
        public SplashScreenPage()
        {
            InitializeComponent();
        }
        protected async override void OnAppearing()
        {
            base.OnAppearing();
           // await logoImage.TranslateTo(logoImage.TranslationX, logoImage.TranslationY , 500, Easing.Linear);
            await Animate.BallAnimate(this.logoImage, 50, 10, 5);
           // await logoImage.TranslateTo(logoImage.TranslationX, logoImage.TranslationY , 500, Easing.Linear);
        }
    
    }
    
     public class Animate
    {
        //
        public static async Task BallAnimate(View view, int Top, int reduce, int time)
        {
    
            await view.RelRotateTo(360, 1000);
    
            do
            {
                //TranslateTo(view.TranslationX, view.TranslationY - Top, 500, Easing.Linear)
                await view.TranslateTo(view.TranslationX, view.TranslationY - Top, 800, Easing.Linear);
                //await view.TranslateTo(view.TranslationX, view.TranslationY - Top, 500, Easing.Linear);
                // await view.TranslateTo(view.TranslationX, view.TranslationY + Top, 300, Easing.CubicIn);
    
                //await view.TranslateTo(view.TranslationX, view.TranslationY - Top, 500, Easing.CubicOut);
    
               // await view.TranslateTo(view.TranslationX, view.TranslationY + Top, 300, Easing.CubicIn);
    
                Top = Top - reduce;
                time++;
            } while (time != 0);
    
    
        }
    }
    

    here is the screen shot--

  • JohnHardmanJohnHardman GBUniversity admin

    @shubham1 said:

    @JohnHardman said:

    @shubham1 said:
    @JohnHardman , I didn't get you.

    @ManojkumarMali has answered your question already. Try what @ManojkumarMali said. If you get errors when doing that, ask more specific questions about the errors.

    I implement that but the thing is my image is not moving.

    TranslateTo works for me. To work out what is happening in your code, increase the timeout value by a factor of 10 (so that you can see the animation happening slowly), and use the debugger to see what values the first two arguments have that you pass to TranslateTo. You might need to consider what the parent is of your image in the UI hierarchy - that's not shown in your post, so I cannot see if it would be an issue.

  • shubham1shubham1 Member ✭✭✭

    what the parent is of your image in the UI hierarchy I didn't get this.
    @JohnHardman

  • ManojkumarMaliManojkumarMali USMember ✭✭✭
    edited October 2018

    @shubham1 said:
    what the parent is of your image in the UI hierarchy I didn't get this.

    The parent control/layout of your image.
    Ex:
    <StackLayout> <Image source="abc.png"/> </StackLayout>
    Here <StackLayout> is parent of image.

  • shubham1shubham1 Member ✭✭✭

    Okay. @ManojkumarMali here is my xaml page code.

     <ContentPage.Content>
    
        <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
    
            <Image Source="smart_jar_icon.png" HeightRequest="150" WidthRequest="150" x:Name="logoImage"></Image>
    
        </StackLayout>
    
    </ContentPage.Content>
    
Sign In or Register to comment.