Giter VIP home page Giter VIP logo

property-animation-example's Introduction

Property Animation Example

The app animates stars on the screen by changing various View properties that control position, size, rotation, and translucency. This app shows how to create Property Animations, using ObjectAnimator, which are the basic building blocks of most Android animations. Property animations are used to animate (or change over time) the value of a property on an object, usually a UI object like an Android view.

App Preview

Property Animation Example 3 Property Animation Example 2 Property Animation Example Property Animation Example gif

Property Animation

Property animation involves changing of property values of the views over time like position, rotation, scale or transparency.

Object Animator

ObjectAnimator provides a simple set-and-forget mechanism for animating properties.

val animator = ObjectAnimator.ofFloat(star, View.ROTATION, -360f, 0f)

ObjectAnimator acts on the target β€œstar” (ImageView). It runs an animation on the ROTATION property of star with start and end values of -360 to 0 degrees. The default duration of animation is 300 milliseconds.

Jank Effect

The discontinuous motion which is caused when the animation restarts in the middle of current animation, is called Jank. When the next animation is requested (by user click) and the current animation isn't finished yet, the property resets to original value causing an abrupt motion. To resolve this we can start the new animation from current value or prevent user from requesting next animation until current one isn't finished.

AnimatorListenerAdapter

To handle animation states we use AnimatorListenerAdapter that has callbacks for an animation starting, ending, pausing, resuming and repeating. Instead of implementing the raw AnimatorListener the adapter class is used because it provides default implementations of all the listener methods and we can override only those which are required. We prevent the Jank effect using AnimatorListenerAdapter.

Property Values Holder

It holds information about a single property, with values that the property animates between. However, it doesn't specify the target to it is applied. We use them to achieve parallel animations. An ObjectAnimator can hold multiple PropertyViewHolder objects and they all animate together, in parallel. The target to PropertyViewHolder is specified by ObjectAnimator.

val scaleX = PropertyValuesHolder.ofFloat(View.SCALE_X, 4f)
val scaleY = PropertyValuesHolder.ofFloat(View.SCALE_Y, 4f)
val animator = ObjectAnimator.ofPropertyValuesHolder(star, scaleX, scaleY)

Animating arbitrary property

ObjectAnimator not only animates view properties like alpha and rotation, but it can animate any object that has properties that object animator can call during animation. For example, the background color of a view is not exposed as android.util.property object, so we pass a string to object animator, which then uses setter and getter to set and get the value of that field. ObjectAnimator takes the string and looks for properties with the same name.

var animator = ObjectAnimator.ofArgb(view,"backgroundColor", Color.BLACK, Color.RED).start()

Helpful Tips

  1. We can use animator.repeatCount to simply repeat the animation after initial run. We can specify if we want to reverse the animation by specify repeat mode.

    animator.repeatMode = ObjectAnimator.REVERSE
    
  2. To animate between colors instead of using ObjectAnimator.ofInt() factory, we should use ObjectAnimator.ofArgb() to properly interpret colors (Requires API level 21 and above).

  3. To run multiple animations together we can put them into AnimatorSet. It can be used to run animations in parallel or sequentially.

property-animation-example's People

Contributors

pawanharariya avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.