Animations driven by finger movement

Ruslan Urmeev

Last update: Nov 24, 2022

Related tags

Animations android animation scene viewpager interpolator arc-animations

Overview

OffsetAnimator

OffsetAnimator lets animate objects basing on touchevents, so users can be engaged in an animation process.

Usage

Add the library to your project:

Add it in your root build.gradle at the end of repositories:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Add the dependency:

dependencies {
    compile 'com.github.russelarms:offsetanimator:1.0.2'
}

Requirements

Min sdk version is 11. The library doesn't have any transitive dependencies.

Tutorial

A Comprehensive tutorial.

Scene

To create viewpager-based animation you should bind a scene to position updates:

ViewPagerAnimatorAdapter animatorAdapter = new ViewPagerAnimatorAdapter(scene.getScene());
viewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        super.onPageScrolled(position, positionOffset, positionOffsetPixels);
        animatorAdapter.onPageScrolled(position, positionOffset);
    }
});

Then create a scene instance and pass it a root view and an initializer function:

Scene.create(getRootView(), () -> initSteps());

Scripting

Script desired animation like this:

private void initSteps() {
    scene.page(0).step(0)
            .createAnimation(ocean.getY(), ocean.getY() - convertDIPToPixels(getContext(), 120))
            .setStartThreshold(0.5f)
            .setDuration(0.8f)
            .setInterpolator(new DecelerateInterpolator())
            .setListener(value -> ocean.setY(value));
}

A single page is taken as 1.0f. So duration 0.5f is a half of a distance.

Lazy initialization

It is not always convenient to specify exact view positions after some script done, so we can pass a lazy initializer. In this example animator will be initialized only on page 3 with corresponding coordinates:

scene.page(3).step(3)
        .createAnimation(() -> AnimatorFactory.createAnimator(fishLeftBottom.getY(), fishLeftBottom.getY() + screenDimensions.y / 2))
        .setDuration(0.5f)
        .setListener(value -> fishLeftBottom.setY(value));

Here's how to set the rotation:

scene.page(2).step(2)
        .createAnimation(0, 90)
        .setDuration(0.25f)
        .setListener(value -> submarine.setRotation(value));

Interpolators

We can specify an interpolator (from android.view.animation). The library ships its own SpringInterpolator:

scene.page(1).step(0)
        .createAnimation(1926, 1032)
        .setInterpolator(new SpringInterpolator(0.8f))
        .setListener(value -> submarine.setY(value));

Arc animations

Create arc animation:

scene.page(2).step(1)
        .createAnimation(() -> AnimatorFactory.createArcAnimator(submarine,
                Utils.centerX(submarine),
                convertDIPToPixels(getContext(), 48),
                submarine.getX() + submarine.getWidth() / 2,
                Utils.centerY(submarine),
                180f, Side.RIGHT))
        .setStartThreshold(0.5f)
        .setDuration(0.5f);

While standard OffsetAnimator requires user to set listeners and update fields by hand, arc animator doesn't need listener: it assigns value implicitly.

Inheritance

OffsetAnimator is open to be inherited:

public class AnotherOffsetAnimator extends OffsetAnimator {

    public AnotherOffsetAnimator(float x1, float x2) {
        super(x1, x2);
    }

    @Override
    public void animate(float position) {
        super.animate(position);
    }
}

and to be used with a scene:

scene.page(3).step(1)
        .createAnimation(() -> new AnotherOffsetAnimator(fishRight.getX(), fishRight.getX() + convertDIPToPixels(getContext(), 160)))
        .setDuration(0.5f)
        .setListener(value -> fishRight.setX(value));

License

OffsetAnimator is available under the MIT license. See the LICENSE file for more info. The library uses some code from https://github.com/asyl/ArcAnimator for arc animations.

The submarine and the fish images picked from freepik.com: Designed by Freepik Background vector created by Freepik

You might also like...

Android library to create complex multi-state animations.

Comments

Can't build for some reason...

I get this:

Warning:One of the plugins you are using supports Java 8 language features. To try the support built into the Android plugin, remove the following from your build.gradle: apply plugin: 'me.tatarka.retrolambda' To learn more, go to https://d.android.com/r/tools/java-8-support-message.html

Warning:One of the plugins you are using supports Java 8 language features. To try the support built into the Android plugin, remove the following from your build.gradle: apply plugin: 'me.tatarka.retrolambda' To learn more, go to https://d.android.com/r/tools/java-8-support-message.html

Error:Execution failed for task ':app:transformClassesWithRetrolambdaForDebug'.

Missing javaCompileTask for variant: debug/0 from output dir: D:\android\Android studio Projects\OffsetAnimator\app\build\intermediates\transforms\retrolambda\debug\0

opened by AndroidDeveloperLB 8
Animation just stops at the middle.

Sometimes, animation just stops at the middle of action. And this is not something that happens time after time. If it happend with animation once, then it stops work. It just follows the finger, but doesn't automatically go to key positions.

opened by Nazacheres 4
Added simple logos & comments.

Added a simple logo that appears abit nicer than the standard one. Also wanted to add some comments to help clarify why some of the code is placed there.

opened by ThermoDev 1
ViewPagerAnimatorAdapter's problems

on method onPageScrolled, if (positionOffset == 0.0f && prevPosition != position) { positionOffset = 1f; } and if (position == prevPosition) { scene.act(position, positionOffset); } are Mutual exclusion,why do you do this?

opened by jackzhengpinwen 1