Android自定义控件动画篇之视觉动画

2023-11-09 20:00:52

Android的动画由5种类型组成：alpha，scale，translate，rotate，set

alpha：渐变透明度
scale：缩放尺寸
translate：画面变换位置
rotate：画面旋转
set：动画集

我们需要在res文件夹中创建anim文件夹

代码调用

 Animation animation = AnimationUtils.loadAnimation(this, R.anim.test);
 textView.startAnimation(animation);

一.文件调用

1.scale（缩放）

android:fromXScale：动画开始时，控件在X轴的缩放比例
android:toXScale：动画结束时，控件在X轴的缩放比例
android:fromYScale：动画开始时，控件在Y轴的缩放比例
android:toYScale：动画结束时，控件在Y轴的缩放比例
android:pivotX：缩放点X轴坐标
android:pivotY：缩放点Y轴坐标

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="1.0"
    android:toXScale="0.4"
    android:fromYScale="1.2"
    android:toYScale="0.6"
    android:duration="700"
    android:pivotX="50"
    android:pivotY="50"
    >
</scale>

android:duration是动画时间
android:pivotX和android:pivotY都有三种取值方式，以50为例。分别有50，50%，50%p

android:pivotX="50"
android:pivotY="50"

以控件的左上角为坐标原点，向右移动50px,向下移动50px。

android:pivotX="50%"
android:pivotY="50%"

以控件的左上角为坐标原点，在原点坐标的基础上加上宽度的50%。

android:pivotX="50%p"
android:pivotY="50%p"

当取值在百分数后加上一个字母p时，表示在原点坐标的基础上加上宽度的100%。

2.alpha（透明）

android:fromAlpha：动画开始时的透明度，取值0.0-1.0
android:toAlpha：动画结束时的透明度，取值0.0-1.0

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

3.rotate（旋转）

android:fromDegrees：开始时的角度
android:toDegrees：结束时的角度
android:pivotX：旋转中心点X轴坐标
android:pivotY：旋转中心点Y轴坐标

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

4.translate（平移）

android:fromXDelta：起始点X轴，同样有三种格式
android:fromYDelta：起始点Y轴
android:toXDelta：终点X轴
android:toYDelta：终点Y轴

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

5.set（集合）

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="700">
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.1" />
    <rotate
        android:fromDegrees="0"
        android:pivotX="50"
        android:pivotY="50"
        android:toDegrees="-650" />
    <scale
        android:duration="700"
        android:fromXScale="1.0"
        android:fromYScale="1.2"
        android:pivotX="50%p"
        android:pivotY="50%p"
        android:toXScale="0.4"
        android:toYScale="0.6" />
    <translate
        android:fromXDelta="0"
        android:fromYDelta="-8"
        android:toXDelta="0"
        android:toYDelta="-80" />
</set>

6.Animation属性

android:duration：一次动画的持续时间，以毫秒为单位
android:fillAfter：设置为true，动画结束时，保持状态
android:fillBefore：设置为true，动画结束时，恢复原来状态
android:fillEnabled：与android:fillBefore效果相同
android:repeatCount：重复动画的次数，当值为infinite时，表示无限
android:repeatMode：有两个值：reverse和restart。reverse表示倒放，restart表示回放。

二.代码调用

标签	类
alpha	AlphaAnimation
scale	ScaleAnimation
translate	TranslateAnimation
rotate	RotateAnimation
set	AnimationSet

标签属性	方法
android:duration	void setDuration(long durationMillis)
android:fillAfter	void setFillAfter(boolean fillAfter)
android:fillBefore	void setFillBefore(boolean fillBefore)
android:fillEnabled	void setFillEnabled(boolean fillEnabled)
android:repeatCount	void setRepeatCount(int repeatCount)
android:repeatMode	void setRepeatMode(int repeatMode)

对应android:pivotX和 android:pivotY也有相应方法。

xml	代码
50	Animation.ABSOLUTE
50%	Animation.RELATIVE_TO_SELF
50%p	Animation.RELATIVE_TO_PARENT

Animation除了一些属性外，还有一些函数可以调用

取消动画

void cancel()

重置动画

void reset()

动画监听

animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {

            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

三.插值器

当我们定义一个动画时，我们可以通过插值器改变动画的速度。

类	XML
AccelerateDecelerateInterpolator	@android:anim/accelerate_decelerate_interpolator
AccelerateInterpolator	@android:anim/accelerate_interpolator
AnticipateInterpolator	@android:anim/anticipate_interpolator
AnticipateOvershootInterpolator	@android:anim/anticipate_overshoot_interpolator
BounceInterpolator	@android:anim/bounce_interpolator
CycleInterpolator	@android:anim/cycle_interpolator
DecelerateInterpolator	@android:anim/decelerate_interpolator
LinearInterpolator	@android:anim/linear_interpolator
OvershootInterpolator	@android:anim/overshoot_interpolator

类	意思
AccelerateDecelerateInterpolator	加速减速插值器，在动画中间加速
AccelerateInterpolator	加速插值器，在动画开始后加速
AnticipateInterpolator	初始偏移插值器，动画开始时向前偏移一段距离，然后应用动画
AnticipateOvershootInterpolator	是 AnticipateInterpolator与OvershootInterpolator 的结合
BounceInterpolator	弹跳插值器，模拟控件*落地后回弹的效果
CycleInterpolator	循环插值器，动画想你换特定次数，速率沿正弦曲线改变
DecelerateInterpolator	减速插值器，在动画开始后减速
LinearInterpolator	线性插值器，匀速加速
OvershootInterpolator	结束偏移插值器，在动画结束时，沿动画方向继续运动一段时间，在结束动画

调用的方法有两种
XML调用

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1.0"
    android:toAlpha="0.1"
    android:duration="700"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator "
    >
</alpha>

代码调用

 animation.setInterpolator(new AccelerateDecelerateInterpolator());

码农公寓

一.文件调用

二.代码调用

三.插值器

相关文章