Android中使用抖动动画吸引来用户注意

来源:互联网 发布:淘宝app最新版本下载 编辑:程序博客网 时间:2024/06/06 04:46

在应用中,有时候我们要吸引用户去点击某些按钮,比如应用市场的推荐按钮,为了能够吸引用户主动点击而且不过分的打扰用户,最好的方法就是给我们想吸引用户注意的view添加一些抖动动画,比如这张图


这里我主要实现了两种抖动动画,左右抖动和上下抖动。左右抖动通常用于表单验证失败的时候,上下抖动通常用于吸引用于用户去点击。动画主要使用了Keyframe和PropertyValuesHolder。
Keyframe是一个时间/值对,用于定义在某个时刻动画的状态。比如Keyframe.ofInt(.5f, Color.RED)定义了当动画进行了50%的时候,颜色的值应该是Color.RED。
PropertyValuesHolder保存了view的属性的信息以及在动画进行过程中该属性的值。通过PropertyValuesHolder.ofKeyframe方法来构建PropertyValuesHolder的实例,改方法接收一个属性名以及多个Keyframe对象作为参数。当你想通过动画改变多个属性的时候PropertyValuesHolder就非常有用。
直接上代码:
tada方法实现了上下抖动。抖动的原理很简单,就是对view的x轴和y轴进行0.9倍到1.1倍的缩放,同时对view进行一定角度的上下旋转。

[java] view plain copy
  1. public static ObjectAnimator tada(View view) {  
  2.     return tada(view, 1f);  
  3. }  
  4.   
  5. public static ObjectAnimator tada(View view, float shakeFactor) {  
  6.   
  7.     PropertyValuesHolder pvhScaleX = PropertyValuesHolder.ofKeyframe(View.SCALE_X,  
  8.             Keyframe.ofFloat(0f, 1f),  
  9.             Keyframe.ofFloat(.1f, .9f),  
  10.             Keyframe.ofFloat(.2f, .9f),  
  11.             Keyframe.ofFloat(.3f, 1.1f),  
  12.             Keyframe.ofFloat(.4f, 1.1f),  
  13.             Keyframe.ofFloat(.5f, 1.1f),  
  14.             Keyframe.ofFloat(.6f, 1.1f),  
  15.             Keyframe.ofFloat(.7f, 1.1f),  
  16.             Keyframe.ofFloat(.8f, 1.1f),  
  17.             Keyframe.ofFloat(.9f, 1.1f),  
  18.             Keyframe.ofFloat(1f, 1f)  
  19.     );  
  20.   
  21.     PropertyValuesHolder pvhScaleY = PropertyValuesHolder.ofKeyframe(View.SCALE_Y,  
  22.             Keyframe.ofFloat(0f, 1f),  
  23.             Keyframe.ofFloat(.1f, .9f),  
  24.             Keyframe.ofFloat(.2f, .9f),  
  25.             Keyframe.ofFloat(.3f, 1.1f),  
  26.             Keyframe.ofFloat(.4f, 1.1f),  
  27.             Keyframe.ofFloat(.5f, 1.1f),  
  28.             Keyframe.ofFloat(.6f, 1.1f),  
  29.             Keyframe.ofFloat(.7f, 1.1f),  
  30.             Keyframe.ofFloat(.8f, 1.1f),  
  31.             Keyframe.ofFloat(.9f, 1.1f),  
  32.             Keyframe.ofFloat(1f, 1f)  
  33.     );  
  34.   
  35.     PropertyValuesHolder pvhRotate = PropertyValuesHolder.ofKeyframe(View.ROTATION,  
  36.             Keyframe.ofFloat(0f, 0f),  
  37.             Keyframe.ofFloat(.1f, -3f * shakeFactor),  
  38.             Keyframe.ofFloat(.2f, -3f * shakeFactor),  
  39.             Keyframe.ofFloat(.3f, 3f * shakeFactor),  
  40.             Keyframe.ofFloat(.4f, -3f * shakeFactor),  
  41.             Keyframe.ofFloat(.5f, 3f * shakeFactor),  
  42.             Keyframe.ofFloat(.6f, -3f * shakeFactor),  
  43.             Keyframe.ofFloat(.7f, 3f * shakeFactor),  
  44.             Keyframe.ofFloat(.8f, -3f * shakeFactor),  
  45.             Keyframe.ofFloat(.9f, 3f * shakeFactor),  
  46.             Keyframe.ofFloat(1f, 0)  
  47.     );  
  48.   
  49.     return ObjectAnimator.ofPropertyValuesHolder(view, pvhScaleX, pvhScaleY, pvhRotate).  
  50.             setDuration(1000);  
  51. }  

nope方法实现了左右抖动。左右抖动的原理就是对view进行x轴的平移。

[java] view plain copy
  1. public static ObjectAnimator nope(View view) {  
  2.     int delta = view.getResources().getDimensionPixelOffset(R.dimen.spacing_medium);  
  3.   
  4.     PropertyValuesHolder pvhTranslateX = PropertyValuesHolder.ofKeyframe(View.TRANSLATION_X,  
  5.             Keyframe.ofFloat(0f, 0),  
  6.             Keyframe.ofFloat(.10f, -delta),  
  7.             Keyframe.ofFloat(.26f, delta),  
  8.             Keyframe.ofFloat(.42f, -delta),  
  9.             Keyframe.ofFloat(.58f, delta),  
  10.             Keyframe.ofFloat(.74f, -delta),  
  11.             Keyframe.ofFloat(.90f, delta),  
  12.             Keyframe.ofFloat(1f, 0f)  
  13.     );  
  14.   
  15.     return ObjectAnimator.ofPropertyValuesHolder(view, pvhTranslateX).  
  16.             setDuration(500);  
  17. }  

  18. demo下载
  19. 参考:
    https://plus.google.com/+CyrilMottier/posts/FABaJhRMCuy
    http://developer.android.com/reference/android/animation/PropertyValuesHolder.html
    http://developer.android.com/guide/topics/graphics/prop-animation.html
2 0
原创粉丝点击