Android动画之补间动画TweenAnimation

2019-08-03 本文已影响9人 sliencexiu

Animation 分类说明

前面分析了Animation基类，然后简单概述了动画原理,Animation动画概述
Animation可以利用类和XML文件两种方式生成动画：
下面讲解如何使用Animation的子类，包括：

translate (平移动画) --- TranslateAnimation
scale (缩放动画) --- ScaleAnimation
rotate （旋转动画） --- RotateAnimation类
alpha （透明度动画） --- AlphaAnimation 类

使用xml动画文件方式，利用 AnimationUtils loadAnimation（）加载xml文件，可以解析生成对应动画。

1 TranslateAnimation 平移动画

构造函数：

//从资源文件加载
TranslateAnimation(Context context, AttributeSet attrs)
TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)

参数说明：

image

参数说明
fromXDelta：移动的起始点X轴坐标，可以是具体数值、百分数、百分数+p 三种样式，比如 10、10%、10%p
fromYDelta：移动的起始点Y轴从标，可以是数值、百分数、百分数p 三种样式；
toXDelta ： 移动的结束点X轴坐标
toYDelta ： 移动的结束点Y轴坐标

image

**fromXType : ** fromXValue的坐标类型
fromXValue: X轴方向移动的初始坐标
toXType: toXValue的坐标类型
toXValue X轴方向结束的坐标
fromYType: fromYValue的坐标类型
fromYValue: Y轴方向移动的起始点坐标
toYType: toYValue的坐标类型
toYValue： Y轴方向结束的坐标

坐标类型Type的种类：
ABSOLUTE，RELATIVE_TO_SELF，RELATIVE_TO_PARENT第一个代表具体值，第二个相对于view自己，第三个相对于父布局。

重要：所有坐标类似(fromXdelta，toXDelta,fromYDelta,ToYDelta)的值都是相对于View的左上角，所以动画坐标的原点都是View自己的左上角。view的左上角为动画进行的坐标原点（0,0）

第一个构造函数和第二个构造函数的结构不同，且第一个构造函数没有坐标类型，但是它的数值可以分成三类可以是具体数值、百分数、百分数+p 三种样式这三类就分别对应了ABSOLUTE，RELATIVE_TO_SELF，RELATIVE_TO_PARENT。

第一个构造函数中的属性可以用到xml动画文件中，第二个则侧重代码生成平移动画。

XML实现移动动画
具体值：
一个大小为400,200的view移动400,200的距离，之后保存动画后的状态，为了标识view移动了会在view的底部绘制一个大小位置一样的粉色view作为参照。

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:toXDelta="400"
    android:fromYDelta="0"
    android:toYDelta="200"
    android:duration="3000"
    android:fillAfter="true">
</translate>

image

两个400*200的TextView相互覆盖，然后移动顶部的TextView移动（400,200）的距离。fillAfter为true表示动画结束时保持动画最终的效果。

如果利用百分数如何实现上面相同的代码，百分数是相对于自身大小，所以直接使用100%即可

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:toXDelta="100%"
    android:fromYDelta="0"
    android:toYDelta="100%"
    android:duration="3000"
    android:fillAfter="true">
</translate>

100%相当于view的宽和高的100%。

image

可以看到结果相同。

利用百分数+p实现从顶部移动parent宽高的一半距离。
<?xml version="1.0" encoding="utf-8"?>

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0"
    android:toXDelta="50%p"
    android:fromYDelta="0"
    android:toYDelta="50%p"
    android:duration="3000"
    android:fillAfter="true">
</translate>

结果图，红色框是截图是画上的，为了标识移动了整个父view的宽高的一半。

image

如果设置fromXDelta和fromYDelta为负呢？
由于动画坐标原点都是view的左上角，所以如果为负，动画开始时会出现在view的左上方。

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="-100%"
    android:toXDelta="50%p"
    android:fromYDelta="-100%"
    android:toYDelta="50%p"
    android:duration="3000"
    android:fillAfter="true">
</translate>

image

代码方式实现，简单例子

TranslateAnimation translateAnimation = new TranslateAnimation(0, 400, 0, 200);
translateAnimation.setDuration(3000);
translateAnimation.setFillAfter(true);
mTVDemo.startAnimation(translateAnimation);

2 AlphaAnimation 透明度动画

构造函数
AlphaAnimation(Context context, AttributeSet attrs)：读取xml文件生成
AlphaAnimation(float fromAlpha, float toAlpha)：
参数说明：
fromAlpha:开始的透明度，toAlpha：结束时的透明度
取值： 1.0f代表不透明， 0.0f表示全透明

xml实现
实现view从透明度0.1，变化到1.0.

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="0.1"
    android:toAlpha="1.0"
    android:duration="3000"
    android:fillBefore="true">
</alpha>

代码实现

AlphaAnimation alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
alphaAnimation.setDuration(3000);
alphaAnimation.setFillBefore(true);
mTVDemo.startAnimation(alphaAnimation);

3 ScaleAnimation 缩放动画

构造函数：

ScaleAnimation(Context context, AttributeSet attrs)：利用xml文件生成对象
ScaleAnimation(float fromX, float toX, float fromY, float toY)

ScaleAnimation(float fromX, float toX, float fromY, float toY, float pivotX, float pivotY)

ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

参数说明

fromXScale X轴方向上动画开始时相对自身的缩放比例，取值float，1.0表示没有缩放，大于1.0表示放大，小于1.0表示缩小
toXScale X轴方向上动画结束时相对自身的缩放比例；
fromYScale Y轴方向上动画开始时相对自身的缩放比例，
toYScale X轴方向上动画结束时相对自身的缩放比例；
pivotX X轴方向上相对于原点（view左上角）的移动坐标，移动后作为新的缩放原点，可以是数值、百分数、百分数p 三种样式。
pivotY Y轴方向上相对于原点的移动坐标，意义和android:pivotX一样。
pivotXType 坐标类型，类似TranslateAnimation的坐标类型，主要用于代码生成animation时，指定坐标类型
pivotYType 坐标类型，类似TranslateAnimation的坐标类型，主要用于代码生成animation时，指定坐标类型
变换的坐标原点依然是view的左上角

XML方式实现动画
从坐标原点（view左上角），view由0，放大两倍。

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0.0"
    android:toXScale="2.0"
    android:fromYScale="0.0"
    android:toYScale="2.0"
    android:pivotX="0"
    android:pivotY="0"
    android:duration="3000"
    android:fillAfter="true"/>

在以view左上角为坐标原点从0经历3秒放大两倍view。

image

修改坐标原点为view的中心点

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0.0"
    android:toXScale="2.0"
    android:fromYScale="0.0"
    android:toYScale="2.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="3000"
    android:fillAfter="true"/>

利用百分比，移动到view的中心进行缩放

image

利用百分数+p，设置缩放原点

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0.0"
    android:toXScale="2.0"
    android:fromYScale="0.0"
    android:toYScale="2.0"
    android:pivotX="50%p"
    android:pivotY="50%p"
    android:duration="3000"
    android:fillAfter="true"/>

利用百分数+p 移动缩放点左右都移动父view的一半，然后进行缩放。

类似投影方式，缩放原点和最终图片的关系：

image

代码实现

ScaleAnimation scaleAnimation = new ScaleAnimation(0.0f, 2.0f, 0.0f, 2.0f);
scaleAnimation.setDuration(3000);
scaleAnimation.setFillAfter(true);
mTVDemo.startAnimation(scaleAnimation);

4 RotateAnimation 旋转动画

构造函数

RotateAnimation(Context context, AttributeSet attrs)
RotateAnimation(float fromDegrees, float toDegrees)
RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)
RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

参数说明

fromDegrees 开始旋转的角度，正值顺时针，负值逆时针
toDegrees 结束时旋转到的角度，正值顺时针，负值逆时针
pivotX 旋转起点X轴坐标，可以是数值、百分数、百分数p 和上面的类似规则一样，左上角为坐标原点。
pivotY 旋转起点Y轴坐标，可以是数值、百分数、百分数p
pivotXType,pivotYType 类似和其他动画类含义类似。

XML方式实现：
实现view从0度顺时针旋转270度，坐标原点为view左上角（0,0）

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="270"
    android:pivotX="0"
    android:pivotY="0"
    android:duration="3000"
    android:fillAfter="true">
</rotate>

image

利用百分数，修改坐标原点为view的中心点

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="270"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="3000"
    android:fillAfter="true">
</rotate>

绕中心旋转

image

代码实现：

RotateAnimation rotateAnimation = new RotateAnimation(0.0f, 270f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(3000);
rotateAnimation.setFillAfter(true);
mTVDemo.startAnimation(rotateAnimation);

5 AnimationSet 联合动画

animationSet继承自Animation没有自己的属性完全继承父类，但是有些属性对它无效，属性说明：

duration, repeatMode, fillBefore, fillAfter: 这些属性设置给了AnimationSet会作用于它内部的Animation对象.
repeatCount, fillEnabled: 这些属性对AnimationSet无效，将被忽略.
startOffset, shareInterpolator: 这些属性只作用于AnimationSet.

构造函数
AnimationSet(Context context, AttributeSet attrs)
AnimationSet(boolean shareInterpolator) shareInterpolator取值为true时，指在AnimationSet中定义一个插值器（interpolater），它下面的所有动画共同使用，为false，则各自定义插值器。

常用方法：添加动画：
public void addAnimation (Animation a)

XML方式实现动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:fillAfter="true">
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100"
        android:toYDelta="100" />
    <alpha
        android:fromAlpha="0.5"
        android:toAlpha="1.0" />

    <scale
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="2.0"
        android:toYScale="2.0" />
    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="-270" />
</set>

image

代码实现

AnimationSet animationSet = new AnimationSet(true);
animationSet.addAnimation(alphaAnimation);
animationSet.addAnimation(scaleAnimation);
animationSet.addAnimation(rotateAnimation);
mTVDemo.startAnimation(animationSet);

Animation动画概述和执行原理
 Android动画之补间动画TweenAnimation
Android动画之逐帧动画FrameAnimation
Android动画之插值器简介和系统默认插值器
 Android动画之插值器Interpolator自定义
 Android动画之视图动画的缺点和属性动画的引入
 Android动画之ValueAnimator用法和自定义估值器
 Android动画之ObjectAnimator实现补间动画和ObjectAnimator自定义属性
 Android动画之ObjectAnimator中ofXX函数全解析-自定义Property，TypeConverter，TypeEvaluator
Android动画之AnimatorSet联合动画用法
 Android动画之LayoutTransition布局动画
 Android动画之共享元素动画
 Android动画之ViewPropertyAnimator（专用于view的属性动画）
Android动画之Activity切换动画overridePendingTransition实现和Theme Xml方式实现
 Android动画之ActivityOptionsCompat概述
 Android动画之场景变换Transition动画的使用
 Android动画之Transition和TransitionManager使用
 Android动画之圆形揭露动画Circular Reveal
Android 动画之 LayoutAnimation 动画
 Android动画之视图动画的缺点和属性动画的引入

Android动画之补间动画TweenAnimation

Animation 分类说明

1 TranslateAnimation 平移动画

2 AlphaAnimation 透明度动画

3 ScaleAnimation 缩放动画

4 RotateAnimation 旋转动画

5 AnimationSet 联合动画

猜你喜欢

热点阅读