[V3] Flubbie : Animate your components

Welcome to the forum.

In future please only post in English as that is the only language allowed on this forum.

Thank you for your epic comment
:slight_smile:

Cool! :white_check_mark: Nice extension!

2 Likes

Nice Extension

2 Likes

Thank you @UnknownBeast , made blinking text with your extension…


with your extension i have created timer (linked with online time)

4 Likes

:grin:

nice one
1 Like

Can i have the apk for Flubbie?

its usage is so simple, you dont need one, just put one block and compile apk :grin:

Well Guys what must I do?

  • Add it to flubbie
  • Make and publish new Seprate extension named Wavie

0 voters

1 Like

It is needed for future use for create app and see which animation is good to go, So please provide apk.

1 Like

:pleading_face: Thanks for Support, Flubbie on Top 3rd on Community 1.3k Views 40 likes, its my first extension to attain that

2 Likes

V2 Coming soon with interpolators, optimzations, velocity, star x/y, end x/y & More :smiley:

6 Likes

Flubbie V2 is out !






Interpolators

  • BZR_EASE_IN
  • BZR_EASE_OUT
  • BZR_EASE_IN_OUT
  • BZR_LINEAR
  • BZR_SPRING
  • BZR_EASE_IN_SINE
  • BZR_EASE_OUT_SINE
  • BZR_EASE_IN_OUT_SINE
  • BZR_EASE_IN_QUAD
  • BZR_EASE_OUT_QUAD
  • BZR_EASE_IN_OUT_QUAD
  • BZR_EASE_IN_CUBIC
  • BZR_EASE_OUT_CUBIC
  • BZR_EASE_IN_OUT_CUBIC
  • BZR_EASE_IN_QUART
  • BZR_EASE_OUT_QUART
  • BZR_EASE_IN_OUT_QUART
  • BZR_EASE_IN_QUINT
  • BZR_EASE_OUT_QUINT
  • BZR_EASE_IN_OUT_QUINT
  • BZR_EASE_IN_EXPO
  • BZR_EASE_OUT_EXPO
  • BZR_EASE_IN_OUT_EXPO
  • BZR_EASE_IN_CIRC
  • BZR_EASE_OUT_CIRC
  • BZR_EASE_IN_OUT_CIRC
  • BZR_EASE_IN_BACK
  • BZR_EASE_OUT_BACK
  • BZR_EASE_IN_OUT_BACK
  • SPRING
  • LINEAR

Animations

  • SLIDE_LEFT
  • SLIDE_RIGHT
  • SLIDE_DOWN
  • SLIDE_UP
  • SQUEEZE_LEFT
  • SQUEEZE_RIGHT
  • SQUEEZE_DOWN
  • SQUEEZE_UP
  • FADE_IN
  • FADE_OUT
  • FADE_OUT_IN
  • FADE_IN_LEFT
  • FADE_IN_RIGHT
  • FADE_IN_DOWN
  • FADE_IN_UP
  • ZOOM_IN
  • ZOOM_OUT
  • FALL
  • SHAKE
  • POP
  • FLIP_X
  • FLIP_Y
  • MORPH
  • SQUEEZE
  • FLASH
  • WOBBLE
  • SWING
  • ALPHA
  • ROTATION
  • TRANSLATION_X
  • TRANSLATION_Y
  • SCALE_X
  • SCALE_Y

Download V2
Flubbie (25).aix (97.7 KB)

12 Likes

So, Dont Kill me, V2 Was full of bugs, So V3 is now here !

image

Repeat Mode added in aix, u can use reverse or restart

Added one property for infinite animation time
image

Fixed NullPointer Exceptions

5 Likes

Lets Make Flubbie Open Source ? :thinking:

  • Yes
  • No

0 voters

4 Likes

Flubbie is now Open Source !

Source code :

package com.kabby.v2.Flubbie;

import android.app.Activity;

import android.content.Context;

import com.google.appinventor.components.annotations.*;

import com.google.appinventor.components.common.ComponentCategory;

import com.google.appinventor.components.runtime.AndroidNonvisibleComponent;

import com.google.appinventor.components.runtime.ComponentContainer;

import com.google.appinventor.components.runtime.EventDispatcher;

import android.app.Activity;

import android.content.Context;

import com.google.appinventor.components.annotations.*;

import com.google.appinventor.components.common.*;

import com.google.appinventor.components.runtime.*;

import com.appolica.flubber.Flubber;

import android.view.View;

import static com.appolica.flubber.Flubber.AnimationPreset;

import static com.appolica.flubber.Flubber.InterpolatorProvider;

import com.appolica.flubber.listener.SimpleAnimatorListener;

import android.animation.Animator;

@DesignerComponent(

        version = 1,

        description = "",

        category = ComponentCategory.EXTENSION,

        nonVisible = true,

        iconName = "")

@SimpleObject(external = true)

//Libraries

@UsesLibraries(libraries = "flubbie.jar")

//Permissions

@UsesPermissions(permissionNames = "")

public class Flubbie extends AndroidNonvisibleComponent {

    //Activity and Context

    private Context context;

    private Activity activity;

    private int animationDuration = 2000;

    private int animationRepeatCount = 3;

    private boolean animationAutoStart = true;

    private int animationForce = 100;

    private int animationVelocity = 10;

    private float animationScaleX = 0.5f;

    private float animationScaleY = 0.9f;

    private float animationTranslateX = 0.5f;

    private float animationTranslateY = 0.9f;

    private int animationDelay = 100;

    private int animationDamping = 100;

    public Flubbie(ComponentContainer container){

        super(container.$form());

        this.activity = container.$context();

        this.context = container.$context();

    }

    @DesignerProperty(

      defaultValue = "2000",

      editorType = PropertyTypeConstants.PROPERTY_TYPE_INTEGER)

  @SimpleProperty

  public void Duration(int duration){

      animationDuration = duration;

  }

  @DesignerProperty(

      defaultValue = "3",

      editorType = PropertyTypeConstants.PROPERTY_TYPE_INTEGER)

  @SimpleProperty

  public void RepeatCount(int count){

      animationRepeatCount = count;

  }

  @DesignerProperty(

      defaultValue = "100",

      editorType = PropertyTypeConstants.PROPERTY_TYPE_INTEGER)

  @SimpleProperty

  public void Force(int force){

      animationForce = force;

  }

  @DesignerProperty(

      defaultValue = "10",

      editorType = PropertyTypeConstants.PROPERTY_TYPE_INTEGER)

  @SimpleProperty

  public void Velocity(int velocity){

      animationVelocity = velocity;

  }

  @DesignerProperty(

      defaultValue = "100",

      editorType = PropertyTypeConstants.PROPERTY_TYPE_INTEGER)

  @SimpleProperty

  public void Delay(int delay){

      animationDelay = delay;

  }

  @DesignerProperty(

      defaultValue = "100",

      editorType = PropertyTypeConstants.PROPERTY_TYPE_INTEGER)

  @SimpleProperty

  public void Damping(int damp){

      animationDamping = damp;

  }

  @DesignerProperty(

      defaultValue = "0.5",

      editorType = PropertyTypeConstants.PROPERTY_TYPE_NON_NEGATIVE_FLOAT)

      @SimpleProperty

      public void ScaleX(float scalex){

          animationScaleX = scalex;

      }

      @DesignerProperty(

      defaultValue = "0.9",

      editorType = PropertyTypeConstants.PROPERTY_TYPE_NON_NEGATIVE_FLOAT)

      @SimpleProperty

      public void ScaleY(float scaley){

          animationScaleY = scaley;

      }

      @DesignerProperty(

      defaultValue = "0.5",

      editorType = PropertyTypeConstants.PROPERTY_TYPE_NON_NEGATIVE_FLOAT)

      @SimpleProperty

      public void TranslateX(float translatex){

          animationTranslateX = translatex;

      }

      @DesignerProperty(

      defaultValue = "0.9",

      editorType = PropertyTypeConstants.PROPERTY_TYPE_NON_NEGATIVE_FLOAT)

      @SimpleProperty

      public void TranslateY(float translatey){

          animationTranslateY = translatey;

      }

  @DesignerProperty(defaultValue = "False", editorType = PropertyTypeConstants.PROPERTY_TYPE_BOOLEAN)

  @SimpleProperty

  public void AutoStart(boolean auto) {

    animationAutoStart = auto;

  }

    @SimpleFunction

    public void AnimateView(AndroidViewComponent view, Object animation, Object interpolator, int repeatMode){

         AnimationPreset anim = AnimationPreset.class.cast(animation);

        InterpolatorProvider inter = InterpolatorProvider.class.cast(interpolator);

    Flubber.with()

        .animation(anim) // Slide up animation

        .interpolator(inter)

        .repeatCount(animationRepeatCount)

        .autoStart(animationAutoStart)                   // Repeat once

        .duration(animationDuration)

        .velocity(animationVelocity)

        .scaleX(animationScaleX)

        .scaleY(animationScaleY)

        .translateX(animationTranslateX)

        .repeatMode(repeatMode)

        .translateY(animationTranslateY)

        .delay(animationDelay)

        .damping(animationDamping) 

        .force(animationForce)

        .listener(new Animator.AnimatorListener(){

                    @Override

                    public void onAnimationStart(Animator animation){

                    AnimationStarted();

                    }

                    @Override

                    public void onAnimationRepeat(Animator animation){

                    AnimationRepeated();

                    }

                    @Override

                    public void onAnimationCancel(Animator animation){

                    AnimationCancelled();

                    }

                    @Override

                    public void onAnimationEnd(Animator animation){

                    AnimationEnded();

                    }

                })                                    // Last for 1000 milliseconds(1 second)

        .createFor(view.getView())                             // Apply it to the view

        .start();

    }

    @SimpleProperty

    public int Restart(){

        return android.animation.ValueAnimator.RESTART;

    }

    @SimpleProperty

    public int Reverse(){

        return android.animation.ValueAnimator.REVERSE;

    }

    @SimpleProperty

    public int Infinite(){

        return android.animation.ValueAnimator.INFINITE;

    }

    @SimpleProperty

    public Object SlideUp(){

        return Flubber.AnimationPreset.SLIDE_UP;

    }

    @SimpleProperty

    public Object SlideLeft(){

        return Flubber.AnimationPreset.SLIDE_LEFT;

    }

    @SimpleProperty

    public Object SlideRight(){

        return Flubber.AnimationPreset.SLIDE_RIGHT;

    }

    @SimpleProperty

    public Object SlideDown(){

        return Flubber.AnimationPreset.SLIDE_DOWN;

    }

    @SimpleProperty

    public Object SqueezeLeft(){

        return Flubber.AnimationPreset.SQUEEZE_LEFT;

    }

    @SimpleProperty

    public Object SqueezeRight(){

        return Flubber.AnimationPreset.SQUEEZE_RIGHT;

    }

    @SimpleProperty

    public Object SqueezeDown(){

        return Flubber.AnimationPreset.SQUEEZE_DOWN;

    }

    @SimpleProperty

    public Object SqueezeUp(){

        return Flubber.AnimationPreset.SQUEEZE_UP;

    }

    @SimpleProperty

    public Object FadeIn(){

        return Flubber.AnimationPreset.FADE_IN;

    }

    @SimpleProperty

    public Object FadeOut(){

        return Flubber.AnimationPreset.FADE_OUT;

    }

    @SimpleProperty

    public Object FadeOutIn(){

        return Flubber.AnimationPreset.FADE_OUT_IN;

    }

    @SimpleProperty

    public Object FadeInLeft(){

        return Flubber.AnimationPreset.FADE_IN_LEFT;

    }

    @SimpleProperty

    public Object FadeInRight(){

        return Flubber.AnimationPreset.FADE_IN_RIGHT;

    }

    @SimpleProperty

    public Object FadeInDown(){

        return Flubber.AnimationPreset.FADE_IN_DOWN;

    }

    @SimpleProperty

    public Object FadeInUp(){

        return Flubber.AnimationPreset.FADE_IN_UP;

    }

    @SimpleProperty

    public Object ZoomIn(){

        return Flubber.AnimationPreset.ZOOM_IN;

    }

    @SimpleProperty

    public Object ZoomOut(){

        return Flubber.AnimationPreset.ZOOM_OUT;

    }

    @SimpleProperty

    public Object Fall(){

        return Flubber.AnimationPreset.FALL;

    }

    @SimpleProperty

    public Object Shake(){

        return Flubber.AnimationPreset.SHAKE;

    }

    @SimpleProperty

    public Object Pop(){

        return Flubber.AnimationPreset.POP;

    }

    @SimpleProperty

    public Object FlipX(){

        return Flubber.AnimationPreset.FLIP_X;

    }

    @SimpleProperty

    public Object FlipY(){

        return Flubber.AnimationPreset.FLIP_Y;

    }

    @SimpleProperty

    public Object Morph(){

        return Flubber.AnimationPreset.MORPH;

    }

    @SimpleProperty

    public Object Squeeze(){

        return Flubber.AnimationPreset.SQUEEZE;

    }

    @SimpleProperty

    public Object Flash(){

        return Flubber.AnimationPreset.FLASH;

    }

    @SimpleProperty

    public Object Wobble(){

        return Flubber.AnimationPreset.WOBBLE;

    }

    @SimpleProperty

    public Object Swing(){

        return Flubber.AnimationPreset.SWING;

    }

    @SimpleProperty

    public Object Alpha(){

        return Flubber.AnimationPreset.ALPHA;

    }

    @SimpleProperty

    public Object Rotation(){

        return Flubber.AnimationPreset.ROTATION;

    }

    @SimpleProperty

    public Object TranslationX(){

        return Flubber.AnimationPreset.TRANSLATION_X;

    }

    @SimpleProperty

    public Object TranslationY(){

        return Flubber.AnimationPreset.TRANSLATION_Y;

    }

    @SimpleProperty

    public Object ScaleX(){

        return Flubber.AnimationPreset.SCALE_X;

    }

    @SimpleProperty

    public Object ScaleY(){

        return Flubber.AnimationPreset.SCALE_Y;

    }

    @SimpleProperty

    public Object BzrEaseIn(){

        return Flubber.Curve.BZR_EASE_IN;

    }

    @SimpleProperty

    public Object BzrEaseOut(){

        return Flubber.Curve.BZR_EASE_OUT;

    }

    @SimpleProperty

    public Object BzrEaseInOut(){

        return Flubber.Curve.BZR_EASE_IN_OUT;

    }

    @SimpleProperty

    public Object BzrLinear(){

        return Flubber.Curve.BZR_LINEAR;

    }

    @SimpleProperty

    public Object BzrSpring(){

        return Flubber.Curve.BZR_SPRING;

    }

    @SimpleProperty

    public Object BzrEaseInSine(){

        return Flubber.Curve.BZR_EASE_IN_SINE;

    }

    @SimpleProperty

    public Object BzrEaseOutSine(){

        return Flubber.Curve.BZR_EASE_OUT_SINE;

    }

    @SimpleProperty

    public Object BzrEaseInOutSine(){

        return Flubber.Curve.BZR_EASE_IN_OUT_SINE;

    }

    @SimpleProperty

    public Object BzrEaseInQuad(){

        return Flubber.Curve.BZR_EASE_IN_QUAD;

    }

    @SimpleProperty

    public Object BzrEaseOutQuad(){

        return Flubber.Curve.BZR_EASE_OUT_QUAD;

    }

    @SimpleProperty

    public Object BzrEaseInOutQuad(){

        return Flubber.Curve.BZR_EASE_IN_OUT_QUAD;

    }

    @SimpleProperty

    public Object BzrEaseInCubie(){

        return Flubber.Curve.BZR_EASE_IN_CUBIC;

    }

    @SimpleProperty

    public Object BzrEaseOutCubie(){

        return Flubber.Curve.BZR_EASE_OUT_CUBIC;

    }

    @SimpleProperty

    public Object BzrEaseInOutCubie(){

        return Flubber.Curve.BZR_EASE_IN_OUT_CUBIC;

    }

    @SimpleProperty

    public Object BzrEaseInQuart(){

        return Flubber.Curve.BZR_EASE_IN_QUART;

    }

    @SimpleProperty

    public Object BzrEaseOutQuart(){

        return Flubber.Curve.BZR_EASE_OUT_QUART;

    }

    @SimpleProperty

    public Object BzrEaseInOutQuart(){

        return Flubber.Curve.BZR_EASE_IN_OUT_QUART;

    }

    @SimpleProperty

    public Object BzrEaseInQuint(){

        return Flubber.Curve.BZR_EASE_IN_QUINT;

    }

    @SimpleProperty

    public Object BzrEaseOutQuint(){

        return Flubber.Curve.BZR_EASE_OUT_QUINT;

    }

    @SimpleProperty

    public Object BzrEaseInOutQuint(){

        return Flubber.Curve.BZR_EASE_IN_OUT_QUINT;

    }

    @SimpleProperty

    public Object BzrEaseInExpo(){

        return Flubber.Curve.BZR_EASE_IN_EXPO;

    }

    @SimpleProperty

    public Object BzrEaseOutExpo(){

        return Flubber.Curve.BZR_EASE_OUT_EXPO;

    }

    @SimpleProperty

    public Object BzrEaseInOutExpo(){

        return Flubber.Curve.BZR_EASE_IN_OUT_EXPO;

    }

    @SimpleProperty

    public Object BzrEaseInBack(){

        return Flubber.Curve.BZR_EASE_IN_BACK;

    }

    @SimpleProperty

    public Object BzrEaseOutBack(){

        return Flubber.Curve.BZR_EASE_OUT_BACK;

    }

    @SimpleProperty

    public Object BzrEaseInOutBack(){

        return Flubber.Curve.BZR_EASE_IN_OUT_BACK;

    }

    @SimpleProperty

    public Object Spring(){

        return Flubber.Curve.SPRING;

    }

    @SimpleProperty

    public Object Linear(){

        return Flubber.Curve.LINEAR;

    }

    @SimpleEvent

  public void AnimationStarted() {

    EventDispatcher.dispatchEvent(this, "AnimationStarted");

  }

  @SimpleEvent

  public void AnimationRepeated() {

    EventDispatcher.dispatchEvent(this, "AnimationRepeated");

  }

  @SimpleEvent

  public void AnimationCancelled() {

    EventDispatcher.dispatchEvent(this, "AnimationCancelled");

  }

  @SimpleEvent

  public void AnimationEnded() {

    EventDispatcher.dispatchEvent(this, "AnimationEnded");

  }

}

Library :

https://mvnrepository.com/artifact/com.appolica/flubber/1.0.1

6 Likes

is it possibble to make some thing like the sidebar? slide from left side to center of screen, then after some operation, slide out back to left?How?

Its easy, align your sidebar layout to center of screen use slide in animation for showing sidebar and slide out for dismissing it

But i did not find slide in and slide out aimation, only found slide up and slide down animation.

I have put the layout in center the screen, and use slide in animtion, its working good. but when use slide down, it’s not from center to bottom, but from top to center.

Use BZR ease out interpolator