文档章节

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

AK_47
 AK_47
发布于 2014/07/09 17:43
字数 2115
阅读 71
收藏 1

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


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


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

                

图一                                                                                          图二

    

                

图三                                                                                        图四


图一动画效果:    

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

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <scale
        android:duration="2000"
        android:fillAfter="false"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.1"
        android:toYScale="1.1" />
</set>

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

<!-- 尺寸伸缩动画效果 scale
       属性:interpolator 指定一个动画的插入器
       常见动画插入器:
            accelerate_decelerate_interpolator  加速-减速 动画插入器
            accelerate_interpolator        加速-动画插入器
            decelerate_interpolator        减速- 动画插入器
            anticipate_interpolator	先回退一小步然后加速前进
            anticipate_overshoot_interpolator	在上一个基础上超出终点一小步再回到终点
            bounce_interpolator	最后阶段弹球效果
            cycle_interpolator	周期运动
            linear_interpolator	匀速
            overshoot_interpolator	快速到达终点并超出一小步最后回到终点
      浮点型值:
          
            fromXScale 属性为动画起始时 X坐标上的伸缩尺寸    
            toXScale   属性为动画结束时 X坐标上的伸缩尺寸     
         
            fromYScale 属性为动画起始时Y坐标上的伸缩尺寸    
            toYScale   属性为动画结束时Y坐标上的伸缩尺寸    
         
            说明:
                 以上四种属性值    
     
                    0.0表示收缩到没有 
                    1.0表示正常无伸缩     
                    值小于1.0表示收缩  
                    值大于1.0表示放大
         
            pivotX     属性为动画相对于物件的X坐标的开始位置
            pivotY     属性为动画相对于物件的Y坐标的开始位置
         
            说明:
                    以上两个属性值 从0%-100%中取值
                    50%为物件的X或Y方向坐标上的中点位置
         
        长整型值:
            duration  属性为动画持续时间
            说明:   时间以毫秒为单位
 
        布尔型值:
            fillAfter 属性 当设置为true ,该动画转化在动画结束后被应用
-->

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

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:repeatMode="reverse" >

    <translate
        android:duration="1000"
        android:fromXDelta="0"
        android:fromYDelta="-15"
        android:repeatCount="infinite"
        android:toXDelta="0"
        android:toYDelta="20" />

    <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:repeatCount="infinite"
        android:toAlpha="0.3" />

</set>

混合动画是set集合,包含了平移动画(translate)和渐变动画(alpha),对这两动画简单说明:

<alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:repeatCount="infinite"
        android:toAlpha="0.3" />
    <!--
         透明度控制动画效果 alpha
        浮点型值:
            fromAlpha 属性为动画起始时透明度
            toAlpha   属性为动画结束时透明度
            说明: 
                0.0表示完全透明
                1.0表示完全不透明
            以上值取0.0-1.0之间的float数据类型的数字
         
        长整型值:
            duration  属性为动画持续时间
            说明:     
                时间以毫秒为单位
        整型值:        
            repeatCount:重复次数
            说明:
            infinite:循环执行,
            具体正整数表示循环次数
            
             repeatMode:重复模式,
             说明:
                restart:重新从头开始执行
                reverse:反方向执行
             
    -->

<translate
        android:duration="1000"
        android:fromXDelta="0"
        android:fromYDelta="-15"
        android:repeatCount="infinite"
        android:toXDelta="0"
        android:toYDelta="20" />
    <!-- translate 平移动画效果
        整型值:
            fromXDelta 属性为动画起始时 X坐标上的位置    
            toXDelta   属性为动画结束时 X坐标上的位置
            fromYDelta 属性为动画起始时 Y坐标上的位置
            toYDelta   属性为动画结束时 Y坐标上的位置
            注意:
                     没有指定fromXType toXType fromYType toYType 时候,
                     默认是以自己为相对参照物  ,默认参考物最重要         
        长整型值:
            duration  属性为动画持续时间
            说明:   时间以毫秒为单位
-->


中间的电池动画使用了旋转(rotate)动画和渐变尺寸动画的组合:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <scale
        android:duration="800"
        android:fillAfter="false"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.2"
        android:toYScale="1.2" />

    <rotate
        android:duration="3000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:toDegrees="359.0" />

</set>

前面介绍了渐变尺寸动画,下面只介绍旋转动画:

<rotate
        android:duration="3000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:toDegrees="359.0" />
    <!-- rotate 旋转动画效果
       属性:interpolator 指定一个动画的插入器
           
       浮点数型值:
            fromDegrees 属性为动画起始时物件的角度    
            toDegrees   属性为动画结束时物件旋转的角度 可以大于360度   
 
         
            说明:
                     当角度为负数——表示逆时针旋转
                     当角度为正数——表示顺时针旋转              
                     (负数from——to正数:顺时针旋转)   
                     (负数from——to负数:逆时针旋转) 
                     (正数from——to正数:顺时针旋转) 
                     (正数from——to负数:逆时针旋转)       
 
            pivotX     属性为动画相对于物件的X坐标的开始位置
            pivotY     属性为动画相对于物件的Y坐标的开始位置
                 
            说明:        以上两个属性值 从0%-100%中取值
                         50%为物件的X或Y方向坐标上的中点位置
 
        长整型值:
            duration  属性为动画持续时间
            说明:       时间以毫秒为单位
-->

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

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false" >
<!--   
    根标签为animation-list,其中oneshot代表着是否只展示一遍,设置为false会不停的循环播放动画  
    根标签下,通过item标签对动画中的每一个图片进行声明  
    android:duration 表示展示所用的该图片的时间长度  
 -->  
    <item
        android:drawable="@drawable/tutorial1_icon1"
        android:duration="200"/>
    <item
        android:drawable="@drawable/tutorial1_icon2"
        android:duration="200"/>

</animation-list>


Anima启动:
t1_icon1.setImageResource(R.drawable.t1_frame_animation);
			t1_icon1_animationDrawable = (AnimationDrawable) t1_icon1
					.getDrawable();
			t1_icon1_animationDrawable.start();


图二动画效果: 

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


图三动画效果: 

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

view3.getViewTreeObserver().addOnGlobalLayoutListener(
				new OnGlobalLayoutListener() {

					@Override
					public void onGlobalLayout() {
						// TODO Auto-generated method stub
						int h1 = centerLayout.getTop();
						int h2 = centerLayout.getBottom();
						DensityUtil densityUtil = new DensityUtil(
								MainActivity.this);
						int w = densityUtil.getScreenWidth();

						fx1 = t3_icon2.getTop() + t3_icon2.getHeight();
						fy1 = -t3_icon2.getTop() - t3_icon2.getHeight();
						tx1 = -t3_icon2.getWidth() - t3_icon2.getLeft();
						ty1 = t3_icon2.getTop() + t3_icon2.getLeft()
								+ t3_icon2.getWidth();

						fx2 = t3_icon3.getTop() + t3_icon3.getHeight();
						fy2 = -t3_icon3.getTop() - t3_icon3.getHeight();
						tx2 = -t3_icon3.getWidth() - t3_icon3.getLeft();
						ty2 = t3_icon3.getTop() + t3_icon3.getLeft()
								+ t3_icon3.getWidth();

						fx3 = w - t3_icon4.getLeft();
						fy3 = -(w - t3_icon4.getLeft());
						tx3 = -(h2 - h1 - t3_icon4.getTop());
						ty3 = h2 - h1 - t3_icon4.getTop();

						fx4 = w - t3_icon5.getLeft();
						fy4 = -(w - t3_icon5.getLeft());
						tx4 = -(h2 - h1 - t3_icon5.getTop());
						ty4 = h2 - h1 - t3_icon5.getTop();
					}
				});


图四动画效果:

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

int pivot = Animation.RELATIVE_TO_SELF;
			CycleInterpolator interpolator = new CycleInterpolator(3.0f);
			RotateAnimation animation = new RotateAnimation(0, 10, pivot,
					0.47f, pivot, 0.05f);
			animation.setStartOffset(500);
			animation.setDuration(3000);
			animation.setRepeatCount(1);// Animation.INFINITE
			animation.setInterpolator(interpolator);
			t4_icon1.startAnimation(animation);



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

资源库下载:http://download.csdn.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




© 著作权归作者所有

AK_47
粉丝 16
博文 533
码字总数 569998
作品 0
嘉定
程序员
私信 提问
【压岁干货】精彩技术博客+优秀源码集锦

虽然2015年已经过了一月有余,但在中国,好像只有过了春节才算进入新的一年。眼看着这也春节倒计时了,大家好像又都忙了起来,赶项目赶项目…… 从DevStore整理了一些优秀的技术博客和源码作...

牵着蜗牛去西藏
2015/02/04
1K
4
开源中国2010年图书赠送活动《Android应用开发揭秘》

活动内容: 参与活动者请从现在开始,到2010年3月1日这段时间内,对Oschina独家发布的《Android应用开发揭秘》一书内容章节进行客观点评,及大家可以就该技术的趋势和定位提出一些看法,只要...

红薯
2010/01/25
6K
203
【J+】移动互联网沙龙——墨迹天气创新之路与大数据日志分析

在这个应用泛滥的时代,如何在众多的应用中脱颖而出?如何打造让用户喜欢的产品?这是每个创业者或者产品经理都在思考的问题,优秀的交互体验和创新必不可少,但对产品形态的认识也是成败的关...

缪斯的情人
2015/05/13
7K
38
【J+】移动互联网沙龙——墨迹天气创新之路与大数据日志分析

在这个应用泛滥的时代,如何在众多的应用中脱颖而出?如何打造让用户喜欢的产品?这是每个创业者或者产品经理都在思考的问题,优秀的交互体验和创新必不可少,但对产品形态的认识也是成败的关...

缪斯的情人
2015/05/13
11
0
Android开发资源推荐第2季

Android CPU监控想法,思路,核心技术和代码 http://www.csdn123.com/html/blogs/20131026/89017.htm Android App /Task/Stack 总体分析 http://www.eoeandroid.com/thread-161703-1-1.html......

eclipse_xu
2014/08/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

spring boot actuator

actuator 是监控系统健康的工具,引入 spring-boot-starter-actuator会暴露一些endpoint. 可通过如下配置来配置这些endpoint的基本配置: 可通过http:${url}:28081/management/actuator/*来访...

ZH-JSON
18分钟前
3
0
9.特殊权限 软连接 硬链接

6月7日任务 2.18 特殊权限set_uid 2.19 特殊权限set_gid 2.20 特殊权限stick_bit 2.21 软链接文件 2.22 硬连接文件 2.18 特殊权限set_uid 会发现有些文件的前三位并不是rwx而是rws,而s就代表...

oschina130111
30分钟前
2
0
好程序员web前端分享如何自学前端?步骤是什么?

好程序员web前端分享如何自学前端?步骤是什么?简单粗暴直接上学习流程。 1、学习HTML+CSS基础 HTML5新特性和CSS3 这个部分主要是需要记忆的知识点比较多,建议大家在学习的时候多加练习,最...

好程序员官方
31分钟前
3
0
创龙基于TI TMS320C6748定点/浮点DSP C674x + Xilinx Spartan-6 FPGA开发板

TL6748F-EVM是一款基于广州创龙SOM-TL6748F核心板设计的开发板,底板采用沉金无铅工艺2层板设计,它为用户提供了SOM-TL6748F核心板的测试平台,用于快速评估SOM-TL6748F核心板的整体性能。 ...

Tronlong创龙
37分钟前
2
0
8年前诞生于淘宝,细数阿里云RPA 的前世今生

9月10日,踏入55岁的马云正式卸任阿里巴巴董事局主席一职,由阿里巴巴集团CEO张勇接任。公寓创业、西湖论剑、美国敲钟,从成立到登顶中国最值钱的公司,阿里巴巴只用了20年。 阿里云RPA,201...

阿里云官方博客
41分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部