Animer

by MartinRGB

MartinRGB /Animer

for a better Android Experience

167 Stars 9 Forks Last release: 10 months ago (v0.1.5.5) Apache License 2.0 207 Commits 1 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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


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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.