您的位置: 首页  >  文章  >  Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现

Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现

分类: 文章 • 2025-03-07 20:13:35

周末升级了墨迹天气，看着引导界面做的不错，模仿一下，可能与原作者的代码实现不一样，但是实现的效果还是差不多的。先分享一篇以前的文章，android动画的基础知识，《Android UI开发第十二篇——动画效果Animation（一）》，写的不好，读者也可以自行搜索下android动画相关知识。模仿墨迹天气的引导界面动画使用的android动画的基础知识。


实现墨迹天气向上滑动的viewpager使用的开源库ViewPager-Android。ViewPager-Android开源库设置app:orientation定义滑动方向。


墨迹天气引导界面共有4个视图，先看一下：（这里引入的图片都是实现后的，截图都是静态图，运行程序看动画效果）。

Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现

图一 图二

Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现

图三 图四


图一动画效果：

图一中有四个动画效果,最上面的“极低耗电”标示，最下面的箭头标示，还有中间旋转的电池图标和电子表的闪动，最上面的使用的渐变尺寸（scale）动画效果:

[html]view plaincopyprint?Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <setxmlns:android="http://schemas.android.com/apk/res/android">
  3. <scale
  4. android:duration="2000"
  5. android:fillAfter="false"
  6. android:fromXScale="0.0"
  7. android:fromYScale="0.0"
  8. android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  9. android:pivotX="50%"
  10. android:pivotY="50%"
  11. android:toXScale="1.1"
  12. android:toYScale="1.1"/>
  13. </set>

下面简单说明了scale的各个属性：

[plain]view plaincopyprint?Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现
  1. <!--尺寸伸缩动画效果scale
  2. 属性：interpolator指定一个动画的插入器
  3. 常见动画插入器:
  4. accelerate_decelerate_interpolator加速-减速动画插入器
  5. accelerate_interpolator加速-动画插入器
  6. decelerate_interpolator减速-动画插入器
  7. anticipate_interpolator先回退一小步然后加速前进
  8. anticipate_overshoot_interpolator在上一个基础上超出终点一小步再回到终点
  9. bounce_interpolator最后阶段弹球效果
  10. cycle_interpolator周期运动
  11. linear_interpolator匀速
  12. overshoot_interpolator快速到达终点并超出一小步最后回到终点
  13. 浮点型值：
  15. fromXScale属性为动画起始时X坐标上的伸缩尺寸
  16. toXScale属性为动画结束时X坐标上的伸缩尺寸
  18. fromYScale属性为动画起始时Y坐标上的伸缩尺寸
  19. toYScale属性为动画结束时Y坐标上的伸缩尺寸
  21. 说明:
  22. 以上四种属性值
  24. 0.0表示收缩到没有
  25. 1.0表示正常无伸缩
  26. 值小于1.0表示收缩
  27. 值大于1.0表示放大
  29. pivotX属性为动画相对于物件的X坐标的开始位置
  30. pivotY属性为动画相对于物件的Y坐标的开始位置
  32. 说明:
  33. 以上两个属性值从0%-100%中取值
  34. 50%为物件的X或Y方向坐标上的中点位置
  36. 长整型值：
  37. duration属性为动画持续时间
  38. 说明:时间以毫秒为单位
  40. 布尔型值:
  41. fillAfter属性当设置为true，该动画转化在动画结束后被应用
  42. -->

最下面的箭头标示使用了混合动画：

[html]view plaincopyprint?Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <setxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:repeatMode="reverse">
  5. <translate
  6. android:duration="1000"
  7. android:fromXDelta="0"
  8. android:fromYDelta="-15"
  9. android:repeatCount="infinite"
  10. android:toXDelta="0"
  11. android:toYDelta="20"/>
  13. <alpha
  14. android:duration="1000"
  15. android:fromAlpha="1.0"
  16. android:repeatCount="infinite"
  17. android:toAlpha="0.3"/>
  19. </set>

混合动画是set集合，包含了平移动画（translate）和渐变动画（alpha），对这两动画简单说明：

[plain]view plaincopyprint?Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现
  1. <alpha
  2. android:duration="1000"
  3. android:fromAlpha="1.0"
  4. android:repeatCount="infinite"
  5. android:toAlpha="0.3"/>
  6. <!--
  7. 透明度控制动画效果alpha
  8. 浮点型值：
  9. fromAlpha属性为动画起始时透明度
  10. toAlpha属性为动画结束时透明度
  11. 说明:
  12. 0.0表示完全透明
  13. 1.0表示完全不透明
  14. 以上值取0.0-1.0之间的float数据类型的数字
  16. 长整型值：
  17. duration属性为动画持续时间
  18. 说明:
  19. 时间以毫秒为单位
  20. 整型值:
  21. repeatCount：重复次数
  22. 说明：
  23. infinite：循环执行，
  24. 具体正整数表示循环次数
  26. repeatMode：重复模式，
  27. 说明：
  28. restart：重新从头开始执行
  29. reverse：反方向执行
  31. -->

[plain]view plaincopyprint?Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现
  1. <translate
  2. android:duration="1000"
  3. android:fromXDelta="0"
  4. android:fromYDelta="-15"
  5. android:repeatCount="infinite"
  6. android:toXDelta="0"
  7. android:toYDelta="20"/>
  8. <!--translate平移动画效果
  9. 整型值:
  10. fromXDelta属性为动画起始时X坐标上的位置
  11. toXDelta属性为动画结束时X坐标上的位置
  12. fromYDelta属性为动画起始时Y坐标上的位置
  13. toYDelta属性为动画结束时Y坐标上的位置
  14. 注意:
  15. 没有指定fromXTypetoXTypefromYTypetoYType时候，
  16. 默认是以自己为相对参照物，默认参考物最重要
  17. 长整型值：
  18. duration属性为动画持续时间
  19. 说明:时间以毫秒为单位
  20. gt;


中间的电池动画使用了旋转（rotate）动画和渐变尺寸动画的组合：

[html]view plaincopyprint?Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <setxmlns:android="http://schemas.android.com/apk/res/android">
  4. <scale
  5. android:duration="800"
  6. android:fillAfter="false"
  7. android:fromXScale="0.0"
  8. android:fromYScale="0.0"
  9. android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  10. android:pivotX="50%"
  11. android:pivotY="50%"
  12. android:toXScale="1.2"
  13. android:toYScale="1.2"/>
  15. <rotate
  16. android:duration="3000"
  17. android:fromDegrees="0"
  18. android:pivotX="50%"
  19. android:pivotY="50%"
  20. android:repeatCount="-1"
  21. android:toDegrees="359.0"/>
  23. </set>

前面介绍了渐变尺寸动画，下面只介绍旋转动画：

[plain]view plaincopyprint?Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现
  1. <rotate
  2. android:duration="3000"
  3. android:fromDegrees="0"
  4. android:pivotX="50%"
  5. android:pivotY="50%"
  6. android:repeatCount="-1"
  7. android:toDegrees="359.0"/>
  8. <!--rotate旋转动画效果
  9. 属性：interpolator指定一个动画的插入器
  11. 浮点数型值:
  12. fromDegrees属性为动画起始时物件的角度
  13. toDegrees属性为动画结束时物件旋转的角度可以大于360度
  16. 说明:
  17. 当角度为负数——表示逆时针旋转
  18. 当角度为正数——表示顺时针旋转
  19. (负数from——to正数:顺时针旋转)
  20. (负数from——to负数:逆时针旋转)
  21. (正数from——to正数:顺时针旋转)
  22. (正数from——to负数:逆时针旋转)
  24. pivotX属性为动画相对于物件的X坐标的开始位置
  25. pivotY属性为动画相对于物件的Y坐标的开始位置
  27. 说明:以上两个属性值从0%-100%中取值
  28. 50%为物件的X或Y方向坐标上的中点位置
  30. 长整型值：
  31. duration属性为动画持续时间
  32. 说明:时间以毫秒为单位
  33. -->

电子表闪动动画使用animation-list实现的逐帧动画：

[html]view plaincopyprint?Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <animation-listxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:oneshot="false">
  4. <!--
  5. 根标签为animation-list，其中oneshot代表着是否只展示一遍，设置为false会不停的循环播放动画
  6. 根标签下，通过item标签对动画中的每一个图片进行声明
  7. android:duration表示展示所用的该图片的时间长度
  8. -->
  9. <item
  10. android:drawable="@drawable/tutorial1_icon1"
  11. android:duration="200"/>
  12. <item
  13. android:drawable="@drawable/tutorial1_icon2"
  14. android:duration="200"/>
  16. </animation-list>


Anima启动：
[java]view plaincopyprint?Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现
  1. t1_icon1.setImageResource(R.drawable.t1_frame_animation);
  2. t1_icon1_animationDrawable=(AnimationDrawable)t1_icon1
  3. .getDrawable();
  4. t1_icon1_animationDrawable.start();


图二动画效果：

图二中最上面的“极小安装”动画和最下面的箭头动画和图一中一样，不做过多介绍，中间动画使用的尺寸渐变动画，和图一中的尺寸渐变动画一样，也不多介绍。


图三动画效果：

图二中最上面的“极速流畅”动画和最下面的箭头动画和图一中一样，不做过多介绍。中间效果使用了云移动效果使用了平移动画，火箭喷气效果使用了animation-list的逐帧动画。逐帧动画就不多说了，这里的平移动画没有使用xml文件实现，使用的java代码，为了适配多种屏幕，需要计算平移的初始位置，代码定义了几个位置：

[java]view plaincopyprint?Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现
  1. view3.getViewTreeObserver().addOnGlobalLayoutListener(
  2. newOnGlobalLayoutListener(){
  4. @Override
  5. publicvoidonGlobalLayout(){
  6. //TODOAuto-generatedmethodstub
  7. inth1=centerLayout.getTop();
  8. inth2=centerLayout.getBottom();
  9. DensityUtildensityUtil=newDensityUtil(
  10. MainActivity.this);
  11. intw=densityUtil.getScreenWidth();
  13. fx1=t3_icon2.getTop()+t3_icon2.getHeight();
  14. fy1=-t3_icon2.getTop()-t3_icon2.getHeight();
  15. tx1=-t3_icon2.getWidth()-t3_icon2.getLeft();
  16. ty1=t3_icon2.getTop()+t3_icon2.getLeft()
  17. +t3_icon2.getWidth();
  19. fx2=t3_icon3.getTop()+t3_icon3.getHeight();
  20. fy2=-t3_icon3.getTop()-t3_icon3.getHeight();
  21. tx2=-t3_icon3.getWidth()-t3_icon3.getLeft();
  22. ty2=t3_icon3.getTop()+t3_icon3.getLeft()
  23. +t3_icon3.getWidth();
  25. fx3=w-t3_icon4.getLeft();
  26. fy3=-(w-t3_icon4.getLeft());
  27. tx3=-(h2-h1-t3_icon4.getTop());
  28. ty3=h2-h1-t3_icon4.getTop();
  30. fx4=w-t3_icon5.getLeft();
  31. fy4=-(w-t3_icon5.getLeft());
  32. tx4=-(h2-h1-t3_icon5.getTop());
  33. ty4=h2-h1-t3_icon5.getTop();
  34. }
  35. });


图四动画效果：

图四中“墨迹天气3.0”图片使用了RotateAnimation，动画插值器使用的CycleInterpolator，“全面革新 我是极致控”使用的渐变尺寸动画。

[java]view plaincopyprint?Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现Android UI开发第四十一篇——墨迹天气3.0引导界面及动画实现
  1. intpivot=Animation.RELATIVE_TO_SELF;
  2. CycleInterpolatorinterpolator=newCycleInterpolator(3.0f);
  3. RotateAnimationanimation=newRotateAnimation(0,10,pivot,
  4. 0.47f,pivot,0.05f);
  5. animation.setStartOffset(500);
  6. animation.setDuration(3000);
  7. animation.setRepeatCount(1);//Animation.INFINITE
  8. animation.setInterpolator(interpolator);
  9. t4_icon1.startAnimation(animation);



上面基本实现了墨迹天气的动画效果。

资源库下载：http://download.****.net/detail/xyz_lmn/7094071

demo下载看回复

* @author 张兴业
* 我的新浪微博：@张兴业TBOW
*/

参考：

http://developer.android.com/guide/topics/resources/animation-resource.html

http://developer.android.com/reference/android/view/animation/Animation.html

相关推荐