Android-动画-view 动画笔记
2018-06-21 本文已影响29人
d74f37143a31
最后要实现的动画效果有:旋转,平移,缩放,透明度。主要通过系统自带的
ic_launcher_round
这张图来演示。
View 动画推荐使用 xml 编写,易于阅读。
View 动画并未改变 View 的真实位置,在 View 需要做交互时需要注意!!!
<set></set>
中属性的含义
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:fillBefore="true"
android:repeatMode="reverse"
android:shareInterpolator="true"
android:startOffset="@android:"
android:duration="3000">
<alpha android:fromAlpha="1.0"
android:toAlpha="0.3"/>
</set>
分析:
android:duration="" 动画持续时间,以毫秒为单位
android:fillAfter="" 如果设置为true,控件动画结束后,将停留在动画结束的状态
android:fillBefore="" 如果设置为true,控件动画结束时,将回到动画开始的状态
android:startOffset="" 设置动画执行之前等待的时间(单位:毫秒)
android:repeatCount="" 重复次数
android:repeatMode="" 动画重复类型,reverse 和 restart 两个值,reverse 表示倒序回放,restart 表示从头开始放一遍
android:interpolator="" 设定插值器。
旋转:通过动画改变被作用 View 的旋转角度
语法
<rotate>
android:fromDegrees="int" //旋转开始角度,正数代表顺时针度数,负数代表逆时针度数
android:toDegrees="int" //旋转结束角度
android:pivotX="float" //缩放起点 X 坐标(数值,百分数,百分数p,例如 50表示以当前view左上角加 50px)
android:pivotY="float" //缩放起点 Y 坐标(50% 表示以当前 View 的左上角加上当前 view 宽高的 50% 作为起始点)
(50%p 表示以当前 View 的左上角加上父控件宽高的 50% 作为起始点)
</rotate>
实例:view 3s 内旋转 90°
anim_rotate.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3000">
<rotate android:fromDegrees="0"
android:toDegrees="90"/>
</set>
Java 中调用:点击按钮开启旋转动画
rotate.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 清除之前的动画效果,否则可能会出现动画失效的情况。mViewAnimShowIcon 为作用的 view
mViewAnimShowIcon.clearAnimation();
Animation rotateAnim = AnimationUtils.loadAnimation(AnimViewActivity.this, R.anim.anim_rotate);
mViewAnimShowIcon.setAnimation(rotateAnim);
}
});
透明度:通过动画改变被作用 View 的透明度
语法
<alpha>
android:fromAlpha="float" //动画开始时的透明度(0.0--1.0,0.0是全透明,1.0是不透明)
android:toAlpha="float" //动画结束时的透明度
</alpha>
实例:view 3s 内透明度从 1.0f 变为 0.3f
anim_alpha.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3000">
<alpha android:fromAlpha="1.0"
android:toAlpha="0.3"/>
</set>
Java 中调用:点击按钮开启透明度动画
alpha.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mViewAnimShowIcon.clearAnimation();
Animation alphaAnim = AnimationUtils.loadAnimation(AnimViewActivity.this, R.anim.anim_alpha);
mViewAnimShowIcon.setAnimation(alphaAnim);
}
});
平移:通过动画改变被作用 View 的位置
语法
<translate>
android:fromXDelta="float" //起始点 X 轴坐标(参数含义同 rotate )
android:fromYDelta="float" //起始点 Y 轴坐标
android:toXDelta="float" //结束点 X 轴坐标
android:toYDelta="float" //结束点 Y 轴坐标
</translate>
实例:view 3s 内向右移动 100 个像素
anim_translate.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3000">
<translate
android:fromXDelta="0.0"
android:toXDelta="100.0"/>
</set>
Java 中调用:
translate.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 必须先清除动画
mViewAnimShowIcon.clearAnimation();
Animation translateAnim = AnimationUtils.loadAnimation(AnimViewActivity.this, R.anim.anim_translate);
mViewAnimShowIcon.setAnimation(translateAnim);
}
});
缩放:通过动画改变被作用 View 的缩放
语法
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3000">
<scale android:fromXScale="1.0"
android:toXScale="0.5"/>
</set>
实例:view 3s 内旋转 90°
anim_rotate.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3000">
<scale android:fromXScale="1.0"
android:toXScale="0.5"/>
</set>
Java 中调用:
scale.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mViewAnimShowIcon.clearAnimation();
Animation scaleAnim = AnimationUtils.loadAnimation(AnimViewActivity.this, R.anim.anim_scale);
mViewAnimShowIcon.setAnimation(scaleAnim);
}
});
插值器:系统内置了以下几个插值器,直接使用即可。
- AccelerateDecelerateInterpolator:先加速再减速
- LinearInterpolator:一直匀速,默认的差值器
- AccelerateInterpolator:一直加速
- DecelerateInterpolator:一直减速
- AnticipateInterpolator:先回拉一下再进行正常动画轨迹
- OvershootInterpolator:动画会超过目标值一些,然后再弹回来
- AnticipateOvershootInterpolator:开始前回拉,最后超过一些然后回弹
- BounceInterpolator:在目标值处弹跳一会后停止
- CycleInterpolator:这个也是一个正弦 / 余弦曲线,它和 AccelerateDecelerateInterpolator 的区别是,它可以自定义曲线的周期,所以动画可以不到终点就结束,也可以到达终点后回弹,回弹的次数由曲线的周期决定,曲线的周期由 CycleInterpolator() 构造方法的参数决定
- PathInterpolator:自定义动画完成度 / 时间完成度曲线,用这个 Interpolator 你可以定制出任何你想要的速度模型。定制的方式是使用一个 Path 对象来绘制出你要的动画完成度 / 时间完成度曲线
- FastOutLinearInInterpolator:加速运动,FastOutLinearInInterpolator 的曲线公式是用的贝塞尔曲线,而 AccelerateInterpolator 用的是指数曲线。具体来说,它俩最主要的区别是 FastOutLinearInInterpolator 的初始阶段加速度比 AccelerateInterpolator 要快一些。
插值器使用方式
在 xml 中使用:
android:interpolator="@android:anim/overshoot_interpolator"
在 Java 代码中使用:
animator.setInterpolator(interpolator);
参考
Android 开发艺术探索
Android 动画:你真的会使用插值器与估值器吗?(含详细实例教学)