实现墨迹天气向上滑动的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>
<?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 ,该动画转化在动画结束后被应用
- -->
<!-- 尺寸伸缩动画效果 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>
<?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:反方向执行
- -->
<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 属性为动画持续时间
- 说明: 时间以毫秒为单位
- gt;
<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>
<?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 属性为动画持续时间
- 说明: 时间以毫秒为单位
- -->
<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>
<?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>
- t1_icon1.setImageResource(R.drawable.t1_frame_animation);
- t1_icon1_animationDrawable = (AnimationDrawable) t1_icon1
- .getDrawable();
- t1_icon1_animationDrawable.start();
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();
- }
- });
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);
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
参考:
http://developer.android.com/guide/topics/resources/animation-resource.html
http://developer.android.com/reference/android/view/animation/Animation.html