Android Animation

Introduction property and tween animation

Transcript

1. Android Animation Edward
2. Outline  Introduce android animation  Property animation  Tween animation  Demo  Q & A
3. Android Animation  Property Animation  supported in API level 11  View Animation  Tween animation  Frame animation
4. Property Animation  You can animate everything.  Change any object property over time.  position  shape  Regardless of whether it draws to the screen or not.
5. How Animation Works ?
6. Define The Animation  Duration  Frame refresh delay  Repeat count and behavior  Time interpolation  Linear, accelerate, decelerate  Animator sets
7. ValueAnimator  Keeps track of animation's timing  How long has been run ?  current value of the property.  encapsulates a TimeInterpolator  defines animation interpolation  default : AccelerateDecelerateInterpolator  TypeEvaluator  calculate value by interpolated fraction.
8. Flow Architecture
9. ObjectAnimator  It’s a subclass of the ValueAnimator.  To animate a named property of a target ob ject.  Define a setter and getter function. ObjectAnimator anim = ObjectAnimator. ofFloat(object, "alpha", 0f, 1f); anim.start();
10. Example XYHolder startXY = new XYHolder(0f, 0f); XYHolder endXY = new XYHolder(300f, 500f); bounceAnim = ObjectAnimator.ofObject(ballXYHolder, "xY", new XYEvaluator(), startXY, endXY); bounceAnim.setDuration(2000); bounceAnim.setInterpolator(new LinearInterpolator()); bounceAnim.addUpdateListener(this);
11. public class XYEvaluator implements TypeEvaluator { public Object evaluate(float fraction, Object startValue, Object endValue) { // calculate property value } } public void onAnimationUpdate(ValueAnimator animation) { // update property value of object } public class XYEvaluator implements TypeEvaluator { public Object evaluate(float fraction, Object startValue, Object endValue) { // calculate property value } } public void onAnimationUpdate(ValueAnimator animation) { // update property value of object }
12. public class BallXYHolder { private ShapeHolder mBall; public BallXYHolder(ShapeHolder ball) { mBall = ball; } public void setXY(XYHolder xyHolder) { mBall.setX(xyHolder.getX()); mBall.setY(xyHolder.getY()); } public XYHolder getXY() { return new XYHolder(mBall.getX(), mBall.getY()); } }
13. Tween animation  AlphaAnimation  controls the alpha level of a view  ScaleAnimation  controls the scale of a view  TranslateAnimation  controls the position of a view  RotateAnimation  controls the rotation of a view
14. AlphaAnimation  An animation defined in XML.  res/anim/alpha_anim.xml <alpha android:fromAlpha="1.0“ android:toAlpha="0.25" android:duration="3000“ android:fillAfter="true“ />
15. ScaleAnimation  res/anim/scale_anim.xml <scale android:fromXScale="1.6” android:toXScale=“0.6“ android:fromYScale=“1.6“ android:toYScale=“0.6” android:pivotX = “50%” android:pivotY = “50%” android:duration=“3000” />
16. TranslateAnimation  res/anim/translate_anim.xml <translate android:fromXDelta=“20“ android:fromYDelta=“20“ android:toXDelta=“30" android:toYDelta=“50“ android:duration=“3000” />
17. RotateAnimation  res/anim/rotate_anim.xml <rotate android:fromDegrees=“0“ android:toDegrees=“70" android:pivotX=“50%“ android:pivotY=“50%“ android:duration=“3000” />
18. Degree Degree Rotate Direction negative to positive Clockwise negative to negative Counterclockwise positive to positive Clockwise positive to negative Counterclockwise
19. Common Attributes duration in milliseconds fillafter true, the animation transformation is applied after the animation is over. interpolator accelerate_interpolator decelerate_interpolator linear_interpolator reference : http://easings.net/zh-cn repeatCount how many times the animation should repeat repetateMode restart, reverse startOffset Delay in milliseconds before the animation runs
20. Load Animation  apply the animation to an view and start the animation: View view = findViewById(R.id.view); Animation rotateAnimation = AnimationUtils .loadAnimation (this, R.anim.rotate_anim); view.startAnimation(rotateAnimation );
21. Delay time  Adjust startOffset  Handler handler.postDelayed(new Runnable() { public void run() { dotView.startAnimation(animation); } }, delayTime);
22. How do AnimationSet repeat ?  android:repeatCount = -1 ???  AnimationSet  repeatCount is ignored.  Timer  AnimationListener
23. Timer  Timer is not stable, depend on  how busy the system is overall  how fast the system can service the timer  The result is unexpected.
24. AnimationListener  To listens for animation ending, and then starts the animation again. animationSet.setAnimationListener(new AnimationListener() { @Override public void onAnimationEnd(Animation animation) { dotView.startAnimation(animationSet); } … });
25. Property VS. View Animation  The view animation only animate View objects.  scale, rotate, translate, alpha  View animation is only modified where the view was drawn, and not the actual View itself.
26. Demo  Wavy loading  Now playing
27. Q & A Thank you!!