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

雨点打透心脏的1/2处 2024-02-17 17:58 8阅读 0赞

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

这里我主要实现了两种抖动动画，左右抖动和上下抖动。左右抖动通常用于表单验证失败的时候，上下抖动通常用于吸引用于用户去点击。动画主要使用了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][view plain]

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][view plain]

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.   
    
19. [demo下载][demo]
20. 参考：  
    [https://plus.google.com/+CyrilMottier/posts/FABaJhRMCuy][https_plus.google.com_CyrilMottier_posts_FABaJhRMCuy]  
    [http://developer.android.com/reference/android/animation/PropertyValuesHolder.html][http_developer.android.com_reference_android_animation_PropertyValuesHolder.html]  
    [http://developer.android.com/guide/topics/graphics/prop-animation.html][http_developer.android.com_guide_topics_graphics_prop-animation.html]

[attention_seeker.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a7a90b43f40e4928a52a152c60598408.png
[view plain]: http://blog.csdn.net/lzyzsd/article/details/39255341#
[demo]: http://download.csdn.net/detail/onceing/9625522
[https_plus.google.com_CyrilMottier_posts_FABaJhRMCuy]: https://plus.google.com/+CyrilMottier/posts/FABaJhRMCuy
[http_developer.android.com_reference_android_animation_PropertyValuesHolder.html]: http://developer.android.com/reference/android/animation/PropertyValuesHolder.html
[http_developer.android.com_guide_topics_graphics_prop-animation.html]: http://developer.android.com/guide/topics/graphics/prop-animation.html