Skip to content

MartinRGB/Animer

Repository files navigation

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

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