About

MonitorUI Example	Scroller Example	View Prototype

中文说明

Animer is a java library which designed for a better Android animation experience.（Currently is more like a view animation controller)

It contains animation curves in Android iOS Origami(POP or Rebound in Client) Principle Protopie FramerJS

Unlike Rebound，Animer didn't use Choreographer or self-building Looper for creating an Animator from scratch.

All these animation algorithm will be translated into Android's native implementation like DynamicAnimation & TimingInterpolator,which can improve the performance of animation.

It also provides a real-time controller & graph UI for tweaking parameters.

Web version(Convert Any Animation tools' parameters to Android's) —— Animer_Web

AE Script —— Animer AE

Download

Simple Demo 1

Simple Demo 2

Usage

Animer supports multiple ways of animating:

Android Native Style

  
// equal to Android's TimingInterpolator
Animer.AnimerSolver solver  = Animer.interpolatorDroid(new AccelerateDecelerateInterpolator(),600)

// similar to ObjectAnimator 
Animer animer = new Animer(myView,solver,Animer.TRANSLATION_Y,0,200);

animer.start();

// animer.cancel();

// animer.end();

FramerJS State Machine Style

// equal to Android's SpringAnimation
Animer.AnimerSolver solver  = Animer.springDroid(1000,0.5f);

Animer animer = new Animer();

// add a solver to Animer; 
animer.setSolver(solver);

// add value to different state;
animer.setStateValue("stateA",300);
animer.setStateValue("stateB",700);
animer.setStateValue("stateC",200);

// add a listener to observe the motion of the Animation
animer.setUpdateListener(new Animer.UpdateListener() {
    @Override
    public void onUpdate(float value, float velocity, float progress) {
      myView1.setTranslationX(value);
      myView2.setScaleX(1.f+value/100);
      myView2.setScaleY(1.f+value/100);
    }
});

// switch immediately
animer.switchToState("stateA");

// or animate to state value
// animer.animateToState("stateB");

Facebook Rebound Style

// equal to Facebook Origami POP Animation
Animer.AnimerSolver solver  = Animer.springOrigamiPOP(5,10);

Animer animer = new Animer(myView,solver,Animer.SCALE);

// setup a listener to add everything you want
animer.setUpdateListener(new Animer.UpdateListener() {
    @Override
    public void onUpdate(float value, float velocity, float progress) 
      myView.setScaleX(value);
      myView.setScaleY(value);
    }
});

animer.setCurrentValue(1.f);

boolean isScaled = false;

myView.setOnClickListener(view -> {

    if(!isScaled){
        animer.setEndValue(0.5);

    }
    else{
        animer.setEndValue(1);
    }
    isScaled = !isScaled;
});
  

Add animers to configUI

init in xml

<com.martinrgb.animer.monitor.AnConfigView
    android:id="@+id/an_configurator"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

add animers' config in java

AnConfigView mAnimerConfiguratorView = (AnConfigView) findViewById(R.id.an_configurator);
AnConfigRegistry.getInstance().addAnimer("Card Scale Animation",cardScaleAnimer);
AnConfigRegistry.getInstance().addAnimer("Card TranslationX Animation",cardTransXAnimer);
mAnimerConfiguratorView.refreshAnimerConfigs();

Add custom animation curve presets

first you need clean all the solver configs,then add yourselves.

AnConfigRegistry.getInstance().removeAllSolverConfig();
AnConfigRegistry.getInstance().addSolver("Preset1",Animer.springDroid(500.0f,0.96f));
AnConfigRegistry.getInstance().addSolver("Preset2",Animer.flingDroid(400.f,0.95f));
...
mAnimerConfiguratorView.refreshAnimerConfigs();

Supported View Propertys:

Animer.TRANSLATION_X
Animer.TRANSLATION_Y
Animer.TRANSLATION_Z
Animer.SCALE // equal to SCALE_X + SCALE_Y
Animer.SCALE_X
Animer.SCALE_Y
Animer.ROTATION
Animer.ROTATION_X
Animer.ROTATION_Y
Animer.X
Animer.Y
Animer.Z
Animer.ALPHA

Supported Animators(as AnimerSolver):

Animer.springDroid(stiffness,dampingratio)                              // Android Dynamic SpringAnimation
Animer.flingDroid(velocity,friction)                                    // Android Dynamic FlingAnimation
Animer.springiOSUIView(dampingratio,duration)                           // iOS UIView SPring
Animer.springiOSCoreAnimation(stiffness,damping)                        // iOS CASpringAnimation
Animer.springOrigamiPOP(bounciness,speed)                               // Origami POP
Animer.springRK4(tension,friction)                                      // Framer-RK4
Animer.springDHO(stiffness,damping)                                     // Framer-DHO
Animer.springProtopie(tension,friction)                                 // Protopie
Animer.springPrinciple(tension,friction)                                // Principle

// Custom Bounce Interpolator(Romain Guy's DropInMotion)
Animer.interpolatorDroid(new CustomBounceInterpolator(),duration)       

// Custom Damping Interpolator(Romain Guy's DropInMotion)
Animer.interpolatorDroid(new CustomDampingInterpolator(),duration)      

// MocosSpring Interpolator (https://github.com/marcioapaiva/mocos-controlator)
Animer.interpolatorDroid(new CustomMocosSpringInterpolator(),duration)  

// Custom Spring Interpolator(https://inloop.github.io/interpolator/)
Animer.interpolatorDroid(new CustomSpringInterpolator(),duration)       

// Android Native Interpolator Below
Animer.interpolatorDroid(new PathInterpolator(),duration)               // Cubic Bezier Interpolator
...
Animer.interpolatorDroid(new DecelerateInterpolator(),duration)         // Android Decelerate Interpolator
...

TODO

• A State Machine which can control interface's state(current is only object propertyValue's state)
• Redesign the API
• Rewrite the glsl shader
• Consider scences in activity/fragment transition
• Hook mechanism
• Redesign the ConfigUI,it's difficult to tweak paras in small screen,maybe consider 'adb+electron in desktop client'

Core concpet:

Data

• State machine concpet from FramerJS ✅
• Aniamtion converter from my Animation Converter ✅
• Support external JSON to edit animation data

Althogrim

• Physics animation concept from Rebound & Android DynamicAnimation ✅
• LookupTable Interpolation Animator + RK4 Solver + DHO Solver ✅
• Physics simulation from Flutter Physics & UIKit Dyanmic
• Momentum
• Calculating mass by Elements' area
• Limit SpringAnimation's by time or overshoot counts

Advanced Animation Setting

• Addtive animation (compose mulitple animation)
• Chained animation (one by one)
• Parallax animation (same duration but differnt transition)
• Sequencing animation (same transition but different startDelay)

User-Control

• Gesture-Driven animation,you can interact with the animation even it is animating(Like iOS's CADisplayLink Or Rebound's SetEndValue) ✅
• Package a gesture animator for interactive animation,attach gesture's velocity to animation system,make a flawess experience.
• Easy2use animation listener for controlling other element when the object is interacting or animating ✅

Performance

• Use android framework native DyanmicAniamtion And TimingInterpolator ✅
• Pre-save animation's data for less calculation
• Hardware Acceleration ✅

Design Component

• Scrollview|Scroller|PageViewer Component & Example
• Drag | DND Component & Example
• Button Component & Example
• Transition Component & Example(Maintain different element's property in state machine)
• Scroll-selector Component & Example(Scroll to fixed position)
• Swipe to delete Component & Example

Dev Tools

• Data-bind graph to modify and preview animation in application ✅
• Data-bind selctor to change animation-type in application ✅（Still has some bugs)

Utils

• AE Plugin for converting curves & revealing codes ✅（Will update GUI later)

License

See Apache License here