`
modabobo
  • 浏览: 534315 次
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

周末升级了墨迹天气,看着引导界面做的不错,模仿一下,可能与原作者的代码实现不一样,但是实现的效果还是差不多的。先分享一篇以前的文章,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




分享到:
评论

相关推荐

    UI开发第六篇——仿QQ的滑动Tab

    在UI开发中,仿QQ的滑动Tab是一种常见的设计模式,用于实现应用界面中的多页面切换,用户可以通过滑动Tab来浏览不同的内容区域。在Android平台上,我们可以利用Android SDK提供的组件和方法来实现这一功能。以下是对...

    安卓Android源码——应用源码高仿墨迹天气引导界面.zip

    这篇内容将深入解析安卓Android源码中的高仿墨迹天气引导界面实现,引导界面是许多应用程序启动时为了向用户介绍新功能或展示品牌形象而设计的一种交互形式。在Android开发中,这种界面通常由一系列静态图片或者动画...

    墨迹天气动画

    本文将深入探讨如何在Android平台上实现"墨迹天气3.0"的引导界面及动画,通过分析相关代码和实践技巧,帮助开发者掌握这一技术。 首先,我们要理解引导界面(又称启动教程或新手引导)的主要目的是向新用户介绍应用...

    安卓开发-Android应用源码高仿墨迹天气引导界面.zip

    描述中的信息与标题一致,"安卓开发-Android应用源码高仿墨迹天气引导界面.zip" 暗示了这是一个关于Android应用开发的实践教程,聚焦于实现与墨迹天气应用相似的引导界面的源代码。通过分析和研究这个项目,开发者...

    Android UI开发第二十一篇——下拉刷新列表实现(pull to refresh)

    在Android应用开发中,下拉刷新(Pull To Refresh)功能是一项常见的UI交互设计,它允许用户通过在列表顶部向下拉动来触发数据的刷新操作。这一功能显著提升了用户体验,尤其是在查看实时信息更新时,如新闻、社交...

    安卓Android源码——高仿墨迹天气背景动画效果-云,风,雪等.rar

    这篇文档将深入解析《安卓Android源码——高仿墨迹天气背景动画效果-云,风,雪等.rar》这个压缩包中的内容,该资源主要涵盖了Android平台上实现动态天气背景效果的技术,包括云、风和雪等元素的动画实现。...

    IOS应用源码——SampleCode3.0.rar

    【标题】"IOS应用源码——SampleCode3.0.rar" 涵盖了iOS应用程序开发的核心知识领域,包括Objective-C或Swift编程语言、UIKit框架、Xcode集成开发环境(IDE)的应用以及苹果的设计原则。这个压缩包可能包含了示例...

    Android UI开发第十六篇——分享一个popuwindow实例

    在Android应用开发中,UI设计是至关重要的组成部分,而PopupWindow则是实现丰富交互效果的一种工具。本篇文章将深入探讨如何在Android中使用PopupWindow,并通过一个具体的实例来讲解其用法。 PopupWindow是Android...

    安卓Android源码——UI界面源码.zip

    这个名为“安卓Android源码——UI界面源码.zip”的压缩包,很显然是一个包含Android用户界面(UI)相关源代码的资源集合。下面我们将详细探讨Android UI界面的构建原理以及可能包含的知识点。 1. **Android UI框架*...

    安卓Android源码——高仿墨迹天气简洁版.zip

    这篇文档将深入解析《安卓Android源码——高仿墨迹天气简洁版》的相关知识点,主要关注Android应用开发、用户界面设计以及源码分析。 首先,Android是谷歌公司主导的开源移动操作系统,它基于Linux内核,广泛应用于...

    安卓Android源码——ui开发类库示例源码.zip

    在安卓(Android)平台上进行UI(用户界面)开发是一项至关重要的任务,因为它直接影响到应用程序的用户体验。本资源“安卓Android源码——ui开发类库示例源码.zip”提供了丰富的UI开发示例,帮助开发者更好地理解和...

    Android应用源码高仿墨迹天气引导界面

    【Android应用源码高仿墨迹天气引导界面】是一个Android开发相关的学习资源,主要目标是模仿墨迹天气应用中的引导界面。墨迹天气是一款知名的天气预报应用,其用户界面设计通常具有良好的用户体验和视觉吸引力,尤其...

    安卓Android源码——高仿墨迹天气.zip

    本压缩包“安卓Android源码——高仿墨迹天气.zip”提供了一个仿造墨迹天气应用的源代码,旨在帮助开发者深入理解Android应用程序的设计与实现,特别是涉及到UI设计、网络请求、数据处理等方面的知识点。 一、UI设计...

    Android实现高仿墨迹天气页面

    在Android开发中,创建一个高仿墨迹天气的页面是一项挑战性的任务,它涉及到多个方面的技术,包括UI设计、布局管理、数据加载以及动画效果。下面将详细解析这个项目涉及的关键知识点。 首先,UI设计是整个项目的...

    UI开发第八篇——ViewFlipper 左右滑动效果

    在Android UI开发中,实现界面元素的动态交互是提升用户体验的关键之一。本篇将深入探讨如何利用ViewFlipper组件和GestureDetector类实现左右滑动切换视图的效果,这在主页面或多个内容区域展示的场景中非常常见。 ...

    Android应用源码高仿墨迹天气引导界面.zip

    在Android应用开发中,"Android应用源码高仿墨迹天气引导界面.zip"是一个用于学习和参考的项目,它展示了如何构建类似墨迹天气应用的引导界面。引导界面,也称为启动教程或新手引导,通常在用户首次打开应用时出现,...

    安卓Android源码——高仿墨迹天气背景动画效果-云,风,雪等.zip

    在安卓(Android)平台上,开发一个高仿墨迹天气应用的背景动画效果,涉及到的知识点广泛而深入。本文将详细探讨如何实现云、风、雪等动态天气效果,以及在这个过程中可能遇到的关键技术和技巧。 首先,要理解...

    Android源码——UI界面源码.zip

    本资源“Android源码——UI界面源码.zip”包含了一些关于Android UI界面的源代码,帮助开发者深入理解Android UI的设计原理和实现机制。下面我们将详细探讨Android UI界面的相关知识点。 首先,Android UI主要基于...

    Android高级应用源码-Android应用源码高仿墨迹天气引导界面.zip

    该压缩包文件“Android高级应用源码-Android应用源码高仿墨迹天气引导界面.zip”包含了一套针对Android平台的高级应用示例,重点在于实现类似墨迹天气的引导界面。引导界面在应用程序中通常用于首次启动时,向用户...

Global site tag (gtag.js) - Google Analytics