Animer for a better Android Experience @codeKK AndroidOpen Source Website

Animer

Introduction: for a better Android Experience

Tags:

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