首页投稿(暂停使用,暂停投稿)Android技术知识程序员

Android动画的灵魂舞曲(二)

2016-09-01  本文已影响260人  Fizzer

视图动画(View Animation)

视图动画中有两个类型:

1、渐变动画(Tween animation)
2、帧动画(Frame animation)

1、渐变动画(Tween animation)实现

通过创建一个动画来对一个图像或视图执行一系列的转换。如旋转,渐变,移动和拉伸。

先来看看一些xml属性的解释:

<set>
包裹其他动画元素(<alpha>, <scale>, <translate>, <rotate>)或其他<set>元素,java代码中为AnimationSet。

attributes description
android:interpolator: 插值器
android:shareInterpolator boolean值,为true的时候将同一个插值器共享到每个子元素中

<alpha>
一个淡入淡出的动画,java代码中是AlphaAnimation。

attributes description
android:fromAlpha float型,起点的透明度,从0.0-1.0
android:toAlpha float型,终点的透明度,从0.0-1.0

<scale>
一个缩放动画,java代码中是ScaleAnimation。

attributes description
android:fromXScale float,动画开始时基于原图像X轴方向的比例,1.0是没有变化,0就是无
android:toXScale float,动画结束时基于原图像X轴方向的比例,1.0是没有变化,0就是无
android:fromYScale float,动画开始时基于原图像Y轴方向的比例,1.0是没有变化,0就是无
android:toYScale float,动画结束时基于原图像Y轴方向的比例,1.0是没有变化,0就是无
android:pivotX 动画的起点X轴位置,有三种类型,基于像素大小,基于自身大小,基于父容器大小。(基于控件左上角为原点,50、50%、50%p-分别指的是坐标50px,视图X轴方向长度的一半,父布局的一半)
android:pivotY 动画的起点Y轴位置,与pivotX类型一致,换成Y轴方向

<translate>
一个位移动画,java代码中是TranslateAnimation。

attributes description
android:fromXDelta 动画X轴开始的起点,有三种类型,基于像素大小,基于自身大小,基于父容器大小。(基于控件左上角为原点,50、50%、50%p-分别指的是坐标50px,视图X轴方向长度的一半,父布局的一半)
android:toXDelta 动画X轴结束的起点,类型与上诉一致
android:fromYDelta 动画Y轴开始的起点
android:toYDelta 动画Y轴结束的起点

<rotate>
一个旋转动画,java代码中是RotateAnimation。计算旋转量,toDegrees -fromDegrees的角度就是旋转量(负数是逆时针,正数是顺时针)。0度是手机的竖直方向。

attributes description
android:fromDegrees float,开始旋转的角度(负数是逆时针,正数是顺时针)
android:toDegrees float,结束旋转的角度,同上
android:pivotX 旋转的点的X轴坐标(基于控件左上角为原点,50、50%、50%p-分别指的是坐标50px,视图X轴方向长度的一半,父布局的一半)
android:pivotY 旋转的点的Y轴坐标

以上的xml在对应的对象中都有相应的getter和setter方法来获取属性和设置属性。

xml实现

大概了解了上面的属性后,我们要开始来点实战来实现这些个属性。

视图动画文件

xml配置文件:

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false"
    android:duration="5000">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
    <scale
        android:fromXScale="0"
        android:fromYScale="0"
        android:toXScale="1.0"
        android:toYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%" />
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="500"
        android:toYDelta="500" />
    <!-- 0度是竖直状态 -->
    <rotate
        android:fromDegrees="0"
        android:toDegrees="270"
        android:pivotX="50%" 
       android:pivotY="50%"/>
</set>

java代码:

AnimationSet animSet = (AnimationSet) AnimationUtils.loadAnimation(context, R.anim.anim_set);
moveBtn.startAnimation(animSet);

只需要通过以上步骤我们就能够实现压缩动画了。在这里解释下对于setAnimation()和startAnimation()的区别,如下图:设置下一条要播放的动画,若是需要立即播放动画,使用startAnimation()。而setAnimation()这种方法提供了允许细粒度的控制开始时间和无效,但是必须确保1)动画有一组开始时间,和2)视图的父(控制动画在儿童)将动画应该开始时失效。该方法的是需要一定的条件才能触发的。

谷歌官方文档setAnimation()说明.png

java代码实现:

我先放几张图,让大家了解相关的类:


Paste_Image.png
AlphaAnimation构造函数
AnimationSet构造函数
RotateAnimation构造函数
ScaleAnimation构造函数
TranslateAnimation构造函数

其实这几种动画的构造函数都是需要在实例化对象的将值传递进去的。而后在实例化对象后,直接让视图调用startAnimation()即可。

translate animation
TranslateAnimation
rotate animation
RotateAnimation
scale animation
ScaleAnimation
alpha animation
device-2016-08-31-215431.gif
animation-set
Animation-set

2、帧动画(Frame animation)实现

将图片像电影一样按顺序播放。

<animation-list>
该标签必须是根标签,包裹<item>

attributes description
android:oneshot boolean,是否只播放一次,false-否,true-只播放一次

<item>
一个动画的单帧,必须是<animation-list>的子元素

attributes description
android:drawable int,图片资源
android:duration Integer,动画播放时间

xml实现

帧动画的文件放在/res/drawable中。


animation-list文件
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/dog"
        android:duration="500" />
    <item
        android:drawable="@drawable/cat_dog"
        android:duration="500" />
</animation-list>

java代码:

Drawable drawable = context.getDrawable(R.drawable.list_anim);
imageView.setBackground(drawable);
AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getBackground();
animationDrawable.start();

java代码实现

AnimationDrawable animDrawable = new AnimationDrawable();
animDrawable.addFrame(getDrawable(R.drawable.cat_dog), 200);
animDrawable.addFrame(getDrawable(R.drawable.dog), 200);
imageView.setBackground(animDrawable);
animDrawable.start();
animation-list Animation-list

以上就是视图动画的学习总结,总结出来可能有遗漏或者错误,欢迎指正~
个人总结。转载请注明出处~http://www.jianshu.com/p/78f5987d01b6

上一篇下一篇

猜你喜欢

热点阅读