前面写过《墨迹天气3.0引导界面及动画实现》，里面完美实现了动画效果，那一篇文章使用的View Animation，这一篇文章使用的Property Animation实现。Property Animation是Android3.0以后新增的动画库。

这篇文章的源代码以及效果在github。

实现墨迹天气向上滑动的viewpager使用的开源库ViewPager-Android。

ViewPager-Android开源库设置app:orientation定义滑动方向。

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

                

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHl6X2xtbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" width="240" height="400" alt="" style="border: none; max-width: 100%;" />

图一                                                                                          图二

                

图三                                                                                        图四

墨迹天气的引导界面使用的无非是移动、渐变、缩放、转动或者当中几个的组合。

我们介绍当中的部分实现。

1、缩放动画

首先是图一的“极低耗电”使用了一个缩放效果。使用Property Animation实现例如以下：

xml动画文件：

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:ordering="together" >

    <objectAnimator

        android:duration="1000"

        android:interpolator="@android:anim/accelerate_decelerate_interpolator"

        android:propertyName="scaleX"

        android:valueFrom="1.0"

        android:valueTo="1.1"

        android:valueType="floatType" >

    </objectAnimator>

    <objectAnimator

        android:duration="1000"

        android:interpolator="@android:anim/accelerate_decelerate_interpolator"

        android:propertyName="scaleY"

        android:valueFrom="1.0"

        android:valueTo="1.1"

        android:valueType="floatType" >

    </objectAnimator>

</set>

java使用：

	animation1=(AnimatorSet)AnimatorInflater.loadAnimator(PropertyAnimActivity.this,

				    R.animator.tutorail_rotate);

			LinearInterpolator lin = new LinearInterpolator();

			animation1.setInterpolator(lin);

			t1_icon2.setVisibility(View.VISIBLE);

			animation1.setTarget(t1_icon2);

			animation1.start();

2、移动渐变组合动画

图一中以下的箭头使用了移动渐变组合动画，实现例如以下：

xml文件：

<?

xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:ordering="together" >

    <!--

    能够包括<objectAnimator>, <valueAnimator>,<set>项

    属性：android:ordering=["together" | "sequentially"]，子集运行顺序

    sequentially	Play animations in this set sequentially

    together (default)	Play animations in this set at the same time.

    -->

    <set

        xmlns:android="http://schemas.android.com/apk/res/android"

        android:ordering="together" >

        <objectAnimator

            android:duration="1000"

            android:propertyName="translationX"

            android:repeatCount="infinite"

            android:repeatMode="reverse"

            android:valueFrom="0"

            android:valueTo="0"

            android:valueType="floatType" >

        </objectAnimator>

        <objectAnimator

            android:duration="1000"

            android:propertyName="translationY"

            android:repeatCount="infinite"

            android:repeatMode="reverse"

            android:valueFrom="-15"

            android:valueTo="20"

            android:valueType="floatType" >

        </objectAnimator>

    </set>

    <objectAnimator

        android:duration="1000"

        android:propertyName="alpha"

        android:repeatCount="infinite"

        android:valueFrom="1.0"

        android:valueTo="0.3"

        android:valueType="floatType" >

    </objectAnimator>

    <!--

   objectAnimator：

        android:propertyName

            对view能够设置一下值:

               translationX and translationY:

                   These properties control where the View is located

                   as a delta from its left and top coordinates which

                   are set by its layout container.

               rotation, rotationX, and rotationY:

                   These properties control the rotation

                   in 2D (rotation property) and 3D around the pivot point.

               scaleX and scaleY:

                   These properties control the 2D scaling of a View around

                   its pivot point.

               pivotX and pivotY:

                   These properties control the location of the pivot point,

                   around which the rotation and scaling transforms occur.

                   By default, the pivot point is located at the center of

                   the object.

               x and y:

                   These are simple utility properties to describe

                   the final location of the View in its container,

                   as a sum of the left and top values and translationX

                   and translationY values.

               alpha:

                   Represents the alpha transparency on the View.

                   This value is 1 (opaque) by default, with a value of 0

                   representing full transparency (not visible).

               还能够设置"backgroundColor"等值

        android:valueTo

            float, int, or color. Required. The value where the animated property ends.

            Colors are represented as six digit hexadecimal numbers (for example, #333333).

        android:valueFrom

            float, int, or color. The value where the animated property starts. If not specified,

            the animation starts at the value obtained by the property's get method.

            Colors are represented as six digit hexadecimal numbers (for example, #333333).

        android:duration

            int. The time in milliseconds of the animation. 300 milliseconds is the default.

        android:startOffset

            int. The amount of milliseconds the animation delays after start() is called.  

        android:repeatCount：反复次数

            说明：

            infinite：循环运行，

            详细正整数表示循环次数

        android:repeatMode：反复模式，

            说明：

                restart：又一次从头開始运行

                reverse：反方向运行

        android:valueType

           Keyword. Do not specify this attribute if the value is a color.

           The animation framework automatically handles color values

           intType:	Specifies that the animated values are integers

           floatType (default):	Specifies that the animated values are floats

    -->

</set>

Java调用动画资源和前面是一样的，不做过多说明。

3、旋转缩放组合动画

图1中间使用了旋转缩放组合动画，，实现例如以下：

<?xml version="1.0" encoding="utf-8"?

>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:ordering="together" >

    <set

        xmlns:android="http://schemas.android.com/apk/res/android"

        android:ordering="together" >

        <objectAnimator

            android:duration="800"

            android:interpolator="@android:anim/accelerate_decelerate_interpolator"

            android:propertyName="scaleX"

            android:valueFrom="0.0"

            android:valueTo="1.2"

            android:valueType="floatType" >

        </objectAnimator>

        <objectAnimator

            android:duration="800"

            android:interpolator="@android:anim/accelerate_decelerate_interpolator"

            android:propertyName="scaleY"

            android:valueFrom="0.0"

            android:valueTo="1.2"

            android:valueType="floatType" >

        </objectAnimator>

    </set>

    <objectAnimator

        android:duration="3000"

        android:propertyName="rotation"

        android:repeatCount="-1"

        android:valueFrom="0.0"

        android:valueTo="359.0"

        android:valueType="floatType" >

    </objectAnimator>

</set>

Java调用动画资源和前面是一样的，不做过多说明。

4、平移动画

图三很多其它的使用了平移动画，由于要计算位置，没有使用xml资源文件。Java实现：

	transAnimationX2=ObjectAnimator.ofFloat(t3_icon2, "translationX", fx1, tx1);

			transAnimationX2.setDuration(800);

			transAnimationX2.setRepeatCount(Animation.INFINITE);// Animation.INFINITE

			transAnimationX2.setRepeatMode(Animation.RESTART);

			transAnimationX2.setInterpolator(new LinearInterpolator());

			transAnimationY2=ObjectAnimator.ofFloat(t3_icon2, "translationY", fy1, ty1);

			transAnimationY2.setDuration(800);

			transAnimationY2.setRepeatCount(Animation.INFINITE);// Animation.INFINITE

			transAnimationY2.setRepeatMode(Animation.RESTART);

			transAnimationY2.setInterpolator(new LinearInterpolator());

			PropertyValuesHolder pvhX3 = PropertyValuesHolder.ofFloat("translationX", fx2, tx2);

			PropertyValuesHolder pvhY3 = PropertyValuesHolder.ofFloat("translationY", fy2, ty2);

			transAnimation3=ObjectAnimator.ofPropertyValuesHolder(t3_icon3, pvhX3, pvhY3);

			transAnimation3.setDuration(1200);

			transAnimation3.setRepeatCount(Animation.INFINITE);

			transAnimation3.setRepeatMode(Animation.RESTART);

			transAnimation3.setInterpolator((new LinearInterpolator()));

			PropertyValuesHolder pvhX4 = PropertyValuesHolder.ofFloat("translationX", fx3, tx3);

			PropertyValuesHolder pvhY4 = PropertyValuesHolder.ofFloat("translationY", fy3, ty3);

			transAnimation4=ObjectAnimator.ofPropertyValuesHolder(t3_icon4, pvhX4, pvhY4);

			transAnimation4.setDuration(1200);

			transAnimation4.setRepeatCount(Animation.INFINITE);

			transAnimation4.setRepeatMode(Animation.RESTART);

			transAnimation4.setInterpolator((new LinearInterpolator()));

			PropertyValuesHolder pvhX5 = PropertyValuesHolder.ofFloat("translationX", fx4, tx4);

			PropertyValuesHolder pvhY5 = PropertyValuesHolder.ofFloat("translationY", fy4, ty4);

			transAnimation5=ObjectAnimator.ofPropertyValuesHolder(t3_icon5, pvhX5, pvhY5);

			transAnimation5.setDuration(800);

			transAnimation5.setRepeatCount(Animation.INFINITE);

			transAnimation5.setRepeatMode(Animation.RESTART);

			transAnimation5.setInterpolator((new LinearInterpolator()));

			flag3=true;

			// 延迟1秒

			new Handler() {

				@Override

				public void dispatchMessage(Message msg) {

					// TODO Auto-generated method stub

					if(flag3)

						super.dispatchMessage(msg);

				}

				public void handleMessage(android.os.Message msg) {

					if (msg.what == 1) {

						t3_icon2.setVisibility(View.VISIBLE);

						t3_icon3.setVisibility(View.VISIBLE);

						t3_icon4.setVisibility(View.VISIBLE);

						t3_icon5.setVisibility(View.VISIBLE);

						transAnimationX2.start();

						transAnimationY2.start();

						transAnimation3.start();

						transAnimation4.start();

						transAnimation5.start();

						t3_icon6_animationDrawable.start();

					}

				};

			}.sendEmptyMessageDelayed(1, 1000);// 1秒

这个动画中更重要的是计算初始和结束位置：

	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(

								PropertyAnimActivity.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();

					}

				});

5、循环插值器

第四页动画中重要的使用了CycleInterpolator（循环插值器）

	ObjectAnimator objAnim=ObjectAnimator.ofFloat(t4_icon1, "rotation", 0f, 10f);

			CycleInterpolator interpolator = new CycleInterpolator(3.0f);

			objAnim.setStartDelay(500);

			objAnim.setDuration(3000);

			objAnim.setRepeatCount(Animation.INFINITE);// Animation.INFINITE

			objAnim.setInterpolator(interpolator);

			t4_icon1.setPivotX(t4_icon1.getWidth()*0.47f);

			t4_icon1.setPivotY(t4_icon1.getHeight()*0.05f);

			objAnim.start();

上面基本实现了墨迹天气的动画效果，很多其它请參考代码。

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

參考：

http://developer.android.com/guide/topics/graphics/prop-animation.html#how

Android UI开发第四十三篇——使用Property Animation实现墨迹天气3.0引导界面及动画实现的更多相关文章

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

    周末升级了墨迹天气,看着引导界面做的不错,模仿一下,可能与原作者的代码实现不一样,但是实现的效果还是差不多的.先分享一篇以前的文章,android动画的基础知识,<Android UI开发第十二 ...

  2. Android UI开发第三十三篇——Navigation Drawer For Android API 7

    Creating a Navigation Drawer中使用的Navigation Drawer的android:minSdkVersion="14",现在Android API ...

  3. Android UI开发第四十篇——ScrollTricks介绍

    ScrollTricks是一个开源控件,实现了两个简单功能: 1.Quick Return:向上滑动时,View也向上滑动并且消失,当向下滑动时,View马上出现.例如Google Now的搜索功能. ...

  4. Android UI开发第二十八篇——Fragment中使用左右滑动菜单

    Fragment实现了Android UI的分片管理,尤其在平板开发中,好处多多.这一篇将借助Android UI开发第二十六篇——Fragment间的通信. Android UI开发第二十七篇——实 ...

  5. Android UI开发第三十篇——使用Fragment构建灵活的桌面

    http://www.lupaworld.com/article-222973-1.html 当我们设计应用程序时,希望能够尽最大限度的适配各种设备,包括4寸屏.7寸屏. 10寸屏等等,Android ...

  6. Android UI开发第三十一篇——Android的Holo Theme

    好长时间没写Android UI方面的文章了,今天就闲扯一下Android的Holo主题.一直做android开发的可能都知道,Android 系统的UI有过两次大的变化,一次是android 3.0 ...

  7. 【转】Android UI开发第三十一篇——Android的Holo Theme

    好长时间没写Android UI方面的文章了,今天就闲扯一下Android的Holo主题.一直做android开发的可能都知道,Android 系统的UI有过两次大的变化,一次是android 3.0 ...

  8. Android UI开发第四十二篇——实现实现易信的圆形图像和对话列表的图像显示部分

    显示图像时,很多个性化显示,圆形或圆角.气泡等等,我们这一篇文章探讨一下圆形和气泡的显示,仿照易信中的实现,先看下效果图: 代码: public class RoundImageView extend ...

  9. Android UI开发第二十六篇——Fragment间的通信

    为了重用Fragment的UI组件,创建的每个Fragment都应该是自包含的.有它自己的布局和行为的模块化组件.一旦你定义了这些可重用的Fragment,你就可以把它们跟一个Activity关联,并 ...

随机推荐

  1. C++序列化对象

    需求 . 在写代码的过程中,经常会需要把代码层面的对象数据保存到文件,而这些数据会以各种格式存储．例如:json,xml,二进制等等．最近恰好就需要把对象以二进制存储到硬盘．这是一个很简单的需求,相比 ...

  2. python subprocess 杀掉全部派生的子进程

     下面就是今天下午的研究成果.    发布系统需要响应用户的中断请求,需要在GET方法中杀掉由subprocess派生的子进程,刚开始直接用os.kill 发现子进程的子进程无法kill,谷歌了一些, ...

  3. uva 11491:Erasing and Winning(贪心)

    题意:给一个长n(n<10^5)位的数,删除d位,求删除后最大的数.(原数无前导0) 思路:从前往后扫,如果a[i] > a[i-1],则删除a[i-1].我暴力的用链表实现了…… #in ...

  4. 前端判断是否APP客户端打开触屏，实现跳转APP原生组件交互之遐想

    今天做了一个html的活动页面,本来马上就要完工,准备开开心心收尾,结果~... 产品突然提出需要说,要讲html中的某些交互和APP原生组件挂钩,心里一万头xxx奔过~ 静下心来思考 以往我们是判断 ...

  5. Light oj 1233 - Coin Change (III) (背包优化)

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1233 题目就不说明了. 背包的二进制优化,比如10可以表示为1 2 4 3,而 ...

  6. 转：Maven项目中获取classpath和资源文件的路径

    假设资源文件放在maven工程的 src/main/resources 资源文件夹下,源码文件放在 src/main/java/下, 那么java文件夹和resources文件夹在运行时就是class ...

  7. 全栈一路坑(4)——创建博客的API

    上一篇博客:全站之路一路坑(3)——使用百度站长工具提交站点地图 这一篇要搭建一个API平台,一是为了给博客补充一些功能,二是为以后做APP提供数据接口. 首先需要安装Django REST Fram ...

  8. Working With Push Buttons In Oracle Forms

    Managing push buttons at run time in Oracle Forms is very simple and in this tutorial you will learn ...

  9. Android　分享透明图片到微信变黑的问题

    /** * bitmap中的透明色用白色替换 * * @param bitmap * @return */ public static Bitmap changeColor(Bitmap bitmap ...

  10. 单源最短路Dijstra算法

    Dijstra算法是寻找从某一顶点i出发到大其他顶点的最短路径.Distra算法的思想与Prim算法很像,它收录顶点的规则是按照路径长度递增的顺序收录的.设v0是源顶点,我们要寻找从v0出发到其他任意 ...